Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/motion/offset-path-bounding-client-rect.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>The bounding client rect of an element should reflect offset-path</title>
<link rel="help" href="https://drafts.csswg.org/motion/#offset-path-property">
<link rel="help" href="https://crbug.com/463409688">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
margin: 0;
}
#blue {
background: radial-gradient(lightblue, blue);
width: 60px;
height: 60px;
offset-path: circle(100px at 150px 150px);
position: relative;
left: 100px;
}
#purple {
background: radial-gradient(fuchsia, purple);
width: 60px;
height: 60px;
offset-path: border-box;
position: relative;
left: 100px;
}
</style>
<body>
<div id="blue"></div>
<div id="purple"></div>
<div id="log"></div>
<script>
function check_rect(id, expected) {
test(() => {
const rect = document.getElementById(id).getBoundingClientRect();
for (const prop in expected) {
assert_equals(rect[prop], expected[prop], `#${id} client rect.${prop}`);
}
}, `Bounding client rect for #${id}`);
}
check_rect('blue', {
x: 220,
y: 120,
width: 60,
height: 60
});
check_rect('purple', {
x: -30,
y: -30,
width: 60,
height: 60
});
</script>
</body>
</html>