| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <script src="../../resources/js-test.js"></script> |
| 3 <style> |
| 4 input, textarea { |
| 5 background-color: white; |
| 6 } |
| 7 :placeholder-shown { |
| 8 background-color: rgb(1, 2, 3); |
| 9 } |
| 10 </style> |
| 11 <div> |
| 12 <input id="input-with-renderer"> |
| 13 <textarea id="textarea-with-renderer"></textarea> |
| 14 </div> |
| 15 <div style="display:none;"> |
| 16 <input id="input-without-renderer"> |
| 17 <textarea id="textarea-without-renderer"></textarea> |
| 18 </div> |
| 19 <script> |
| 20 description('Test style update of the :placeholder-shown pseudo class.'); |
| 21 var inputCaseWithRenderer = document.getElementById("input-with-renderer"); |
| 22 var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer")
; |
| 23 var inputCaseWithoutRenderer = document.getElementById("input-without-renderer")
; |
| 24 var textareaCaseWithoutRenderer = document.getElementById("textarea-without-rend
erer"); |
| 25 function testBackgroundColor(expectMatch) { |
| 26 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-
renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)
'); |
| 27 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi
th-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2
55)'); |
| 28 shouldBeEqualToString('getComputedStyle(document.getElementById("input-witho
ut-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2
55)'); |
| 29 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi
thout-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255
, 255)'); |
| 30 } |
| 31 function setAttribute(attribute, value) { |
| 32 inputCaseWithRenderer.setAttribute(attribute, value); |
| 33 textareaCaseWithRenderer.setAttribute(attribute, value); |
| 34 inputCaseWithoutRenderer.setAttribute(attribute, value); |
| 35 textareaCaseWithoutRenderer.setAttribute(attribute, value); |
| 36 } |
| 37 debug("Initial state is without placehoder."); |
| 38 testBackgroundColor(false); |
| 39 debug("Adding a placeholder matches."); |
| 40 setAttribute("placeholder", "WebKit!"); |
| 41 testBackgroundColor(true); |
| 42 debug("Adding a placehoder and an empty value. An empty value does not prevent m
atching."); |
| 43 setAttribute("placeholder", "WebKit!"); |
| 44 inputCaseWithRenderer.value = ""; |
| 45 textareaCaseWithRenderer.appendChild(document.createTextNode("")); |
| 46 inputCaseWithoutRenderer.value = ""; |
| 47 textareaCaseWithoutRenderer.appendChild(document.createTextNode("")); |
| 48 testBackgroundColor(true); |
| 49 debug("Changing the type of the input to something that does not support placeho
lder. The input element should not match."); |
| 50 inputCaseWithRenderer.type = "button"; |
| 51 inputCaseWithoutRenderer.type = "button"; |
| 52 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-rend
erer")).backgroundColor', 'rgb(255, 255, 255)'); |
| 53 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-r
enderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| 54 shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-r
enderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| 55 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-withou
t-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| 56 debug("Changing the type of the input to text should add the style back."); |
| 57 inputCaseWithRenderer.type = "text"; |
| 58 inputCaseWithoutRenderer.type = "text"; |
| 59 testBackgroundColor(true); |
| 60 debug("Adding a non empty value should remove the style."); |
| 61 inputCaseWithRenderer.value = "Foobar"; |
| 62 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); |
| 63 inputCaseWithoutRenderer.value = "Foobar"; |
| 64 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); |
| 65 testBackgroundColor(false); |
| 66 debug("Removing the placeholder, we should not match."); |
| 67 setAttribute("placeholder", ""); |
| 68 testBackgroundColor(false); |
| 69 debug("Removing the value. We should still not match since the placeholder attri
bute was removed."); |
| 70 inputCaseWithRenderer.value = ""; |
| 71 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); |
| 72 inputCaseWithoutRenderer.value = ""; |
| 73 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); |
| 74 testBackgroundColor(false); |
| 75 debug("Putting back a value, no reason to match."); |
| 76 inputCaseWithRenderer.value = "Foobar"; |
| 77 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); |
| 78 inputCaseWithoutRenderer.value = "Foobar"; |
| 79 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); |
| 80 testBackgroundColor(false); |
| 81 debug("Adding back the placeholder, the value is still there so we cannot match
yet."); |
| 82 setAttribute("placeholder", "WebKit!"); |
| 83 testBackgroundColor(false); |
| 84 debug("Removing the value. A placeholder was added while the value was up, we sh
ould get the style now."); |
| 85 inputCaseWithRenderer.value = ""; |
| 86 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); |
| 87 inputCaseWithoutRenderer.value = ""; |
| 88 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); |
| 89 testBackgroundColor(true); |
| 90 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1280423002:
CSS4: Implement :placeholder-shown pseudo class (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master