<!DOCTYPE html>
<meta charset="utf-8">
<title>content-visibility and layout/paint containment</title>
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1765615">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/rendering-utils.js"></script>
<meta name="assert" content="content-visibility: auto and elements skipping their content change the used value of the contain property to turn on layout/paint containment, affecting absolute/fixed positioned descendants.">
<style>
/* Selectors for content-visibility */
#spacer_for_far_to_viewport {
height: 300vh;
}
.content_visibility {
/* Dynamic modification of content-visibility may change whether style
containment is applied, which in turn may cause drastic invalidations
(e.g. rebuilding counters). Make the test more robust by forcing
style containment to always apply. */
contain: style;
}
#visible {
content-visibility: visible;
}
#hidden {
content-visibility: hidden;
}
#auto_far {
content-visibility: auto;
}
#auto_close {
content-visibility: auto;
}
#visible_to_hidden {
content-visibility: visible;
}
#hidden_to_visible {
content-visibility: hidden;
}
#visible_to_auto {
content-visibility: visible;
}
#auto_to_visible {
content-visibility: auto;
}
/* Selectors for testing absolute/fixed positioning container blocks */
#top_spacer {
height: 100px;
background: lightgray;
}
.absolute_pos {
position: absolute;
top: 42px;
}
.fixed_pos {
position: fixed;
top: 42px;
}
</style>
<body>
<div id="log"></div>
<div id="top_spacer"></div>
<div id="visible" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="hidden" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="auto_close" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="visible_to_hidden" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="hidden_to_visible" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="visible_to_auto" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="auto_to_visible" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<div id="spacer_for_far_to_viewport"></div>
<div id="auto_far" class="content_visibility">
<div class="absolute_pos"></div>
<div class="fixed_pos"></div>
</div>
<script>
function verifyContainmentFromAbsoluteFixedPositioning(id, applied) {
// content-visibility: auto and elements skipping their content change
// apply paint/layout containment, making them an absolute/fixed
// positioning container blocks.
// See contain-paint-dynamic-001.html / contain-layout-dynamic-001.html.
let container = document.getElementById(id);
let containerTop = container.getBoundingClientRect().top;
let abs_top = container.getElementsByClassName("absolute_pos")[0]
.getBoundingClientRect().top;
assert_equals(abs_top > containerTop, applied, "absolute positioning containing block");
let fixed_top = container.getElementsByClassName("fixed_pos")[0]
.getBoundingClientRect().top;
assert_equals(fixed_top > containerTop, applied, "fixed positioning containing block");
}
function setContentVisibility(id, value) {
let container = document.getElementById(id);
container.style.contentVisibility = value;
}
promise_test(async () => {
verifyContainmentFromAbsoluteFixedPositioning("visible",
/*applied=*/false);
}, "content-visibility: visible");
promise_test(async () => {
verifyContainmentFromAbsoluteFixedPositioning("hidden",
/*applied=*/true);
}, "content-visibility: hidden");
promise_test(async () => {
await waitForAtLeastOneFrame();
verifyContainmentFromAbsoluteFixedPositioning("auto_far",
/*applied=*/true);
}, "content-visibility: auto (far from viewport)");
promise_test(async () => {
await waitForAtLeastOneFrame();
verifyContainmentFromAbsoluteFixedPositioning("auto_close",
/*applied=*/true);
}, "content-visibility: auto (close from viewport)");
promise_test(async () => {
setContentVisibility("visible_to_hidden", "hidden");
verifyContainmentFromAbsoluteFixedPositioning("visible_to_hidden",
/*applied=*/true);
}, "switching content-visibility from visible to hidden");
promise_test(async () => {
setContentVisibility("hidden_to_visible", "visible");
verifyContainmentFromAbsoluteFixedPositioning("hidden_to_visible",
/*applied=*/false);
}, "switching content-visibility from hidden to visible");
promise_test(async () => {
setContentVisibility("visible_to_auto", "auto");
await waitForAtLeastOneFrame();
verifyContainmentFromAbsoluteFixedPositioning("visible_to_auto",
/*applied=*/true);
}, "switching content-visibility from visible to auto");
promise_test(async () => {
setContentVisibility("auto_to_visible", "visible");
verifyContainmentFromAbsoluteFixedPositioning("auto_to_visible",
/*applied=*/false);
}, "switching content-visibility from auto to visible");
</script>
</body>
Codebase Browser
chromium