1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!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>
|
