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 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-with-input-basics.html ('K') | « LayoutTests/fast/selectors/placeholder-shown-with-input-basics-expected.txt ('k') | LayoutTests/fast/selectors/placeholder-shown-with-textarea-basics-expected.txt » ('j') | Source/core/css/SelectorChecker.cpp » ('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>

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

	5 <style>

	6 textarea {

	7 background-color: white;

	8 color: black;

	9 }

	10 textarea:placeholder-shown {

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

	12 }

	13 textarea:not(:placeholder-shown) {

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

	15 }

	16 </style>

	17 </head>

	18 <body>

	19 <div style="display:none">

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

	21 <textarea id="no-placeholder"></textarea>

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

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

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

	25 <!-- Does not match: placeholder contains only newline or carriage retur n characters. -->

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

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

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

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

	30 <!-- Valid cases -->

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

	32 <!-- Value does not do anything on <textarea>, the content is the innerT ext -->

	33 <textarea id="valid-placeholder-with-value-attribute" placeholder="WebKi t" value></textarea>

	34 <textarea id="valid-placeholder-with-value-attribute2" placeholder="WebK it" value=""></textarea>

	35 <textarea id="valid-placeholder-with-value-attribute3" placeholder="WebK it" value="Rocks!"></textarea>

	36 </div>

	37 </body>

	38 <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	57 debug("");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	75 </script>

	76 </html>

OLD	NEW