summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html')
-rw-r--r--testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html338
1 files changed, 338 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html b/testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html
new file mode 100644
index 0000000000..f47ec55ed0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-toggle/toggle-api.tentative.html
@@ -0,0 +1,338 @@
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>CSS Toggles: CSSToggle and CSSToggleMap API</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/#dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/toggle-helpers.js"></script>
+
+<div id="test"></div>
+
+<script>
+
+let container = document.getElementById("test");
+
+promise_test(async function() {
+ container.innerHTML = `
+ <style>
+ :toggle(mytoggle) { --t:4; }
+ :toggle(newtoggle) { --t:7; }
+ :toggle(newname) { --t:9; }
+ </style>
+ <div>
+ <div id="a" style="toggle-root: mytoggle 2 at 1 self"></div>
+ </div>
+ <div>
+ <div id="b"></div>
+ </div>
+ `;
+ let a = document.getElementById("a");
+ let b = document.getElementById("b");
+ assert_equals(a.toggles.size, 0, "a.toggles.size before creation");
+ assert_equals(b.toggles.size, 0, "b.toggles.size before creation");
+ await wait_for_toggle_creation(a);
+ assert_equals(a.toggles.size, 1, "a.toggles.size after creation");
+ assert_equals(b.toggles.size, 0, "b.toggles.size after creation");
+ let t = a.toggles.get("mytoggle");
+ for (let item of a.toggles) {
+ assert_equals(item[0], "mytoggle", "iteration of a.toggles");
+ assert_equals(item[1], t, "iteration of a.toggles");
+ }
+ for (let item of a.toggles.entries()) {
+ assert_equals(item[0], "mytoggle", "iteration of a.toggles.entries()");
+ assert_equals(item[1], t, "iteration of a.toggles.entries()");
+ }
+ for (let item of a.toggles.keys()) {
+ assert_equals(item, "mytoggle", "iteration of a.toggles.keys()");
+ }
+ for (let item of a.toggles.values()) {
+ assert_equals(item, t, "iteration of a.toggles.values()");
+ }
+ assert_equals(Object.getPrototypeOf(a.toggles), CSSToggleMap.prototype);
+ assert_equals(Object.getPrototypeOf(t), CSSToggle.prototype);
+ let computed = (element) => getComputedStyle(element).getPropertyValue("--t");
+ assert_equals(computed(a), "4", "computed style before move");
+ assert_equals(computed(b), "", "computed style before move");
+
+ b.toggles.set("newtoggle", t);
+ assert_equals(a.toggles.size, 0, "a.toggles.size after move");
+ assert_equals(b.toggles.size, 1, "b.toggles.size after move");
+ assert_equals(computed(a), "", "computed style after move");
+ assert_equals(computed(b), "7", "computed style after move");
+
+ assert_equals(a.toggles.get("mytoggle"), undefined, 'a.toggles.get("mytoggle") after move');
+ assert_equals(a.toggles.get("newtoggle"), undefined, 'a.toggles.get("newtoggle") after move');
+ assert_equals(b.toggles.get("mytoggle"), undefined, 'b.toggles.get("mytoggle") after move');
+ assert_equals(b.toggles.get("newtoggle"), t, 'b.toggles.get("newtoggle") after move');
+
+ b.toggles.set("newname", t);
+ assert_equals(a.toggles.size, 0, "a.toggles.size after rename");
+ assert_equals(b.toggles.size, 1, "b.toggles.size after rename");
+ assert_equals(computed(a), "", "computed style after rename");
+ assert_equals(computed(b), "9", "computed style after rename");
+ assert_equals(a.toggles.get("mytoggle"), undefined, 'a.toggles.get("mytoggle") after rename');
+ assert_equals(a.toggles.get("newtoggle"), undefined, 'a.toggles.get("newtoggle") after rename');
+ assert_equals(a.toggles.get("newname"), undefined, 'a.toggles.get("newname") after rename');
+ assert_equals(b.toggles.get("mytoggle"), undefined, 'b.toggles.get("mytoggle") after rename');
+ assert_equals(b.toggles.get("newtoggle"), undefined, 'b.toggles.get("newtoggle") after rename');
+ assert_equals(b.toggles.get("newname"), t, 'b.toggles.get("newname") after rename');
+
+ assert_throws_dom("SyntaxError", () => { a.toggles.set("none", t); },
+ "setting toggle_name to 'none'");
+ assert_equals(a.toggles.size, 0, "a.toggles.size after failed set");
+ assert_equals(b.toggles.size, 1, "b.toggles.size after failed set");
+ assert_equals(b.toggles.get("newname"), t, "b.toggles.get after failed set");
+
+ assert_throws_dom("SyntaxError", () => { let t = new CSSToggle({ "states": [] }); },
+ "toggle constructor with empty list of states");
+ assert_throws_dom("SyntaxError", () => { let t = new CSSToggle({ "states": ["one"] }); },
+ "toggle constructor with only one state");
+ assert_throws_dom("SyntaxError", () => { let t = new CSSToggle({ "states": ["one", "two", "one"] }); },
+ "toggle constructor with duplicate states");
+ let c = new CSSToggle({ "states": ["one", "two", "three"] });
+ assert_throws_dom("SyntaxError", () => { c.states = []; },
+ "toggle states setter with empty list of states");
+ assert_throws_dom("SyntaxError", () => { c.states = ["one"]; },
+ "toggle states setter with only one state");
+ assert_throws_dom("SyntaxError", () => { c.states = ["one", "two", "one"]; },
+ "toggle states setter with duplicate states");
+
+ // TODO(https://crbug.com/1250716): Should the toggle on a be
+ // re-created at some point? If so, when?
+
+}, "CSSToggleMap basic API usage and moving toggle");
+
+promise_test(async function() {
+ container.innerHTML = `
+ <style>
+ :toggle(mytoggle 0) { --t:0; }
+ :toggle(mytoggle 1) { --t:1; }
+ :toggle(mytoggle 2) { --t:2; }
+ :toggle(mytoggle 3) { --t:3; }
+ :toggle(mytoggle 4) { --t:4; }
+ </style>
+ <div id="a" style="toggle: mytoggle 2 at 1 self"></div>
+ <div id="b"></div>
+ `;
+ let a = document.getElementById("a");
+ let b = document.getElementById("b");
+ let computed = (elt) => getComputedStyle(elt).getPropertyValue("--t");
+
+ await wait_for_toggle_creation(a);
+ let t = a.toggles.get("mytoggle");
+
+ assert_equals(computed(a), "1", "initial state of toggle");
+ assert_equals(t.value, 1, "CSSToggle.value in initial state");
+ assert_equals(t.valueAsNumber, 1, "CSSToggle.valueAsNumber in initial state");
+ assert_equals(t.valueAsString, null, "CSSToggle.valueAsString in initial state");
+ assert_equals(t.states, 2, "CSSToggle.states in initial state");
+ assert_equals(t.group, false, "CSSToggle.group in initial state");
+ assert_equals(t.scope, "narrow", "CSSToggle.scope in initial state");
+ assert_equals(t.cycle, "cycle", "CSSToggle.cycle in initial state");
+ a.click();
+ assert_equals(computed(a), "2", "state of toggle after click");
+ assert_equals(t.value, 2, "CSSToggle.value after click");
+ assert_equals(t.valueAsNumber, 2, "CSSToggle.valueAsNumber after click");
+ assert_equals(t.valueAsString, null, "CSSToggle.valueAsString after click");
+
+ t.value = 1;
+ assert_equals(computed(a), "1", "state after setting value");
+ assert_equals(t.value, 1, "CSSToggle.value after setting value");
+ assert_equals(t.valueAsNumber, 1, "CSSToggle.valueAsNumber after setting value");
+ assert_equals(t.valueAsString, null, "CSSToggle.valueAsString after setting value");
+
+ t.states = ["zero", "one", "two", "three", "four"]
+ assert_equals(computed(a), "1", "state after setting states");
+ assert_equals(t.value, 1, "CSSToggle.value after setting states");
+ assert_equals(t.valueAsNumber, 1, "CSSToggle.valueAsNumber after setting states");
+ assert_equals(t.valueAsString, "one", "CSSToggle.valueAsString after setting states");
+
+ t.value = "three";
+ assert_equals(computed(a), "3", "state after changing value with new states");
+ assert_equals(t.value, "three", "CSSToggle.value after changing value with new states");
+ assert_equals(t.valueAsNumber, 3, "CSSToggle.valueAsNumber after changing value with new states");
+ assert_equals(t.valueAsString, "three", "CSSToggle.valueAsString after changing value with new states");
+
+ // dynamic changes to group are tested in a separate test below
+
+ assert_equals(computed(a), "3", "a state before changing scope");
+ assert_equals(computed(b), "", "b state before changing scope");
+ t.scope = "wide";
+ assert_equals(computed(a), "3", "a state after changing scope");
+ assert_equals(computed(b), "3", "b state after changing scope");
+ t.scope = "narrow";
+ assert_equals(computed(a), "3", "a state after changing scope again");
+ assert_equals(computed(b), "", "b state after changing scope again");
+
+ t.value = 4;
+ assert_equals(computed(a), "4", "state after changing value again")
+ a.click();
+ assert_equals(computed(a), "0", "state after cycling with initial cycle")
+ t.value = 4;
+ t.cycle = "cycle-on";
+ assert_equals(computed(a), "4", "state after changing cycle to cycle-on, with toggle-root still set")
+ a.click();
+ assert_equals(computed(a), "0", "state after cycling with cycle-on, with toggle-root still set")
+ // now remove the toggle-root property so that it no longer overrides the
+ // toggle when changing a toggle.
+ a.style.toggleRoot = "";
+ t.value = 4;
+ t.cycle = "cycle-on";
+ assert_equals(computed(a), "4", "state after changing cycle to cycle-on")
+ a.click();
+ assert_equals(computed(a), "1", "state after cycling with cycle-on")
+ t.value = 4;
+ t.cycle = "sticky";
+ assert_equals(computed(a), "4", "state after changing cycle to sticky")
+ a.click();
+ assert_equals(computed(a), "4", "state after cycling with sticky")
+ t.value = 4;
+ t.cycle = "cycle";
+ assert_equals(computed(a), "4", "state after changing cycle to cycle")
+ a.click();
+ assert_equals(computed(a), "0", "state after cycling with cycle")
+}, "CSSToggle basic API usage on existing toggle");
+
+
+promise_test(async function() {
+ container.innerHTML = `
+ <style>
+ :toggle(grouptoggle 0) { --g:0; }
+ :toggle(grouptoggle 1) { --g:1; }
+ :toggle(grouptoggle 2) { --g:2; }
+ </style>
+ <!-- use the document-wide implicit toggle group -->
+ <div id="a" style="toggle: grouptoggle 2 at 1 self cycle-on"></div>
+ <div id="b" style="toggle: grouptoggle 2 at 1 self cycle-on"></div>
+ `;
+ let a = document.getElementById("a");
+ let b = document.getElementById("b");
+ let computed = (elt) => getComputedStyle(elt).getPropertyValue("--g");
+
+ await wait_for_toggle_creation(a);
+ await wait_for_toggle_creation(b);
+ let ta = a.toggles.get("grouptoggle");
+ let tb = b.toggles.get("grouptoggle");
+
+ assert_equals(computed(a), "1", "initial state of a");
+ assert_equals(computed(b), "1", "initial state of b");
+ assert_equals(ta.group, false, "initial group of a");
+ assert_equals(tb.group, false, "initial group of b");
+
+ // Remove the toggle-root property so it doesn't override the group
+ // on the toggle.
+ a.style.toggleRoot = "";
+ b.style.toggleRoot = "";
+
+ ta.group = true;
+ a.click();
+ assert_equals(computed(a), "2", "state of a after first click");
+ assert_equals(computed(b), "1", "state of b after first click");
+
+ tb.group = true;
+ assert_equals(computed(a), "2", "state of a after both in group");
+ assert_equals(computed(b), "1", "state of b after both in group");
+ a.click();
+ assert_equals(computed(a), "1", "state of a after second click");
+ assert_equals(computed(b), "0", "state of b after second click");
+ b.click();
+ assert_equals(computed(a), "0", "state of a after third click");
+ assert_equals(computed(b), "1", "state of b after third click");
+ ta.group = false;
+ a.click();
+ assert_equals(computed(a), "1", "state of a after fourth click");
+ assert_equals(computed(b), "1", "state of b after fourth click");
+
+ ta.group = true;
+ tb.group = true;
+ a.click();
+ assert_equals(computed(a), "2", "state of a after fifth click");
+ assert_equals(computed(b), "0", "state of b after fifth click");
+ // Put the toggle-root property back so that it overrides the group
+ // on the toggle, but only when changing *that* toggle.
+ b.style.toggleRoot = "grouptoggle 2 at 1 self cycle-on";
+ b.click();
+ assert_equals(computed(a), "2", "state of a after sixth click");
+ assert_equals(computed(b), "1", "state of b after sixth click");
+ a.click();
+ assert_equals(computed(a), "1", "state of a after seventh click");
+ assert_equals(computed(b), "0", "state of b after seventh click");
+}, "CSSToggle usage of group setter on existing toggle");
+
+promise_test(async function() {
+ container.innerHTML = `
+ <style>
+ :toggle(d 0) { --d:0; }
+ :toggle(d 1) { --d:1; }
+ :toggle(d 2) { --d:2; }
+ :toggle(e 0) { --e:0; }
+ :toggle(e 1) { --e:1; }
+ :toggle(e 2) { --e:2; }
+ :toggle(f 0) { --f:0; }
+ :toggle(f 1) { --f:1; }
+ :toggle(f 2) { --f:2; }
+ </style>
+ <div id="a"></div>
+ <!-- TODO(https://crbug.com/1250716): This toggle-trigger should probably
+ also work if I set it dynamically right before the first click. -->
+ <div id="b" style="toggle-trigger: d next, e prev"></div>
+ `;
+ let a = document.getElementById("a");
+ let b = document.getElementById("b");
+ assert_equals(a.toggles.size, 0, "a.toggles.size before creation");
+ assert_equals(b.toggles.size, 0, "b.toggles.size before creation");
+
+ let computed = (elt, prop) => getComputedStyle(elt).getPropertyValue(`--${prop}`);
+
+ assert_equals(computed(a, "d"), "", "initial computed(a, d)");
+ assert_equals(computed(a, "e"), "", "initial computed(a, e)");
+ assert_equals(computed(b, "d"), "", "initial computed(b, d)");
+ assert_equals(computed(b, "e"), "", "initial computed(b, e)");
+
+ let t1 = new CSSToggle({states: 2, cycle: "cycle-on"});
+ let t2 = new CSSToggle({states: 2, value: 1, scope: "narrow"});
+
+ a.toggles.set("d", t1);
+ assert_equals(a.toggles.size, 1, "step 2 a.toggles.size");
+ assert_equals(b.toggles.size, 0, "step 2 b.toggles.size");
+ assert_equals(computed(a, "d"), "0", "step 2 computed(a, d)");
+ assert_equals(computed(b, "d"), "0", "step 2 computed(b, d)");
+ assert_equals(computed(a, "e"), "", "step 2 computed(a, e)");
+ assert_equals(computed(b, "e"), "", "step 2 computed(b, e)");
+
+ b.toggles.set("e", t2);
+ assert_equals(a.toggles.size, 1, "step 3 a.toggles.size");
+ assert_equals(b.toggles.size, 1, "step 3 b.toggles.size");
+ assert_equals(computed(a, "d"), "0", "step 3 computed(a, d)");
+ assert_equals(computed(b, "d"), "0", "step 3 computed(b, d)");
+ assert_equals(computed(a, "e"), "", "step 3 computed(a, e)");
+ assert_equals(computed(b, "e"), "1", "step 3 computed(b, e)");
+
+ b.click();
+ assert_equals(computed(a, "d"), "1", "step 4 computed(a, d)");
+ assert_equals(computed(b, "d"), "1", "step 4 computed(b, d)");
+ assert_equals(computed(a, "e"), "", "step 4 computed(a, e)");
+ assert_equals(computed(b, "e"), "0", "step 4 computed(b, e)");
+
+ a.toggles.set("f", t2);
+ assert_equals(a.toggles.size, 2, "step 5 a.toggles.size");
+ assert_equals(b.toggles.size, 0, "step 5 b.toggles.size");
+ assert_equals(computed(a, "d"), "1", "step 5 computed(a, d)");
+ assert_equals(computed(b, "d"), "1", "step 5 computed(b, d)");
+ assert_equals(computed(a, "e"), "", "step 5 computed(a, e)");
+ assert_equals(computed(b, "e"), "", "step 5 computed(b, e)");
+ assert_equals(computed(a, "f"), "0", "step 5 computed(a, f)");
+ assert_equals(computed(b, "f"), "", "step 5 computed(b, f)");
+
+ b.click();
+ assert_equals(computed(a, "d"), "2", "step 6 computed(a, d)");
+ assert_equals(computed(b, "d"), "2", "step 6 computed(b, d)");
+ assert_equals(computed(a, "e"), "", "step 6 computed(a, e)");
+ assert_equals(computed(b, "e"), "", "step 6 computed(b, e)");
+ assert_equals(computed(a, "f"), "0", "step 6 computed(a, f)");
+ assert_equals(computed(b, "f"), "", "step 6 computed(b, f)");
+}, "dynamic creation of CSSToggle and their use");
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-03 08:27:19 +0000