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

Side by Side Diff: LayoutTests/fast/selectors/placeholder-shown-with-textarea-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-with-input-basics-expected.txt ('k') | LayoutTests/fast/selectors/placeholder-shown-with-textarea-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 textarea {

	5 background-color: white;

	6 color: black;

	7 }

	8 textarea:placeholder-shown {

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

	10 }

	11 textarea: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 <textarea id="no-placeholder"></textarea>

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

	19 <textarea id="empty-placeholder" placeholder></textarea>

	20 <textarea id="empty-placeholder2" placeholder=""></textarea>

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

	22 <textarea id="placeholder-contains-only-newline"></textarea>

	23 <textarea id="placeholder-contains-only-carriageReturn"></textarea>

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

	25 <textarea id="with-value" placeholder="WebKit">FooBar</textarea>

	26 <!-- Valid cases -->

	27 <textarea id="valid-placeholder" placeholder="WebKit"></textarea>

	28 <!-- Value does not do anything on <textarea>, the content is the innerText -->

	29 <textarea id="valid-placeholder-with-value-attribute" placeholder="WebKit" v alue></textarea>

	30 <textarea id="valid-placeholder-with-value-attribute2" placeholder="WebKit" value=""></textarea>

	31 <textarea id="valid-placeholder-with-value-attribute3" placeholder="WebKit" value="Rocks!"></textarea>

	32 </div>

	33 <script>

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

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

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

	37 shouldBe('document.querySelectorAll(":placeholder-shown").length', '4');

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

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

	40 shouldBe('document.querySelectorAll(":placeholder-shown")[2]', 'document.getElem entById("valid-placeholder-with-value-attribute2")');

	41 shouldBe('document.querySelectorAll(":placeholder-shown")[3]', 'document.getElem entById("valid-placeholder-with-value-attribute3")');

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

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

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

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

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

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

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

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

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

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

	52 debug("");

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

	54 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[0]', 'do cument.getElementById("no-placeholder")');

	55 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[1]', 'do cument.getElementById("empty-placeholder")');

	56 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[2]', 'do cument.getElementById("empty-placeholder2")');

	57 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[3]', 'do cument.getElementById("placeholder-contains-only-newline")');

	58 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[4]', 'do cument.getElementById("placeholder-contains-only-carriageReturn")');

	59 shouldBe('document.querySelectorAll("textarea:not(:placeholder-shown)")[5]', 'do cument.getElementById("with-value")');

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

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

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

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

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

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

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

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

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

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

	70 </script>

OLD	NEW