blob: eadc423881a83aecabe68fdefc123038594085a9 [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
input, textarea {
background-color: white;
}
:placeholder-shown {
background-color: rgb(1, 2, 3);
}
</style>
</head>
<body>
<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>
</body>
<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 valid placeholder matches.");
setAttribute("placeholder", "WebKit!");
testBackgroundColor(true);
debug("Using an invalid placeholder value does not match.");
setAttribute("placeholder", "\n");
testBackgroundColor(false);
debug("Adding back 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.");
setAttribute("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>
<script src="../../resources/js-test-post.js"></script>
</html>