css-style-reparse.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/css-style-reparse.html - WPT Dashboard Interop Dashboard

<!doctype html>

<html>

<head>

  <meta charset=utf-8>

  <title>CSS Test: DOM modification re-parsing test</title>

  <link rel="help" href="https://drafts.csswg.org/cssom/">

  <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-interface">

  <script src=/resources/testharness.js></script>

  <script src=/resources/testharnessreport.js></script>

  <style>div { min-width: 0px; }</style>

  <style id="style-element"></style>

</head>

<body>

<div id="test-div"></div>

<script type="text/javascript">

    var style = document.getElementById("style-element");

    var div = document.getElementById("test-div");

    function testProperty(prop) {

      // Assigning an empty string to textContent or innerHTML should trigger a

      // reparse only if the element is not empty.

      style.sheet.insertRule("#test-div { min-width: 42px; }");

      assert_equals(getComputedStyle(div).minWidth, "42px");

      style[prop] = "";

      assert_equals(getComputedStyle(div).minWidth, "42px");

      style[prop] = " ";

      assert_equals(getComputedStyle(div).minWidth, "0px");

      style.sheet.insertRule("#test-div { min-width: 42px; }");

      assert_equals(getComputedStyle(div).minWidth, "42px");

      style[prop] = "";

      assert_equals(getComputedStyle(div).minWidth, "0px");

      style.sheet.insertRule("#test-div { min-width: 42px; }");

      assert_equals(getComputedStyle(div).minWidth, "42px");

      style.appendChild(document.createTextNode(""));

      assert_equals(getComputedStyle(div).minWidth, "0px");

      style.sheet.insertRule("#test-div { min-width: 42px; }");

      assert_equals(getComputedStyle(div).minWidth, "42px");

      style[prop] = "";

      assert_equals(getComputedStyle(div).minWidth, "0px");

    test(function() {

      testProperty("textContent");

    }, "style.textContent modification");

    test(function() {

      testProperty("innerHTML");

    }, "style.innerHTML modification");

</script>

</body>

</html>