| <!DOCTYPE html> |
| <title>CSS Selectors Test: :placeholder-shown matching</title> |
| <link rel="help" href="https://drafts.csswg.org/selectors/#placeholder"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| :not(:placeholder-shown) + #t1, |
| :placeholder-shown + #t2, |
| :placeholder-shown + #t3, |
| :placeholder-shown + #t4, |
| :not(:placeholder-shown) + #t5, |
| :not(:placeholder-shown) + #t6, |
| :not(:placeholder-shown) + #t7 { |
| color: green; |
| } |
| </style> |
| <input type="text"><span id="t1">Should be green</span> |
| <input type="text" placeholder><span id="t2">Should be green</span> |
| <input type="text" placeholder=""><span id="t3">Should be green</span> |
| <input type="text" placeholder="placeholder"><span id="t4">Should be green</span> |
| <input type="text" placeholder value="value"><span id="t5">Should be green</span> |
| <input type="text" placeholder="" value="value"><span id="t6">Should be green</span> |
| <input type="text" placeholder="placeholder" value="value"><span id="t7">Should be green</span> |
| <script> |
| const green = "rgb(0, 128, 0)"; |
| |
| test(() => assert_equals(getComputedStyle(t1).color, green, |
| "No placeholder attribute")); |
| test(() => assert_equals(getComputedStyle(t2).color, green, |
| "Placeholder attribute without value")); |
| test(() => assert_equals(getComputedStyle(t3).color, green, |
| "Placeholder attribute - empty string")); |
| test(() => assert_equals(getComputedStyle(t4).color, green, |
| "Placeholder attribute - non-empty string")); |
| test(() => assert_equals(getComputedStyle(t5).color, green, |
| "Placeholder attribute without value - input text")); |
| test(() => assert_equals(getComputedStyle(t6).color, green, |
| "Placeholder attribute - empty string - input text")); |
| test(() => assert_equals(getComputedStyle(t7).color, green, |
| "Placeholder attribute - non-empty string - input text")); |
| </script> |
