state-css-selector.html (5794B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" /> 8 <title>:state() css selector applies</title> 9 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 <body> 14 <custom-state id="myCE">I should be green</custom-state> 15 <p id="mySibling">I should be blue</p> 16 <p id="myHas">I should be blue</p> 17 <style> 18 custom-state { 19 color: #f00; 20 } 21 custom-state + p { 22 color: #f00; 23 } 24 custom-state:state(--green) { 25 color: #0f0; 26 } 27 custom-state:--green { 28 color: #0f0; 29 } 30 body:has(custom-state:state(--green)) p { 31 color: #0ff; 32 } 33 custom-state:state(--green) + p[id] { 34 color: #00f; 35 } 36 custom-state:--green + p { 37 color: #00f; 38 } 39 </style> 40 <script> 41 customElements.define('custom-state', class extends HTMLElement { 42 connectedCallback() { 43 this.elementInternals = this.attachInternals(); 44 } 45 }); 46 47 test(function() { 48 assert_false(myCE.elementInternals.states.has('--green')); 49 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)'); 50 }, "state selector has no influence when state is not applied"); 51 52 test(function() { 53 assert_false(myCE.elementInternals.states.has('--green')); 54 assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)'); 55 }, "state selector has no influence on sibling selectors when not applied"); 56 57 test(function(t) { 58 myCE.elementInternals.states.add('--green'); 59 t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') }); 60 assert_true(myCE.elementInternals.states.has('--green')); 61 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)'); 62 }, "state selector has influence when state is applied"); 63 64 test(function(t) { 65 myCE.elementInternals.states.add('--green'); 66 t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') }); 67 assert_true(myCE.elementInternals.states.has('--green')); 68 assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(0, 0, 255)'); 69 }, "state selector influences siblings when state is applied"); 70 71 test(function(t) { 72 myCE.elementInternals.states.add('--green'); 73 t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') }); 74 assert_true(myCE.elementInternals.states.has('--green')); 75 assert_equals(getComputedStyle(myHas).getPropertyValue('color'), 'rgb(0, 255, 255)'); 76 }, "state selector influences has() when state is applied"); 77 78 test(function(t) { 79 myCE.elementInternals.states.add('--foo'); 80 t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') }); 81 assert_false(myCE.elementInternals.states.has('--green')); 82 assert_true(myCE.elementInternals.states.has('--foo')); 83 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)'); 84 }, "state selector only applies on given ident"); 85 86 test(function(t) { 87 myCE.elementInternals.states.add('--foo'); 88 t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') }); 89 assert_false(myCE.elementInternals.states.has('--green')); 90 assert_true(myCE.elementInternals.states.has('--foo')); 91 assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)'); 92 }, "state selector only applies to siblings on given ident"); 93 94 test(function(t) { 95 myCE.elementInternals.states.add('--foo'); 96 t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') }); 97 assert_false(myCE.elementInternals.states.has('--green')); 98 assert_true(myCE.elementInternals.states.has('--foo')); 99 assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)'); 100 }, "state selector only applies to has() on given ident"); 101 102 test(function(t) { 103 myCE.elementInternals.states.add('--green'); 104 myCE.elementInternals.states.add('--green'); 105 myCE.elementInternals.states.add('--green'); 106 t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') }); 107 assert_true(myCE.elementInternals.states.has('--green')); 108 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)'); 109 assert_true(myCE.elementInternals.states.delete('--green')); 110 assert_false(myCE.elementInternals.states.has('--green')); 111 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)'); 112 assert_false(myCE.elementInternals.states.delete('--green')); 113 }, "states added multiple times counts as one"); 114 115 test(function(t) { 116 myCE.elementInternals.states.add('--green'); 117 myCE.elementInternals.states.add('--foo'); 118 t.add_cleanup(() => { myCE.elementInternals.states.clear() }); 119 assert_true(myCE.elementInternals.states.has('--green')); 120 assert_true(myCE.elementInternals.states.has('--foo')); 121 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)'); 122 myCE.elementInternals.states.clear(); 123 assert_false(myCE.elementInternals.states.has('--green')); 124 assert_false(myCE.elementInternals.states.has('--foo')); 125 assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)'); 126 }, "style is invalided on clear()"); 127 128 </script> 129 </body> 130 </html>