LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html - Issue 1280423002: CSS4: Implement :placeholder-shown pseudo class

Side by Side Diff: LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html

Issue 1280423002: CSS4: Implement :placeholder-shown pseudo class (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Updated as per review comments 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/css/placeholder-shown-basics-expected.html ('K') | « LayoutTests/fast/selectors/placeholder-shown-style-update-expected.txt ('k') | LayoutTests/fast/selectors/placeholder-shown-with-input-basics-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!doctype html>

	2 <script src="../../resources/js-test.js"></script>

	3 <style>

	4 input {

	5 background-color: white;

	6 color: black;

	7 }

	8 input:placeholder-shown {

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

	10 }

	11 input:not(:placeholder-shown) {

	12 color: rgb(4, 5, 6);

	13 }

	14 </style>

	15 <div style="display:none">

	16 <!-- Does not match: no placeholder defined. -->

	17 <input type="text" id="no-placeholder">

	18 <!-- Does not match: empty placeholder. -->

	19 <input type="text" id="empty-placeholder" placeholder>

	20 <input type="text" id="empty-placeholder2" placeholder="">

	21 <!-- Does not match: placeholder contains only newline or carriage return ch aracters. -->

	22 <input type="text" id="placeholder-contains-only-newline">

	23 <input type="text" id="placeholder-contains-only-carriageReturn">

	24 <!-- Does not match: the placeholder is not shown when a value is set -->

	25 <input type="text" id="with-value" placeholder="WebKit" value="FooBar">

	26 <!-- Valid cases -->

	27 <input type="text" id="valid-placeholder" placeholder="WebKit">

	28 <input type="text" id="valid-placeholder-with-empty-value" placeholder="WebK it" value>

	29 <input type="text" id="valid-placeholder-with-empty-value2" placeholder="Web Kit" value="">

	30 </div>

	31 <script>

	32 description('Check the basic features of the ":placeholder-shown" pseudo class w ith the <input> element.');

	33 document.getElementById('placeholder-contains-only-newline').setAttribute('place holder', '\n');

	34 document.getElementById('placeholder-contains-only-carriageReturn').setAttribute ('placeholder', '\r');

	35 shouldBe('document.querySelectorAll(":placeholder-shown").length', '3');

	36 shouldBe('document.querySelectorAll(":placeholder-shown")[0]', 'document.getElem entById("valid-placeholder")');

	37 shouldBe('document.querySelectorAll(":placeholder-shown")[1]', 'document.getElem entById("valid-placeholder-with-empty-value")');

	38 shouldBe('document.querySelectorAll(":placeholder-shown")[2]', 'document.getElem entById("valid-placeholder-with-empty-value2")');

	39 shouldBeEqualToString('getComputedStyle(document.getElementById("no-placeholder" )).backgroundColor', 'rgb(255, 255, 255)');

	40 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er")).backgroundColor', 'rgb(255, 255, 255)');

	41 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er2")).backgroundColor', 'rgb(255, 255, 255)');

	42 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-newline")).backgroundColor', 'rgb(255, 255, 255)');

	43 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-carriageReturn")).backgroundColor', 'rgb(255, 255, 255)');

	44 shouldBeEqualToString('getComputedStyle(document.getElementById("with-value")).b ackgroundColor', 'rgb(255, 255, 255)');

	45 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er")).backgroundColor', 'rgb(1, 2, 3)');

	46 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value")).backgroundColor', 'rgb(1, 2, 3)');

	47 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value2")).backgroundColor', 'rgb(1, 2, 3)');

	48 debug("");

	49 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)").length', '6 ');

	50 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[0]', 'docum ent.getElementById("no-placeholder")');

	51 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[1]', 'docum ent.getElementById("empty-placeholder")');

	52 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[2]', 'docum ent.getElementById("empty-placeholder2")');

	53 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[3]', 'docum ent.getElementById("placeholder-contains-only-newline")');

	54 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[4]', 'docum ent.getElementById("placeholder-contains-only-carriageReturn")');

	55 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[5]', 'docum ent.getElementById("with-value")');

	56 shouldBeEqualToString('getComputedStyle(document.getElementById("no-placeholder" )).color', 'rgb(4, 5, 6)');

	57 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er")).color', 'rgb(4, 5, 6)');

	58 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er2")).color', 'rgb(4, 5, 6)');

	59 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-newline")).color', 'rgb(4, 5, 6)');

	60 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-carriageReturn")).color', 'rgb(4, 5, 6)');

	61 shouldBeEqualToString('getComputedStyle(document.getElementById("with-value")).c olor', 'rgb(4, 5, 6)');

	62 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er")).color', 'rgb(0, 0, 0)');

	63 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value")).color', 'rgb(0, 0, 0)');

	64 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value2")).color', 'rgb(0, 0, 0)');

	65 </script>

OLD	NEW