diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html b/testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html new file mode 100644 index 0000000000..3968f68584 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/position-absolute-dynamic-containing-block.html @@ -0,0 +1,140 @@ +<!DOCTYPE html> +<title>CSS Position: position:absolute dynamic containing block</title> +<link rel="author" title="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-position-3/#def-cb"> +<meta name="assert" content="Tests changes in containing block for out-of-flow positioned descendants."> +<style> + +#outer { + width: 400px; + height: 300px; + outline: black solid 1px; +} +#intermediate { + width: 300px; + height: 200px; + outline: gray solid 1px; +} +#target { + background: green; +} +.abs { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.fixed { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.abs-container { + position: relative; +} +.fixed-container { + will-change: transform; +} +div { + padding: 5px; +} +</style> +<!-- This tests potential caching of out-of-flow positioned descendants. --> +<div id="outer"> + <div> + <div id="intermediate"> + <div> + <div id="target">TTT</div> + <div id="noLayout1"></div> + </div> + <div id="noLayout2"></div> + </div> + </div> +</div> +<script> + let outer = document.querySelector("#outer"); + let intermediate = document.querySelector("#intermediate"); + let target = document.querySelector("#target"); + let padding = 5; + + function cleanup() { + outer.className = ""; + intermediate.className = ""; + target.className = ""; + document.body.offsetTop; + } + + test( t => { + t.add_cleanup(cleanup); + outer.classList.add("abs-container"); + target.classList.add("abs"); + assert_equals(target.offsetHeight, outer.offsetHeight); + intermediate.classList.add("abs-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + }, "abs containing block moves from outer to intermediate" ); + test( t => { + t.add_cleanup(cleanup); + target.classList.add("abs"); + intermediate.classList.add("abs-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + outer.classList.add("abs-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + intermediate.classList.remove("abs-container"); + assert_equals(target.offsetHeight, outer.offsetHeight); + }, "abs containing block moves from intermediate to outer" ); + test( t => { + t.add_cleanup(cleanup); + target.classList.add("abs"); + outer.classList.add("abs-container"); + assert_equals(target.offsetHeight, outer.offsetHeight); + target.classList.remove("abs"); + assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); + }, "target is no longer absolute"); + test( t => { + t.add_cleanup(cleanup); + outer.classList.add("abs-container"); + assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); + target.classList.add("abs"); + assert_equals(target.offsetHeight, outer.offsetHeight); + }, "target becomes absolute"); + + // Repeat same tests with fixed + test( t => { + t.add_cleanup(cleanup); + outer.classList.add("fixed-container"); + target.classList.add("fixed"); + assert_equals(target.offsetHeight, outer.offsetHeight); + intermediate.classList.add("fixed-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + }, "fixed containing block moves from outer to intermediate" ); + test( t => { + t.add_cleanup(cleanup); + target.classList.add("fixed"); + intermediate.classList.add("fixed-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + outer.classList.add("fixed-container"); + assert_equals(target.offsetHeight, intermediate.offsetHeight); + intermediate.classList.remove("fixed-container"); + assert_equals(target.offsetHeight, outer.offsetHeight); + }, "fixed containing block moves from intermediate to outer" ); + test( t => { + t.add_cleanup(cleanup); + target.classList.add("fixed"); + outer.classList.add("fixed-container"); + assert_equals(target.offsetHeight, outer.offsetHeight); + target.classList.remove("fixed"); + assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); + }, "target is no longer fixed"); + test( t => { + t.add_cleanup(cleanup); + outer.classList.add("fixed-container"); + assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding); + target.classList.add("fixed"); + assert_equals(target.offsetHeight, outer.offsetHeight); + }, "target becomes fixed"); +</script> |