registered-property-change-style-002.html (1469B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Invalidation after CSS.registerProperty</title> 6 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#registered-custom-property"> 7 <link rel="match" href="registered-property-change-style-002-ref.html"> 8 <meta name="assert" content="Rendering should properly be updated after call to CSS.registerProperty."> 9 <style> 10 .failure { 11 background: pink; 12 } 13 #visibility { 14 visibility: var(--my-visibility, visible); 15 } 16 #display { 17 display: var(--my-display, inline-block); 18 } 19 </style> 20 </head> 21 <body> 22 <p>This test PASS if you see no red in the list below.</p> 23 <ul> 24 <li>visibility <span id="visibility" class="failure">FAIL</span></li> 25 <li>display <span id="display" class="failure">FAIL</span></li> 26 </ul> 27 <script> 28 document.documentElement.addEventListener("TestRendered", () => { 29 CSS.registerProperty({ 30 name: "--my-visibility", 31 syntax: "*", 32 initialValue: "hidden", 33 inherits: false, 34 }); 35 CSS.registerProperty({ 36 name: "--my-display", 37 syntax: "*", 38 initialValue: "none", 39 inherits: false, 40 }); 41 document.documentElement.removeAttribute("class"); 42 }); 43 </script> 44 </body> 45 </html>