Chromium Code Reviews Chromium Code Reviews
Issue 1280423002:
CSS4: Implement :placeholder-shown pseudo class (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
|
esprehn
2015/08/21 10:18:10
ditto
ramya.v
2015/08/25 10:24:45
Done.
| |
| 4 <script src="../../resources/js-test.js"></script> | |
| 5 <style> | |
| 6 input { | |
| 7 background-color: white; | |
| 8 color: black; | |
| 9 } | |
| 10 input:placeholder-shown { | |
| 11 background-color: rgb(1, 2, 3); | |
| 12 } | |
| 13 input: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 <input type="text" id="no-placeholder"> | |
| 22 <!-- Does not match: empty placeholder. --> | |
| 23 <input type="text" id="empty-placeholder" placeholder> | |
| 24 <input type="text" id="empty-placeholder2" placeholder=""> | |
| 25 <!-- Does not match: placeholder contains only newline or carriage retur n characters. --> | |
| 26 <input type="text" id="placeholder-contains-only-newline"> | |
| 27 <input type="text" id="placeholder-contains-only-carriageReturn"> | |
| 28 <!-- Does not match: the placeholder is not shown when a value is set -- > | |
| 29 <input type="text" id="with-value" placeholder="WebKit" value="FooBar"> | |
| 30 <!-- Valid cases --> | |
| 31 <input type="text" id="valid-placeholder" placeholder="WebKit"> | |
| 32 <input type="text" id="valid-placeholder-with-empty-value" placeholder=" WebKit" value> | |
| 33 <input type="text" id="valid-placeholder-with-empty-value2" placeholder= "WebKit" value=""> | |
| 34 </div> | |
| 35 </body> | |
| 36 <script> | |
| 37 description('Check the basic features of the ":placeholder-shown" pseudo class w ith the <input> element.'); | |
| 38 document.getElementById('placeholder-contains-only-newline').setAttribute('place holder', '\n'); | |
| 39 document.getElementById('placeholder-contains-only-carriageReturn').setAttribute ('placeholder', '\r'); | |
| 40 shouldBe('document.querySelectorAll(":placeholder-shown").length', '3'); | |
| 41 shouldBe('document.querySelectorAll(":placeholder-shown")[0]', 'document.getElem entById("valid-placeholder")'); | |
| 42 shouldBe('document.querySelectorAll(":placeholder-shown")[1]', 'document.getElem entById("valid-placeholder-with-empty-value")'); | |
| 43 shouldBe('document.querySelectorAll(":placeholder-shown")[2]', 'document.getElem entById("valid-placeholder-with-empty-value2")'); | |
| 44 shouldBeEqualToString('getComputedStyle(document.getElementById("no-placeholder" )).backgroundColor', 'rgb(255, 255, 255)'); | |
| 45 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er")).backgroundColor', 'rgb(255, 255, 255)'); | |
| 46 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er2")).backgroundColor', 'rgb(255, 255, 255)'); | |
| 47 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-newline")).backgroundColor', 'rgb(255, 255, 255)'); | |
| 48 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-carriageReturn")).backgroundColor', 'rgb(255, 255, 255)'); | |
| 49 shouldBeEqualToString('getComputedStyle(document.getElementById("with-value")).b ackgroundColor', 'rgb(255, 255, 255)'); | |
| 50 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er")).backgroundColor', 'rgb(1, 2, 3)'); | |
| 51 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value")).backgroundColor', 'rgb(1, 2, 3)'); | |
| 52 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value2")).backgroundColor', 'rgb(1, 2, 3)'); | |
| 53 debug(""); | |
| 54 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)").length', '6 '); | |
| 55 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[0]', 'docum ent.getElementById("no-placeholder")'); | |
| 56 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[1]', 'docum ent.getElementById("empty-placeholder")'); | |
| 57 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[2]', 'docum ent.getElementById("empty-placeholder2")'); | |
| 58 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[3]', 'docum ent.getElementById("placeholder-contains-only-newline")'); | |
| 59 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[4]', 'docum ent.getElementById("placeholder-contains-only-carriageReturn")'); | |
| 60 shouldBe('document.querySelectorAll("input:not(:placeholder-shown)")[5]', 'docum ent.getElementById("with-value")'); | |
| 61 shouldBeEqualToString('getComputedStyle(document.getElementById("no-placeholder" )).color', 'rgb(4, 5, 6)'); | |
| 62 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er")).color', 'rgb(4, 5, 6)'); | |
| 63 shouldBeEqualToString('getComputedStyle(document.getElementById("empty-placehold er2")).color', 'rgb(4, 5, 6)'); | |
| 64 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-newline")).color', 'rgb(4, 5, 6)'); | |
| 65 shouldBeEqualToString('getComputedStyle(document.getElementById("placeholder-con tains-only-carriageReturn")).color', 'rgb(4, 5, 6)'); | |
| 66 shouldBeEqualToString('getComputedStyle(document.getElementById("with-value")).c olor', 'rgb(4, 5, 6)'); | |
| 67 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er")).color', 'rgb(0, 0, 0)'); | |
| 68 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value")).color', 'rgb(0, 0, 0)'); | |
| 69 shouldBeEqualToString('getComputedStyle(document.getElementById("valid-placehold er-with-empty-value2")).color', 'rgb(0, 0, 0)'); | |
| 70 </script> | |
| 71 </html> | |
| OLD | NEW |
