Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-contain/content-visibility/content-visibility-layout-containment-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>content-visibility and layout containment</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<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 containment.">
<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 {
content-visibility: visible;
}
#hidden .content_visibility {
content-visibility: hidden;
}
#auto_far .content_visibility {
content-visibility: auto;
}
#auto_close .content_visibility {
content-visibility: auto;
}
#visible_to_hidden .content_visibility {
content-visibility: visible;
}
#hidden_to_visible .content_visibility {
content-visibility: hidden;
}
#visible_to_auto .content_visibility {
content-visibility: visible;
}
#auto_to_visible .content_visibility {
content-visibility: auto;
}
/* Selectors for testing baseline */
.flex {
display: inline-flex;
align-items: baseline;
}
.rect {
background: black;
width: 50px;
height: 100px;
}
</style>
<body>
<div id="log"></div>
<div id="visible">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="hidden">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="auto_close">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="visible_to_hidden">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="hidden_to_visible">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="visible_to_auto">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="auto_to_visible">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<div id="spacer_for_far_to_viewport"></div>
<div id="auto_far">
<div class="flex">
<div class="rect"></div>
<div class="content_visibility rect">X</div>
</div>
</div>
<script>
function layoutContainmentApplied(id) {
let container = document.getElementById(id);
let content_visibility = container.getElementsByClassName("content_visibility")[0];
// To verify layout containment, we test baseline suppression.
// See contain-layout-dynamic-001.html for more details.
let item1 = content_visibility;
let item2 = item1.previousElementSibling;
return Math.abs(item1.getBoundingClientRect().top - item2.getBoundingClientRect().top) <= 1;
}
function setContentVisibility(id, value) {
let container = document.getElementById(id);
let content_visibility = container.getElementsByClassName("content_visibility")[0];
content_visibility.style.contentVisibility = value;
}
promise_test(async () => {
await document.fonts.ready;
assert_false(layoutContainmentApplied("visible"));
}, "content-visibility: visible");
promise_test(async () => {
await document.fonts.ready;
assert_true(layoutContainmentApplied("hidden"));
}, "content-visibility: hidden");
promise_test(async () => {
await document.fonts.ready;
await waitForAtLeastOneFrame();
assert_true(layoutContainmentApplied("auto_far"));
}, "content-visibility: auto (far from viewport)");
promise_test(async () => {
await document.fonts.ready;
await waitForAtLeastOneFrame();
assert_true(layoutContainmentApplied("auto_close"));
}, "content-visibility: auto (close from viewport)");
promise_test(async () => {
await document.fonts.ready;
setContentVisibility("visible_to_hidden", "hidden");
assert_true(layoutContainmentApplied("visible_to_hidden"));
}, "switching content-visibility from visible to hidden");
promise_test(async () => {
await document.fonts.ready;
setContentVisibility("hidden_to_visible", "visible");
assert_false(layoutContainmentApplied("hidden_to_visible"));
}, "switching content-visibility from hidden to visible");
promise_test(async () => {
await document.fonts.ready;
setContentVisibility("visible_to_auto", "auto");
await waitForAtLeastOneFrame();
assert_true(layoutContainmentApplied("visible_to_auto"));
}, "switching content-visibility from visible to auto");
promise_test(async () => {
await document.fonts.ready;
setContentVisibility("auto_to_visible", "visible");
assert_false(layoutContainmentApplied("auto_to_visible"));
}, "switching content-visibility from auto to visible");
</script>
</body>