LayoutTests/fast/selectors/placeholder-shown-style-update.html - Issue 1280423002: CSS4: Implement :placeholder-shown pseudo class

Side by Side 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 unified diff | 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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!doctype html>

	2 <html>

	3 <head>
	esprehn 2015/08/21 10:18:10 ditto ditto ramya.v 2015/08/25 10:24:45 Done. Show quoted text On 2015/08/21 10:18:10, esprehn wrote: > ditto Done.
	4 <script src="../../resources/js-test.js"></script>

	5 <style>

	6 input, textarea {

	7 background-color: white;

	8 }

	9 :placeholder-shown {

	10 background-color: rgb(1, 2, 3);

	11 }

	12 </style>

	13 </head>

	14 <body>

	15 <div>

	16 <input id="input-with-renderer">

	17 <textarea id="textarea-with-renderer"></textarea>

	18 </div>

	19 <div style="display:none;">

	20 <input id="input-without-renderer">

	21 <textarea id="textarea-without-renderer"></textarea>

	22 </div>

	23 </body>

	24 <script>

	25 description('Test style update of the :placeholder-shown pseudo class.');

	26 var inputCaseWithRenderer = document.getElementById("input-with-renderer");

	27 var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer") ;

	28 var inputCaseWithoutRenderer = document.getElementById("input-without-renderer") ;

	29 var textareaCaseWithoutRenderer = document.getElementById("textarea-without-rend erer");

	30 function testBackgroundColor(expectMatch) {

	31 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with- renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255) ');

	32 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi th-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2 55)');

	33 shouldBeEqualToString('getComputedStyle(document.getElementById("input-witho ut-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2 55)');

	34 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi thout-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255 , 255)');

	35 }

	36 function setAttribute(attribute, value) {

	37 inputCaseWithRenderer.setAttribute(attribute, value);

	38 textareaCaseWithRenderer.setAttribute(attribute, value);

	39 inputCaseWithoutRenderer.setAttribute(attribute, value);

	40 textareaCaseWithoutRenderer.setAttribute(attribute, value);

	41 }

	42 debug("Initial state is without placehoder.");

	43 testBackgroundColor(false);

	44 debug("Adding a placeholder matches.");

	45 setAttribute("placeholder", "WebKit!");

	46 testBackgroundColor(true);

	47 debug("Adding a placehoder and an empty value. An empty value does not prevent m atching.");

	48 setAttribute("placeholder", "WebKit!");

	49 inputCaseWithRenderer.value = "";

	50 textareaCaseWithRenderer.appendChild(document.createTextNode(""));

	51 inputCaseWithoutRenderer.value = "";

	52 textareaCaseWithoutRenderer.appendChild(document.createTextNode(""));

	53 testBackgroundColor(true);

	54 debug("Changing the type of the input to something that does not support placeho lder. The input element should not match.");

	55 inputCaseWithRenderer.type = "button";

	56 inputCaseWithoutRenderer.type = "button";

	57 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-rend erer")).backgroundColor', 'rgb(255, 255, 255)');

	58 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-r enderer")).backgroundColor', 'rgb(1, 2, 3)');

	59 shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-r enderer")).backgroundColor', 'rgb(255, 255, 255)');

	60 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-withou t-renderer")).backgroundColor', 'rgb(1, 2, 3)');

	61 debug("Changing the type of the input to text should add the style back.");

	62 inputCaseWithRenderer.type = "text";

	63 inputCaseWithoutRenderer.type = "text";

	64 testBackgroundColor(true);

	65 debug("Adding a non empty value should remove the style.");

	66 inputCaseWithRenderer.value = "Foobar";

	67 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar"));

	68 inputCaseWithoutRenderer.value = "Foobar";

	69 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar"));

	70 testBackgroundColor(false);

	71 debug("Removing the placeholder, we should not match.");

	72 setAttribute("placeholder", "");

	73 testBackgroundColor(false);

	74 debug("Removing the value. We should still not match since the placeholder attri bute was removed.");

	75 inputCaseWithRenderer.value = "";

	76 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild);

	77 inputCaseWithoutRenderer.value = "";

	78 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild);

	79 testBackgroundColor(false);

	80 debug("Putting back a value, no reason to match.");

	81 inputCaseWithRenderer.value = "Foobar";

	82 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar"));

	83 inputCaseWithoutRenderer.value = "Foobar";

	84 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar"));

	85 testBackgroundColor(false);

	86 debug("Adding back the placeholder, the value is still there so we cannot match yet.");

	87 setAttribute("placeholder", "WebKit!");

	88 testBackgroundColor(false);

	89 debug("Removing the value. A placeholder was added while the value was up, we sh ould get the style now.");

	90 inputCaseWithRenderer.value = "";

	91 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild);

	92 inputCaseWithoutRenderer.value = "";

	93 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild);

	94 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 Can't say I'm a fan of giant walls of procedural instructions. This would be better as a testharness.js test where each debug() print is a test() call to make the logical grouping of instructions more clear. Also the tests should be written such that order of execution does not matter so we don't have to worry about changing global state. Ditto for LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html and LayoutTests/fast/selectors/placeholder-shown-with-textarea-basics.html. ramya.v 2015/08/25 10:24:45 For now using js-test.js since it was mentioned as Show quoted text On 2015/08/20 23:36:45, alancutter wrote: > Can't say I'm a fan of giant walls of procedural instructions. > This would be better as a testharness.js test where each debug() print is a > test() call to make the logical grouping of instructions more clear. Also the > tests should be written such that order of execution does not matter so we don't > have to worry about changing global state. > > Ditto for LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html > and LayoutTests/fast/selectors/placeholder-shown-with-textarea-basics.html. For now using js-test.js since it was mentioned as better for debugging.
	95 </script>

	96 </html>

OLD	NEW