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

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style type="text/css">
   5 td {
   6     display: table-cell;
   7     width: 200px;
   8     height: 80px;
   9     border: 1px solid #ccc;
  10     text-align: center;
  11     vertical-align: middle;
  12 }
  13 </style>
  14 <script src="../../resources/js-test.js"></script>
  15 </head>
  16 <body>
  17   <table id="table">
  18     <tr>
  19       <td id="elementWithoutStyleAttribute">no HTML style attribute, no get/setAttribute</td>
  20       <td id="elementWithEmptyStyleAttribute" style="">empty HTML style attribute, no get/setAttribute</td>
  21       <td id="elementWithStyleAttribute" style="opacity: 1;">non-empty HTML style attribute, no get/setAttribute</td>
  22     </tr>
  23     <tr>
  24       <td id="elementWithoutStyleAttribute2">no HTML style attribute, getAttribute before modifying IDL attribute</td>
  25       <td id="elementWithoutStyleAttribute3">no HTML style attribute, getAttribute after modifying IDL attribute</td>
  26       <td id="elementWithoutStyleAttribute4">no HTML style attribute, setAttribute before removeAttribute</td>
  27     </tr>
  28   </table>
  29   <div id="console"></div>
  30   <script>
  31     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.");
  32
  33     var elementWithoutStyleAttribute = $('elementWithoutStyleAttribute'),
  34         elementWithEmptyStyleAttribute = $('elementWithEmptyStyleAttribute'),
  35         elementWithStyleAttribute = $('elementWithStyleAttribute'),
  36         elementWithoutStyleAttribute2 = $('elementWithoutStyleAttribute2'),
  37         elementWithoutStyleAttribute3 = $('elementWithoutStyleAttribute3'),
  38         elementWithoutStyleAttribute4 = $('elementWithoutStyleAttribute4');
  39
  40     shouldBe("elementWithoutStyleAttribute.style.backgroundColor = 'red'; elementWithoutStyleAttribute.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');
  41
  42     elementWithEmptyStyleAttribute.style.backgroundColor = 'red';
  43     elementWithEmptyStyleAttribute.removeAttribute('style');
  44     shouldBe("getComputedStyle(elementWithEmptyStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');
  45
  46     elementWithStyleAttribute.style.backgroundColor = 'red';
  47     elementWithStyleAttribute.removeAttribute('style');
  48     shouldBe("getComputedStyle(elementWithStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"');
  49
  50     shouldBeNull("elementWithoutStyleAttribute2.getAttribute('style')");
  51     shouldBe("elementWithoutStyleAttribute2.style.backgroundColor = 'red'; elementWithoutStyleAttribute2.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute2).backgroundColor", '"rgba(0, 0, 0, 0)"');
  52
  53     elementWithoutStyleAttribute3.style.backgroundColor = 'red';
  54     shouldBe("elementWithoutStyleAttribute3.getAttribute('style')", '"background-color: red;"');
  55     elementWithoutStyleAttribute3.removeAttribute('style');
  56     shouldBe("getComputedStyle(elementWithoutStyleAttribute3).backgroundColor", '"rgba(0, 0, 0, 0)"');
  57
  58     shouldBe("elementWithoutStyleAttribute4.style.backgroundColor = 'red'; elementWithoutStyleAttribute4.setAttribute('style', ''); elementWithoutStyleAttribute4.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute4).backgroundColor", '"rgba(0, 0, 0, 0)"');
  59
  60     function $(id) {
  61         return document.getElementById(id);
  62     }
  63
  64     document.getElementById('table').innerHTML = '';
  65   </script>
  66 </body>
  67 </html>