pseudo-empty-dynamic-empty.html | Explore in Territory

<!DOCTYPE html>
<style>
  p { background-color: red; width: 100px; height: 100px; }
  p:empty { display: none; }
</style>

<body>
  <p id="test1"><a></a></p>
  <p></p>
  <p id="test2">&#09;</p>
  <p></p>
  <p id="test3"> </p>
  <pre>FAIL</pre>
</body>

<script>
  if (window.testRunner)
      testRunner.dumpAsText();

  function allElementsHaveDisplayNone(elements)
  {
      for (var styles = "", i = 0; i < elements.length; ++i)
          styles += getComputedStyle(elements.item(i), null).display + ",";
      return styles.match(/none,/g).length == elements.length;
  }

  window.onload = function() {
      var log = function(text) { document.querySelector("pre").textContent = text };

      var elements = document.getElementsByTagName("p");
      for (var i = 0; i < elements.length; ++i) {
          var element = elements.item(i);
          if (!element.id)
              continue;
          if (element.offsetWidth != 100)
              return log("FAIL:initial-width-" + element.offsetWidth);
          element.textContent = "";
      }

      log(allElementsHaveDisplayNone(elements) ? "PASS" : "FAIL");
  };
</script>

chromium/third_party/blink/web_tests/fast/css/pseudo-empty-dynamic-empty.html