placeholder-shown-style-update.html

<!doctype html>
<script src="../../resources/js-test.js"></script>
<style>
input, textarea {
    background-color: white;
}
:placeholder-shown {
    background-color: rgb(1, 2, 3);
}
</style>
<div>
    <input id="input-with-renderer">
    <textarea id="textarea-with-renderer"></textarea>
</div>
<div style="display:none;">
    <input id="input-without-renderer">
    <textarea id="textarea-without-renderer"></textarea>
</div>
<script>
description('Test style update of the :placeholder-shown pseudo class.');
var inputCaseWithRenderer = document.getElementById("input-with-renderer");
var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer");
var inputCaseWithoutRenderer = document.getElementById("input-without-renderer");
var textareaCaseWithoutRenderer = document.getElementById("textarea-without-renderer");
function testBackgroundColor(expectMatch) {
    shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
}
function setAttribute(attribute, value) {
    inputCaseWithRenderer.setAttribute(attribute, value);
    textareaCaseWithRenderer.setAttribute(attribute, value);
    inputCaseWithoutRenderer.setAttribute(attribute, value);
    textareaCaseWithoutRenderer.setAttribute(attribute, value);
}
debug("Initial state is without placehoder.");
testBackgroundColor(false);
debug("Adding a placeholder matches.");
setAttribute("placeholder", "WebKit!");
testBackgroundColor(true);
debug("Adding a placehoder and an empty value. An empty value does not prevent matching.");
setAttribute("placeholder", "WebKit!");
inputCaseWithRenderer.value = "";
textareaCaseWithRenderer.appendChild(document.createTextNode(""));
inputCaseWithoutRenderer.value = "";
textareaCaseWithoutRenderer.appendChild(document.createTextNode(""));
testBackgroundColor(true);
debug("Changing the type of the input to something that does not support placeholder. The input element should not match.");
inputCaseWithRenderer.type = "button";
inputCaseWithoutRenderer.type = "button";
shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-renderer")).backgroundColor', 'rgb(1, 2, 3)');
shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-renderer")).backgroundColor', 'rgb(1, 2, 3)');
debug("Changing the type of the input to text should add the style back.");
inputCaseWithRenderer.type = "text";
inputCaseWithoutRenderer.type = "text";
testBackgroundColor(true);
debug("Adding a non empty value should remove the style.");
inputCaseWithRenderer.value = "Foobar";
textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar"));
inputCaseWithoutRenderer.value = "Foobar";
textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar"));
testBackgroundColor(false);
debug("Removing the placeholder, we should not match.");
document.querySelectorAll('input, textarea').forEach(element => element.removeAttribute('placeholder'));
testBackgroundColor(false);
debug("Removing the value. We should still not match since the placeholder attribute was removed.");
inputCaseWithRenderer.value = "";
textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild);
inputCaseWithoutRenderer.value = "";
textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild);
testBackgroundColor(false);
debug("Putting back a value, no reason to match.");
inputCaseWithRenderer.value = "Foobar";
textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar"));
inputCaseWithoutRenderer.value = "Foobar";
textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar"));
testBackgroundColor(false);
debug("Adding back the placeholder, the value is still there so we cannot match yet.");
setAttribute("placeholder", "WebKit!");
testBackgroundColor(false);
debug("Removing the value. A placeholder was added while the value was up, we should get the style now.");
inputCaseWithRenderer.value = "";
textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild);
inputCaseWithoutRenderer.value = "";
textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild);
testBackgroundColor(true);
</script>
chromium/third_party/blink/web_tests/fast/selectors/placeholder-shown-style-update.html
