placeholder-shown.html (2062B)
1 <!DOCTYPE html> 2 <title>CSS Selectors Test: :placeholder-shown matching</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 :not(:placeholder-shown) + #t1, 8 :placeholder-shown + #t2, 9 :placeholder-shown + #t3, 10 :placeholder-shown + #t4, 11 :not(:placeholder-shown) + #t5, 12 :not(:placeholder-shown) + #t6, 13 :not(:placeholder-shown) + #t7 { 14 color: green; 15 } 16 </style> 17 <input type="text"><span id="t1">Should be green</span> 18 <input type="text" placeholder><span id="t2">Should be green</span> 19 <input type="text" placeholder=""><span id="t3">Should be green</span> 20 <input type="text" placeholder="placeholder"><span id="t4">Should be green</span> 21 <input type="text" placeholder value="value"><span id="t5">Should be green</span> 22 <input type="text" placeholder="" value="value"><span id="t6">Should be green</span> 23 <input type="text" placeholder="placeholder" value="value"><span id="t7">Should be green</span> 24 <script> 25 const green = "rgb(0, 128, 0)"; 26 27 test(() => assert_equals(getComputedStyle(t1).color, green, 28 "No placeholder attribute")); 29 test(() => assert_equals(getComputedStyle(t2).color, green, 30 "Placeholder attribute without value")); 31 test(() => assert_equals(getComputedStyle(t3).color, green, 32 "Placeholder attribute - empty string")); 33 test(() => assert_equals(getComputedStyle(t4).color, green, 34 "Placeholder attribute - non-empty string")); 35 test(() => assert_equals(getComputedStyle(t5).color, green, 36 "Placeholder attribute without value - input text")); 37 test(() => assert_equals(getComputedStyle(t6).color, green, 38 "Placeholder attribute - empty string - input text")); 39 test(() => assert_equals(getComputedStyle(t7).color, green, 40 "Placeholder attribute - non-empty string - input text")); 41 </script>