summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/mozilla/tests/css/css-contain
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/mozilla/tests/css/css-contain
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/mozilla/tests/css/css-contain')
-rw-r--r--testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-document-reflow-count.html44
-rw-r--r--testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-reflow-count.html120
2 files changed, 164 insertions, 0 deletions
diff --git a/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-document-reflow-count.html b/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-document-reflow-count.html
new file mode 100644
index 0000000000..69c1c4b7dd
--- /dev/null
+++ b/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-document-reflow-count.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Contain: Test content-visibility:hidden reflow counts</title>
+ <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+
+ <body style="content-visibility: hidden;">
+ hello
+ </body>
+
+ <script>
+ let gUtils = SpecialPowers.getDOMWindowUtils(window);
+ let gTestContainer = document.getElementById("test");
+
+ function flushLayout() {
+ document.documentElement.offsetHeight;
+ }
+
+ function getReflowCount() {
+ flushLayout();
+ return gUtils.framesReflowed;
+ }
+
+ function runTestFunctionAndCountReflows(testFunction) {
+ const beforeCount = getReflowCount();
+ testFunction();
+ const afterCount = getReflowCount();
+ console.log(afterCount - beforeCount);
+ return afterCount - beforeCount;
+ }
+
+ test(() => {
+ flushLayout();
+
+ const reflows = runTestFunctionAndCountReflows(() => {
+ document.body.innerText = "something else";
+ });
+ assert_equals(reflows, 1, "Reflow only triggered on body.");
+ }, "Changing text of 'content-visibility: hidden' body only triggers a single reflow.");
+ </script>
+</html>
diff --git a/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-reflow-count.html b/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-reflow-count.html
new file mode 100644
index 0000000000..c1484d9c54
--- /dev/null
+++ b/testing/web-platform/mozilla/tests/css/css-contain/content-visibility-hidden-reflow-count.html
@@ -0,0 +1,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>