<!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>
Codebase Browser
chromium