webkit-pseudo-element.html (1856B)
1 <!DOCTYPE html> 2 <title>WebKit-prefixed pseudo-elements</title> 3 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#compat"> 6 <meta name="assert" content="WebKit-prefixed pseudo-elements should always be valid"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style id="style"> 10 #test { 11 color: rgb(255, 0, 0); 12 } 13 span::-webkit-something-invalid, #test, ::-WeBkIt-sOmEtHiNg-NoNeXiSt123, ::-webkit-\ escaped { 14 color: rgb(0, 255, 0); 15 } 16 ::-webkitfoo, #test { 17 color: rgb(255, 0, 0); 18 } 19 </style> 20 <body> 21 <div id="test"></div> 22 <script> 23 test(() => { 24 let elem = document.getElementById("test"); 25 assert_equals(getComputedStyle(elem).color, "rgb(0, 255, 0)"); 26 }, "rules include webkit-prefixed pseudo-element should be cascaded"); 27 28 test(() => { 29 let sheet = document.getElementById("style").sheet; 30 assert_equals(sheet.cssRules[1].selectorText, 31 "span::-webkit-something-invalid, " + 32 "#test, ::-webkit-something-nonexist123, " + 33 "::-webkit-\\ escaped"); 34 }, "webkit-prefixed pseudo-element selectors should be accessible from CSSOM"); 35 36 test(() => { 37 document.querySelector("span::-webkit-something-invalid"); 38 document.querySelectorAll("span::-webkit-something-invalid"); 39 }, "qS and qSA shouldn't throw exception"); 40 41 test(() => { 42 let sheet = document.getElementById("style").sheet; 43 assert_equals(sheet.cssRules.length, 2); 44 assert_throws_dom("SyntaxError", () => document.querySelector("span::-webkitfoo")); 45 assert_throws_dom("SyntaxError", () => document.querySelectorAll("span::-webkitfoo")); 46 }, "webkit-prefix without dash is invalid"); 47 </script> 48 </body>