third_party/WebKit/LayoutTests/fast/selectors/placeholder-shown-sibling-style-update.html

   1 <!doctype html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 target {
   5     background-color: white;
   6 }
   7 :placeholder-shown + target {
   8     background-color: rgb(1, 2, 3);
   9 }
  10 </style>
  11 <div>
  12     <input id="input-with-renderer">
  13     <target id="target1"></target>
  14     <textarea id="textarea-with-renderer"></textarea>
  15     <target id="target2"></target>
  16 </div>
  17 <div style="display:none;">
  18     <input id="input-without-renderer">
  19     <target id="target3"></target>
  20     <textarea id="textarea-without-renderer"></textarea>
  21     <target id="target4"></target>
  22 </div>
  23 <script>
  24 description('Test style update of the :placeholder-shown pseudo class.');
  25 function testBackgroundColor(expectMatch) {
  26     shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  27     shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  28     shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  29     shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  30 }
  31 var inputCaseWithRenderer = document.getElementById("input-with-renderer");
  32 var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer");
  33 var inputCaseWithoutRenderer = document.getElementById("input-without-renderer");
  34 var textareaCaseWithoutRenderer = document.getElementById("textarea-without-renderer");
  35 function setAttribute(attribute, value) {
  36     inputCaseWithRenderer.setAttribute(attribute, value);
  37     textareaCaseWithRenderer.setAttribute(attribute, value);
  38     inputCaseWithoutRenderer.setAttribute(attribute, value);
  39     textareaCaseWithoutRenderer.setAttribute(attribute, value);
  40 }
  41 debug("Initial state is without placehoder.");
  42 testBackgroundColor(false);
  43 debug("Adding a placeholder, the targets should match the style.");
  44 setAttribute("placeholder", "WebKit")
  45 testBackgroundColor(true);
  46 </script>