Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-position/position-absolute-dynamic-containing-block.html - WPT Dashboard Interop Dashboard
<!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>
<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>