| <!DOCTYPE HTML> |
| <meta charset="UTF-8"> |
| <title>CSS Toggles: serialization of toggle shorthand</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-property"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <body> |
| <script> |
| |
| let tests = [ |
| { "toggle-root": null, |
| "toggle-trigger": "mytoggle", |
| "expected": "" }, |
| { "toggle-root": "mytoggle", |
| "toggle-trigger": null, |
| "expected": "" }, |
| { "toggle-root": "none", |
| "toggle-trigger": "mytoggle", |
| "expected": "" }, |
| { "toggle-root": "mytoggle", |
| "toggle-trigger": "none", |
| "expected": "" }, |
| { "toggle-root": "none", |
| "toggle-trigger": "none", |
| "expected": "none" }, |
| { "toggle-root": "mytoggle", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle" }, |
| { "toggle-root": "mytoggle, yourtoggle", |
| "toggle-trigger": "mytoggle", |
| "expected": "" }, |
| { "toggle-root": "mytoggle", |
| "toggle-trigger": "mytoggle, yourtoggle", |
| "expected": "" }, |
| { "toggle-root": "mytoggle 2", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle 2" }, |
| { "toggle-root": "mytoggle 2", |
| "toggle-trigger": "mytoggle 2", |
| "expected": "" }, |
| { "toggle-root": "mytoggle 2 at 1", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle 2 at 1" }, |
| { "toggle-root": "mytoggle 2 at 1", |
| "toggle-trigger": "mytoggle 1", |
| "expected": "" }, |
| { "toggle-root": "mytoggle 2 at 1", |
| "toggle-trigger": "mytoggle 2", |
| "expected": "" }, |
| { "toggle-root": "mytoggle 2 at 1 sticky group self", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle 2 at 1 sticky group self" }, |
| { "toggle-root": "mytoggle 4 at 2 self sticky group", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle 4 at 2 sticky group self" }, |
| { "toggle-root": "mytoggle [one two three] at two self cycle-on group", |
| "toggle-trigger": "mytoggle", |
| "expected": "mytoggle [one two three] at two cycle-on group self" }, |
| ]; |
| |
| for (let t of tests) { |
| test(function() { |
| let element = document.createElement("div"); |
| document.body.appendChild(element); |
| if (typeof(t["toggle-root"]) == "string") |
| element.style["toggle-root"] = t["toggle-root"]; |
| if (typeof(t["toggle-trigger"]) == "string") |
| element.style["toggle-trigger"] = t["toggle-trigger"]; |
| assert_equals(element.style.toggle, t["expected"]); |
| element.remove(); |
| }, `Serialization of toggle shorthand with${t["toggle-root"] ? (" toggle-root: " + t["toggle-root"] + ";") : ""}${t["toggle-trigger"] ? (" toggle-trigger: " + t["toggle-trigger"] + ";") : ""}`); |
| } |
| |
| </script> |
