mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Peng Zhou
21c7700929
Automatic update from web-platform-tests Fix offsetParent computation for elements with fixed position (#54043) Consider this test case: <div style="transform: translate(50px, 50px);" id="transform"> <div style="position: fixed;" id="fixed"></div> </div> Observed behavior: `div#fixed` has `offsetParent = null`, but its `offsetLeft` and `offsetTop` are relative to `div#transform` (both values = 0). Specification conflict, current CSSOM spec states: > The element’s computed value of the position property is fixed. This contradicts the observed behavior since transform establishes a containing block for fixed-position descendants. Other properties like will-change and contain can trigger this too. Proposed Specification Update of `offsetParent`: > If any of the following holds true return null and terminate this algorithm: - The element’s computed value of the position property is fixed and no ancestor establishes a fixed position containing block. > Let ancestor be the parent of the element in the flat tree and repeat these substeps: - If ancestor is closed-shadow-hidden from the element, the element has a computed `position` value of `fixed`, and no ancestor establishes a fixed position containing block, terminate this algorithm and return null. Implement it in Chromium first, then update the spec. See https://github.com/w3c/csswg-drafts/issues/12352 for more details. Bug: 40694036 Change-Id: I4bf32a9a5ab73c44051d13fd9c79eac7515c973e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6774502 Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Peng Zhou <[email protected]> Cr-Commit-Position: refs/heads/main@{#1492432} Co-authored-by: zhoupeng <[email protected]> -- wpt-commits: ae114742821d016d3dc6cf2e816d801847b78193 wpt-pr: 54043
61 lines
1.5 KiB
HTML
61 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<link rel="author" href="mailto:[email protected]">
|
|
<link rel="help" href="https://www.w3.org/TR/css-position-3/#fixed-cb">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12352">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#a, #b, #c, #d, #e, #f {
|
|
position: fixed;
|
|
}
|
|
#margin {
|
|
margin: 10px;
|
|
}
|
|
#transform {
|
|
transform: translateX(10px);
|
|
}
|
|
#perspective {
|
|
perspective: 10px;
|
|
}
|
|
#filter {
|
|
filter: opacity(25%);
|
|
}
|
|
#contain {
|
|
contain: paint;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="a"></div>
|
|
<div id="margin">
|
|
<div><div id="b"></div></div>
|
|
</div>
|
|
|
|
<div id="transform">
|
|
<div><div id="c"></div></div>
|
|
</div>
|
|
<div id="perspective">
|
|
<div><div id="d"></div></div>
|
|
</div>
|
|
<div id="filter">
|
|
<div><div id="e"></div></div>
|
|
</div>
|
|
<div id="contain">
|
|
<div><div id="f"></div></div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
test(() => {
|
|
assert_equals(a.offsetParent, null);
|
|
assert_equals(b.offsetParent, null);
|
|
}, 'If the containing block for a fixed positioned element is viewport, the offsetParent should be null.');
|
|
|
|
test(() => {
|
|
assert_equals(c.offsetParent, transform);
|
|
assert_equals(d.offsetParent, perspective);
|
|
assert_equals(e.offsetParent, filter);
|
|
assert_equals(f.offsetParent, contain);
|
|
}, 'If the containing block for a fixed positioned element is the nearest ancestor box, the offsetParent should be the nearest ancestor box.');
|
|
</script> |