Philip Rogers
740bd53d0c
Automatic update from web-platform-tests Update offset-path transform after location change When `offset-path` is present, a PaintLayer's transform depends on the box's location. However, `LayoutBox` updates the location _after_ `UpdateAfterLayout` runs, meaning the existing transform update in `UpdateAfterLayout` does not correctly account for `offset-path`. This change adds a call to update the PaintLayer transform from `LayoutBox::LocationChanged` to ensure the transform reflects the position including offset-path and location. Fixed: 463409688 Change-Id: I592c8b11a8bfef16e99c52e2a53247e22b6b1d29 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7533524 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Auto-Submit: Philip Rogers <pdr@chromium.org> Reviewed-by: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1578223} -- wpt-commits: bbbb03bd3e4a6f6e2f171356a5ba8e768825efca wpt-pr: 57490
59 lines
1.3 KiB
HTML
59 lines
1.3 KiB
HTML
<!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>
|