| <!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.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> |
| </body> |
| </html> |
