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-hidden-reflow-count.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Contain: Test content-visibility:hidden reflow counts</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
content-visibility: visible;
contain: strict;
}
.flex {
display: flex;
}
.grid {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
</style>
<div id="test"></div>
<script>
let gUtils = SpecialPowers.getDOMWindowUtils(window);
let gTestContainer = document.getElementById("test");
function setupContainerWithStrictContainment() {
const container = document.createElement("div");
container.classList.add("container");
gTestContainer.innerHTML = "";
gTestContainer.appendChild(container);
return container;
}
function flushLayout() {
document.documentElement.offsetHeight;
}
function getReflowCount() {
flushLayout();
return gUtils.framesReflowed;
}
function runTestFunctionAndCountReflows(testFunction, container) {
const beforeCount = getReflowCount();
testFunction(container);
const afterCount = getReflowCount();
return afterCount - beforeCount;
}
function assertContentVisibilityHiddenHasFewerReflows(testSetup, testFunction) {
let container = setupContainerWithStrictContainment();
testSetup(container);
flushLayout();
const visibleReflows = runTestFunctionAndCountReflows(testFunction, container);
container = setupContainerWithStrictContainment();
testSetup(container);
container.style.contentVisibility = "hidden";
flushLayout();
const hiddenReflows = runTestFunctionAndCountReflows(testFunction, container);
assert_less_than(hiddenReflows, visibleReflows,
"Style / layout changes in hidden content resulted in fewer reflows than visible content.");
}
test(() => {
assertContentVisibilityHiddenHasFewerReflows(
(container) => {
const div = document.createElement("div");
div.innerText = "Test Content";
container.appendChild(div);
},
(container) => {
container.children[0].style.width = "100px";
container.children[0].style.height = "100px";
});
}, `Avoiding layout while modifying a simple div's style.`);
test(() => {
assertContentVisibilityHiddenHasFewerReflows(
(container) => {
container.classList.add("flex");
const flexContainer = document.createElement("div");
flexContainer.classList.add("flex");
container.appendChild(flexContainer);
container.appendChild(document.createElement("div"));
},
(container) => {
container.children[0].style.flexDirection = "row-reverse";
}
);
}, `Avoiding layout while modifying a div with flex display mode.`);
test(() => {
assertContentVisibilityHiddenHasFewerReflows(
(container) => {
container.classList.add("grid");
const gridChild = document.createElement("div");
gridChild.style.display = "grid";
container.appendChild(gridChild);
container.appendChild(document.createElement("div"));
},
(container) => {
container.children[0].style.rowGap = "30px";
},
);
}, `Avoiding layout while modifying a div with grid display mode.`);
</script>
</html>