summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html')
-rw-r--r--testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html267
1 files changed, 267 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html b/testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html
new file mode 100644
index 0000000000..0a720fd454
--- /dev/null
+++ b/testing/web-platform/tests/css/css-toggle/toggle-visibility.tentative.html
@@ -0,0 +1,267 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>CSS Toggles: toggle-visibility</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://tabatkins.github.io/css-toggle/#toggle-visibility-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/toggle-helpers.js"></script>
+<style id="style">
+
+</style>
+
+<body>
+
+<div id="container"></div>
+<script>
+
+let style = document.getElementById("style");
+let container = document.getElementById("container");
+
+promise_test(async function() {
+ style.innerText = `
+ #container { toggle-group: t self; }
+ #t, #t2 { toggle-root: t 1 at 0 group; }
+ #trigger, #t2 { toggle-trigger: t; }
+ #vis { toggle-visibility: toggle t; }
+ #child { height: 100px; }
+ `;
+ container.innerHTML = `
+ <div id="t"></div>
+ <div id="vis">
+ <div id="child"></div>
+ </div>
+ <div id="trigger"></div>
+ <div id="t2"></div>
+ `;
+
+ let t = document.getElementById("t");
+ let trigger = document.getElementById("trigger");
+ let t2 = document.getElementById("t2");
+ let vis = document.getElementById("vis");
+
+ await wait_for_toggle_creation(t);
+
+ const kVisibleHeight = 100;
+ const kHiddenHeight = 0;
+
+ assert_equals(vis.clientHeight, kHiddenHeight, "before first click");
+ trigger.click();
+ assert_equals(vis.clientHeight, kVisibleHeight, "after first click");
+ trigger.click();
+ assert_equals(vis.clientHeight, kHiddenHeight, "after second click");
+ t.toggles.get("t").value = 1;
+ assert_equals(vis.clientHeight, kVisibleHeight, "after toggle value setter");
+ t2.click();
+ assert_equals(vis.clientHeight, kHiddenHeight, "after click on other element in group");
+}, "showing and hiding in response to toggle changes");
+
+const action_tests = [
+ {
+ name: "focus",
+ markup: `<input type="checkbox" id="check">`,
+ action: () => {
+ document.getElementById("check").focus();
+ },
+ },
+ {
+ name: "scrollIntoView",
+ markup: `<input type="checkbox" id="check">`,
+ action: () => {
+ document.getElementById("check").scrollIntoView();
+ },
+ },
+];
+
+for (let test of action_tests) {
+ promise_test(async function() {
+ style.innerText = `
+ #container { toggle-group: tab self; }
+ #tab { toggle: tab 1 at 0 group; }
+ #panel { toggle-visibility: toggle tab; }
+ `;
+ container.innerHTML = `
+ <div id="tab">Tab</div>
+ <div id="panel">
+ ${test.markup}
+ </div>
+ `;
+
+ let tab = document.getElementById("tab");
+ let panel = document.getElementById("panel");
+
+ await wait_for_toggle_creation(tab);
+
+ let tab_toggle = tab.toggles.get("tab");
+
+ assert_equals(tab_toggle.value, 0, "toggle value before focus");
+ assert_equals(panel.clientHeight, 0, "panel height before focus");
+
+ test.action();
+
+ assert_equals(tab_toggle.value, 1, "toggle value after focus");
+ assert_not_equals(panel.clientHeight, 0, "panel height after focus");
+ }, `${test.name} inside hidden element changes a toggle to show it`);
+}
+
+const scope_tests = [
+ `
+ <div class="root-inactive">
+ <div class="vis expect-hidden"></div>
+ </div>
+ <div class="vis expect-hidden"></div>
+ `,
+ `
+ <div class="root-inactive-self">
+ <div class="vis expect-hidden"></div>
+ </div>
+ <div class="vis expect-shown"></div>
+ `,
+ `
+ <div class="root-active">
+ <div class="vis expect-shown"></div>
+ </div>
+ <div class="vis expect-shown"></div>
+ `,
+ `
+ <div class="root-active-self">
+ <div class="vis expect-shown"></div>
+ </div>
+ <div class="vis expect-shown"></div>
+ `,
+];
+
+for (let test of scope_tests) {
+ promise_test(async function() {
+ container.innerHTML = test;
+ style.innerText = `
+ .root-inactive { toggle-root: t 1 at 0; }
+ .root-active { toggle-root: t 1 at 1; }
+ .root-inactive-self { toggle-root: t 1 at 0 self; }
+ .root-active-self { toggle-root: t 1 at 1 self; }
+
+ .vis {
+ toggle-visibility: toggle t;
+ }
+
+ .vis::before {
+ content: "";
+ display: block;
+ height: 100px;
+ width: 100px;
+ }
+ `;
+
+ await wait_for_toggle_creation(container.querySelector('[class^="root-"]'));
+
+ for (let e of container.querySelectorAll('.expect-hidden')) {
+ assert_equals(e.clientHeight, 0);
+ }
+ for (let e of container.querySelectorAll('.expect-shown')) {
+ assert_equals(e.clientHeight, 100);
+ }
+ }, `scope test: ${test}`);
+}
+
+async function wait_for_content_visibility_auto() {
+ return new Promise(resolve => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(resolve);
+ });
+ });
+}
+
+promise_test(async function() {
+ style.innerText = `
+ #t { toggle-root: t 1 at 0; }
+ #vis {
+ toggle-visibility: toggle t;
+ content-visibility: auto;
+ min-height: 50px;
+ }
+ #child { height: 100px; }
+ #spacer { height: 300vh; }
+ `;
+ // TODO (dbaron): Why doesn't padding-top on #container have the same effect
+ // as this spacer?
+ container.innerHTML = `
+ <div id="spacer"></div>
+ <div id="t"></div>
+ <div id="vis">
+ <div id="child"></div>
+ </div>
+ `;
+
+ let t = document.getElementById("t");
+ let vis = document.getElementById("vis");
+ let spacer = document.getElementById("spacer");
+
+ await wait_for_toggle_creation(t);
+
+ let toggle = t.toggles.get("t");
+
+ const kVisibleHeight = 100;
+ const kHiddenHeight = 50;
+
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen");
+ toggle.value = 1;
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen");
+ spacer.remove();
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen");
+ toggle.value = 0;
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen");
+ toggle.value = 1;
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (2)");
+ toggle.value = 0;
+ t.before(spacer);
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen (2)");
+ spacer.remove();
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen (2)");
+ toggle.value = 1;
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (3)");
+ t.before(spacer);
+ await wait_for_content_visibility_auto();
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen (2)");
+}, "interaction of toggle-visibility and content-visibility: auto");
+
+promise_test(async function() {
+ style.innerText = `
+ #t { toggle-root: t 1 at 0; }
+ #vis {
+ toggle-visibility: toggle t;
+ content-visibility: hidden;
+ }
+ #child { height: 100px; }
+ `;
+ container.innerHTML = `
+ <div id="t"></div>
+ <div id="vis">
+ <div id="child"></div>
+ </div>
+ `;
+
+ let t = document.getElementById("t");
+ let vis = document.getElementById("vis");
+
+ await wait_for_toggle_creation(t);
+
+ let toggle = t.toggles.get("t");
+
+ const kVisibleHeight = 100;
+ const kHiddenHeight = 0;
+
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen");
+ toggle.value = 1;
+ assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen");
+}, "interaction of toggle-visibility and content-visibility: hidden");
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-09 00:28:30 +0000