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