Check the basic features of the ":placeholder-shown" pseudo class with the <input> element.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS document.querySelectorAll(":placeholder-shown").length is 3
PASS document.querySelectorAll(":placeholder-shown")[0] is document.getElementById("valid-placeholder")
PASS document.querySelectorAll(":placeholder-shown")[1] is document.getElementById("valid-placeholder-with-empty-value")
PASS document.querySelectorAll(":placeholder-shown")[2] is document.getElementById("valid-placeholder-with-empty-value2")
PASS getComputedStyle(document.getElementById("no-placeholder")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("empty-placeholder")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("empty-placeholder2")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("placeholder-contains-only-newline")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("placeholder-contains-only-carriageReturn")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("with-value")).backgroundColor is "rgb(255, 255, 255)"
PASS getComputedStyle(document.getElementById("valid-placeholder")).backgroundColor is "rgb(1, 2, 3)"
PASS getComputedStyle(document.getElementById("valid-placeholder-with-empty-value")).backgroundColor is "rgb(1, 2, 3)"
PASS getComputedStyle(document.getElementById("valid-placeholder-with-empty-value2")).backgroundColor is "rgb(1, 2, 3)"

PASS document.querySelectorAll("input:not(:placeholder-shown)").length is 6
PASS document.querySelectorAll("input:not(:placeholder-shown)")[0] is document.getElementById("no-placeholder")
PASS document.querySelectorAll("input:not(:placeholder-shown)")[1] is document.getElementById("empty-placeholder")
PASS document.querySelectorAll("input:not(:placeholder-shown)")[2] is document.getElementById("empty-placeholder2")
PASS document.querySelectorAll("input:not(:placeholder-shown)")[3] is document.getElementById("placeholder-contains-only-newline")
PASS document.querySelectorAll("input:not(:placeholder-shown)")[4] is document.getElementById("placeholder-contains-only-carriageReturn")
PASS document.querySelectorAll("input:not(:placeholder-shown)")[5] is document.getElementById("with-value")
PASS getComputedStyle(document.getElementById("no-placeholder")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("empty-placeholder")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("empty-placeholder2")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("placeholder-contains-only-newline")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("placeholder-contains-only-carriageReturn")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("with-value")).color is "rgb(4, 5, 6)"
PASS getComputedStyle(document.getElementById("valid-placeholder")).color is "rgb(0, 0, 0)"
PASS getComputedStyle(document.getElementById("valid-placeholder-with-empty-value")).color is "rgb(0, 0, 0)"
PASS getComputedStyle(document.getElementById("valid-placeholder-with-empty-value2")).color is "rgb(0, 0, 0)"
PASS successfullyParsed is true

TEST COMPLETE