LayoutTests/fast/css/remove-attribute-style.html

<!doctype html>
<html>
<head>
<style type="text/css">
td {
    display: table-cell;
    width: 200px;
    height: 80px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
  <table id="table">
    <tr>
      <td id="elementWithoutStyleAttribute">no HTML style attribute, no get/setAttribute</td>
      <td id="elementWithEmptyStyleAttribute" style="">empty HTML style attribute, no get/setAttribute</td>
      <td id="elementWithStyleAttribute" style="opacity: 1;">non-empty HTML style attribute, no get/setAttribute</td>
    </tr>
    <tr>
      <td id="elementWithoutStyleAttribute2">no HTML style attribute, getAttribute before modifying IDL attribute</td>
      <td id="elementWithoutStyleAttribute3">no HTML style attribute, getAttribute after modifying IDL attribute</td>
      <td id="elementWithoutStyleAttribute4">no HTML style attribute, setAttribute before removeAttribute</td>
    </tr>
  </table>
  <div id="console"></div>
  <script>
    description("[bug 99295] removeAttribute('style') not working in certain circumstances. If this test passes, all backgroundColors are rgba(0, 0, 0, 0), i.e. all styles are removed.");

    var elementWithoutStyleAttribute = $('elementWithoutStyleAttribute'),
        elementWithEmptyStyleAttribute = $('elementWithEmptyStyleAttribute'),
        elementWithStyleAttribute = $('elementWithStyleAttribute'),
        elementWithoutStyleAttribute2 = $('elementWithoutStyleAttribute2'),
        elementWithoutStyleAttribute3 = $('elementWithoutStyleAttribute3'),
        elementWithoutStyleAttribute4 = $('elementWithoutStyleAttribute4');

    shouldBe("elementWithoutStyleAttribute.style.backgroundColor = 'red'; elementWithoutStyleAttribute.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');

    elementWithEmptyStyleAttribute.style.backgroundColor = 'red';
    elementWithEmptyStyleAttribute.removeAttribute('style');
    shouldBe("getComputedStyle(elementWithEmptyStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');

    elementWithStyleAttribute.style.backgroundColor = 'red';
    elementWithStyleAttribute.removeAttribute('style');
    shouldBe("getComputedStyle(elementWithStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');

    shouldBeNull("elementWithoutStyleAttribute2.getAttribute('style')");
    shouldBe("elementWithoutStyleAttribute2.style.backgroundColor = 'red'; elementWithoutStyleAttribute2.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute2).backgroundColor", '"rgba(0, 0, 0, 0)"');

    elementWithoutStyleAttribute3.style.backgroundColor = 'red';
    shouldBe("elementWithoutStyleAttribute3.getAttribute('style')", '"background-color: red;"');
    elementWithoutStyleAttribute3.removeAttribute('style');
    shouldBe("getComputedStyle(elementWithoutStyleAttribute3).backgroundColor", '"rgba(0, 0, 0, 0)"');

    shouldBe("elementWithoutStyleAttribute4.style.backgroundColor = 'red'; elementWithoutStyleAttribute4.setAttribute('style', ''); elementWithoutStyleAttribute4.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute4).backgroundColor", '"rgba(0, 0, 0, 0)"');

    function $(id) {
        return document.getElementById(id);
    }

    document.getElementById('table').innerHTML = '';
  </script>
  <script src="../../resources/js-test-post.js"></script>
</body>
</html>