| <!doctype html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| target { |
| background-color: white; |
| } |
| :placeholder-shown + target { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| <div> |
| <input id="input-with-renderer"> |
| <target id="target1"></target> |
| <textarea id="textarea-with-renderer"></textarea> |
| <target id="target2"></target> |
| </div> |
| <div style="display:none;"> |
| <input id="input-without-renderer"> |
| <target id="target3"></target> |
| <textarea id="textarea-without-renderer"></textarea> |
| <target id="target4"></target> |
| </div> |
| <script> |
| description('Test style update of the :placeholder-shown pseudo class.'); |
| function testBackgroundColor(expectMatch) { |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| } |
| 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 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, the targets should match the style."); |
| setAttribute("placeholder", "WebKit") |
| testBackgroundColor(true); |
| </script> |
