116 lines
5.1 KiB
HTML
116 lines
5.1 KiB
HTML
<!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>
|