Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/selectors/placeholder-shown-style-update.html

Issue 1280423002: CSS4: Implement :placeholder-shown pseudo class (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Updated testcase Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« LayoutTests/fast/selectors/placeholder-shown-sibling-style-update.html ('K') | « LayoutTests/fast/selectors/placeholder-shown-sibling-style-update-expected.txt ('k') | LayoutTests/fast/selectors/placeholder-shown-style-update-expected.txt » ('j') | LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/selectors/placeholder-shown-style-update.html
diff --git a/LayoutTests/fast/selectors/placeholder-shown-style-update.html b/LayoutTests/fast/selectors/placeholder-shown-style-update.html
new file mode 100644
index 0000000000000000000000000000000000000000..051e266e1ddb7c7ccf5f669f01320e8cb857435d
--- /dev/null
+++ b/LayoutTests/fast/selectors/placeholder-shown-style-update.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head>
esprehn 2015/08/21 10:18:10 ditto
ramya.v 2015/08/25 10:24:45 Done.
+<script src="../../resources/js-test.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 placeholder matches.");
+setAttribute("placeholder", "WebKit!");
+testBackgroundColor(true);
+debug("Adding 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);
alancutter (OOO until 2018) 2015/08/20 23:36:45 Can't say I'm a fan of giant walls of procedural i
ramya.v 2015/08/25 10:24:45 For now using js-test.js since it was mentioned as
+</script>
+</html>
« LayoutTests/fast/selectors/placeholder-shown-sibling-style-update.html ('K') | « LayoutTests/fast/selectors/placeholder-shown-sibling-style-update-expected.txt ('k') | LayoutTests/fast/selectors/placeholder-shown-style-update-expected.txt » ('j') | LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698