third_party/WebKit/LayoutTests/fast/css/pseudo-empty-dynamic-empty.html

   1 <!DOCTYPE html>
   2 <style>
   3   p { background-color: red; width: 100px; height: 100px; }
   4   p:empty { display: none; }
   5 </style>
   6
   7 <body>
   8   <p id="test1"><a></a></p>
   9   <p></p>
  10   <p id="test2">&#09;</p>
  11   <p></p>
  12   <p id="test3"> </p>
  13   <pre>FAIL</pre>
  14 </body>
  15
  16 <script>
  17   if (window.testRunner)
  18       window.testRunner.dumpAsText();
  19
  20   function allElementsHaveDisplayNone(elements)
  21   {
  22       for (var styles = "", i = 0; i < elements.length; ++i)
  23           styles += getComputedStyle(elements.item(i), null).display + ",";
  24       return styles.match(/none,/g).length == elements.length;
  25   }
  26
  27   window.onload = function() {
  28       var log = function(text) { document.querySelector("pre").textContent = text };
  29
  30       var elements = document.getElementsByTagName("p");
  31       for (var i = 0; i < elements.length; ++i) {
  32           var element = elements.item(i);
  33           if (!element.id)
  34               continue;
  35           if (element.offsetWidth != 100)
  36               return log("FAIL:initial-width-" + element.offsetWidth);
  37           element.textContent = "";
  38       }
  39
  40       log(allElementsHaveDisplayNone(elements) ? "PASS" : "FAIL");
  41   };
  42 </script>