| <!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> |
