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

   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-renderer");
  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-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  28     shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
  29     shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-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 matching.");
  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 placeholder. The input element should not match.");
  50 inputCaseWithRenderer.type = "button";
  51 inputCaseWithoutRenderer.type = "button";
  52 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
  53 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-renderer")).backgroundColor', 'rgb(1, 2, 3)');
  54 shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');
  55 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-without-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 attribute 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 should 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>