<!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>