getComputedStyle-pseudo-with-argument.html (1906B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSOM: Handling pseudo-elements with arguments</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <link rel=help href=https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle> 7 <style> 8 #pseudo-invalid::highlight(name) { 9 color: rgb(0, 128, 0); 10 } 11 #pseudo-invalid::view-transition-image-pair(name) { 12 color: rgb(0, 128, 0); 13 } 14 #pseudo-invalid::view-transition-group(name) { 15 color: rgb(0, 128, 0); 16 } 17 #pseudo-invalid::view-transition-old(name) { 18 color: rgb(0, 128, 0); 19 } 20 #pseudo-invalid::view-transition-new(name) { 21 color: rgb(0, 128, 0); 22 } 23 </style> 24 <ul><li id="pseudo-invalid">Item</li></ul> 25 <script> 26 [ 27 "::before(test)", 28 "::highlight", 29 "::highlight(", 30 "::highlight()", 31 "::highlight(1)", 32 "::highlight($)", 33 "::highlight (name)", 34 "::highlight(name)a", 35 ":highlight(name)", 36 "::view-transition-group(*)", 37 "::view-transition-image-pair(*)", 38 "::view-transition-old(*)", 39 "::view-transition-new(*)", 40 ":view-transition-group(name)", 41 ":view-transition-image-pair(name)", 42 ":view-transition-old(name)", 43 ":view-transition-new(name)", 44 ].forEach(nonParsablePseudoIdentifier => { 45 test(() => { 46 const li = document.querySelector('li'); 47 assert_equals(getComputedStyle(li, nonParsablePseudoIdentifier).length, 0); 48 }, `This pseudo-element should not parse: ${nonParsablePseudoIdentifier}`) 49 }); 50 51 [ 52 "::highlight(name)", 53 "::highlight(\nname", 54 "::highlight(name\t", 55 "::highlight( name ", 56 "::highlight( n\\61me )" 57 ].forEach(parsablePseudoIdentifier => { 58 test(() => { 59 const li = document.querySelector('li'); 60 assert_true(getComputedStyle(li, parsablePseudoIdentifier).length != 0); 61 assert_equals(getComputedStyle(li, parsablePseudoIdentifier).color, "rgb(0, 128, 0)"); 62 }, `This pseudo-element should parse: ${parsablePseudoIdentifier}`); 63 }); 64 </script>