blob: ede6ed4956870413bae83f62968c108cd7ec8132 [file] [log] [blame]
<!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>