1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<!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>
|
