blob: 8a26efc8217e2ce99c5e9678cf5417ca0e509695 [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
target {
background-color: white;
}
:placeholder-shown + target {
background-color: rgb(1, 2, 3);
}
</style>
</head>
<body>
<div>
<input id="input-with-renderer">
<target id="target1"></target>
<textarea id="textarea-with-renderer"></textarea>
<target id="target2"></target>
</div>
<div style="display:none;">
<input id="input-without-renderer">
<target id="target3"></target>
<textarea id="textarea-without-renderer"></textarea>
<target id="target4"></target>
</div>
</body>
<script>
description('Test style update of the :placeholder-shown pseudo class.');
function testBackgroundColor(expectMatch) {
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
}
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 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, the targets should match the style.");
setAttribute("placeholder", "WebKit")
testBackgroundColor(true);
</script>
<script src="../../resources/js-test-post.js"></script>
</html>