| <!DOCTYPE HTML> |
| <meta charset="UTF-8"> |
| <title>CSS Toggles: triggering multiple toggles with a style change</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-trigger-property"> |
| <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 test => { |
| container.innerHTML = ` |
| <style> |
| #t { |
| toggle-root: t1, t2, t3, t4; |
| toggle-trigger: t1, t2, t3; |
| } |
| </style> |
| <div id="t"></div> |
| `; |
| let t = document.getElementById("t"); |
| await wait_for_toggle_creation(t); |
| assert_equals(t.toggles.size, 4, "t.toggles.size after creation"); |
| assert_equals(t.toggles.get("t1").value, 0, "t1 after creation"); |
| assert_equals(t.toggles.get("t2").value, 0, "t2 after creation"); |
| assert_equals(t.toggles.get("t3").value, 0, "t3 after creation"); |
| assert_equals(t.toggles.get("t4").value, 0, "t4 after creation"); |
| |
| let event_count = 0; |
| t.addEventListener("togglechange", event => { |
| switch (++event_count) { |
| case 1: |
| assert_equals(event.toggleName, "t1", "name of first event"); |
| assert_equals(t.toggles.get("t1"), event.toggle); |
| assert_equals(t.toggles.get("t1").value, 1, "t1 after first event"); |
| assert_equals(t.toggles.get("t2").value, 0, "t2 after first event"); |
| assert_equals(t.toggles.get("t3").value, 0, "t3 after first event"); |
| assert_equals(t.toggles.get("t4").value, 0, "t4 after first event"); |
| break; |
| case 2: |
| assert_equals(event.toggleName, "t2", "name of second event"); |
| assert_equals(t.toggles.get("t2"), event.toggle); |
| assert_equals(t.toggles.get("t1").value, 1, "t1 after second event"); |
| assert_equals(t.toggles.get("t2").value, 1, "t2 after second event"); |
| assert_equals(t.toggles.get("t3").value, 0, "t3 after second event"); |
| assert_equals(t.toggles.get("t4").value, 0, "t4 after second event"); |
| // This changes the value of 'toggle-trigger' in the middle of |
| // firing the toggle. We want to test that toggles continue firing |
| // as expected. |
| // |
| // It's constructed this way to avoid the old style being cached |
| // in Chromium's MatchedPropertiesCache, which allows this testcase |
| // to trigger a crash before the fix that introduced it. |
| t.previousElementSibling.sheet.cssRules[0].style.toggleTrigger = "t4"; |
| // This assertion is mainly to force the style to be recomputed: |
| assert_equals(getComputedStyle(t).toggleTrigger, "t4"); |
| break; |
| case 3: |
| assert_equals(event.toggleName, "t3", "name of third event"); |
| assert_equals(t.toggles.get("t3"), event.toggle); |
| assert_equals(t.toggles.get("t1").value, 1, "t1 after third event"); |
| assert_equals(t.toggles.get("t2").value, 1, "t2 after third event"); |
| assert_equals(t.toggles.get("t3").value, 1, "t3 after third event"); |
| assert_equals(t.toggles.get("t4").value, 0, "t4 after third event"); |
| break; |
| case 4: |
| assert_equals(event.toggleName, "t4", "name of fourth event"); |
| assert_equals(t.toggles.get("t4"), event.toggle); |
| assert_equals(t.toggles.get("t1").value, 1, "t1 after fourth event"); |
| assert_equals(t.toggles.get("t2").value, 1, "t2 after fourth event"); |
| assert_equals(t.toggles.get("t3").value, 1, "t3 after fourth event"); |
| assert_equals(t.toggles.get("t4").value, 1, "t4 after fourth event"); |
| break; |
| default: |
| assert_unreached("should get four events"); |
| break; |
| } |
| }); |
| |
| t.click(); |
| assert_equals(event_count, 3); |
| t.click(); |
| assert_equals(event_count, 4); |
| }, "triggering of multiple toggles with a change to toggle-trigger in the middle"); |
| |
| </script> |
