Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/selectors/placeholder-shown.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Selectors Test: :placeholder-shown matching</title>
<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>