120 lines
3.5 KiB
HTML
120 lines
3.5 KiB
HTML
<!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">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1746098">
|
|
|
|
<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>
|