placeholder-shown.html (1088B)
1 <!DOCTYPE html> 2 <title>CSS Selectors Test: :placeholder-shown invalidation</title> 3 <link rel="help" href="https://drafts.csswg.org/selectors/#placeholder"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #target { color: red; } 8 input:placeholder-shown + #target { color: green; } 9 </style> 10 <input id="input" type="text"> 11 <span id="target"></span> 12 <script> 13 const red = "rgb(255, 0, 0)"; 14 const green = "rgb(0, 128, 0)"; 15 16 test(() => { 17 assert_equals(getComputedStyle(target).color, red); 18 }, "Initially no placeholder text"); 19 20 test(() => { 21 input.setAttribute("placeholder", "PLACEHOLDER"); 22 assert_equals(getComputedStyle(target).color, green); 23 }, "Added placeholder text"); 24 25 test(() => { 26 input.setAttribute("placeholder", ""); 27 assert_equals(getComputedStyle(target).color, green); 28 }, "Set placeholder text to empty string"); 29 30 test(() => { 31 input.removeAttribute("placeholder"); 32 assert_equals(getComputedStyle(target).color, red); 33 }, "Removed placeholder attribute"); 34 </script>