| <!doctype html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| input, textarea { |
| background-color: white; |
| } |
| :placeholder-shown { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| <div> |
| <input id="input-with-renderer"> |
| <textarea id="textarea-with-renderer"></textarea> |
| </div> |
| <div style="display:none;"> |
| <input id="input-without-renderer"> |
| <textarea id="textarea-without-renderer"></textarea> |
| </div> |
| <script> |
| description('Test style update of the :placeholder-shown pseudo class.'); |
| var inputCaseWithRenderer = document.getElementById("input-with-renderer"); |
| var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer"); |
| var inputCaseWithoutRenderer = document.getElementById("input-without-renderer"); |
| var textareaCaseWithoutRenderer = document.getElementById("textarea-without-renderer"); |
| function testBackgroundColor(expectMatch) { |
| shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| } |
| function setAttribute(attribute, value) { |
| inputCaseWithRenderer.setAttribute(attribute, value); |
| textareaCaseWithRenderer.setAttribute(attribute, value); |
| inputCaseWithoutRenderer.setAttribute(attribute, value); |
| textareaCaseWithoutRenderer.setAttribute(attribute, value); |
| } |
| debug("Initial state is without placehoder."); |
| testBackgroundColor(false); |
| debug("Adding a placeholder matches."); |
| setAttribute("placeholder", "WebKit!"); |
| testBackgroundColor(true); |
| debug("Adding a placehoder and an empty value. An empty value does not prevent matching."); |
| setAttribute("placeholder", "WebKit!"); |
| inputCaseWithRenderer.value = ""; |
| textareaCaseWithRenderer.appendChild(document.createTextNode("")); |
| inputCaseWithoutRenderer.value = ""; |
| textareaCaseWithoutRenderer.appendChild(document.createTextNode("")); |
| testBackgroundColor(true); |
| debug("Changing the type of the input to something that does not support placeholder. The input element should not match."); |
| inputCaseWithRenderer.type = "button"; |
| inputCaseWithoutRenderer.type = "button"; |
| shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| debug("Changing the type of the input to text should add the style back."); |
| inputCaseWithRenderer.type = "text"; |
| inputCaseWithoutRenderer.type = "text"; |
| testBackgroundColor(true); |
| debug("Adding a non empty value should remove the style."); |
| inputCaseWithRenderer.value = "Foobar"; |
| textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); |
| inputCaseWithoutRenderer.value = "Foobar"; |
| textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); |
| testBackgroundColor(false); |
| debug("Removing the placeholder, we should not match."); |
| setAttribute("placeholder", ""); |
| testBackgroundColor(false); |
| debug("Removing the value. We should still not match since the placeholder attribute was removed."); |
| inputCaseWithRenderer.value = ""; |
| textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); |
| inputCaseWithoutRenderer.value = ""; |
| textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); |
| testBackgroundColor(false); |
| debug("Putting back a value, no reason to match."); |
| inputCaseWithRenderer.value = "Foobar"; |
| textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); |
| inputCaseWithoutRenderer.value = "Foobar"; |
| textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); |
| testBackgroundColor(false); |
| debug("Adding back the placeholder, the value is still there so we cannot match yet."); |
| setAttribute("placeholder", "WebKit!"); |
| testBackgroundColor(false); |
| debug("Removing the value. A placeholder was added while the value was up, we should get the style now."); |
| inputCaseWithRenderer.value = ""; |
| textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); |
| inputCaseWithoutRenderer.value = ""; |
| textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); |
| testBackgroundColor(true); |
| </script> |
