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
content / test / data / accessibility / event / style-changed.html [blame]
<!--
@AURALINUX-DENY:STATE-CHANGE:DEFUNCT*
@WIN-DENY:EVENT_OBJECT_LOCATIONCHANGE*
-->
<!DOCTYPE html>
<div contenteditable>
<p id="p1" tabindex="0" aria-label="p1">One</p>
<p id="p2" tabindex="0" aria-label="p2">Two</p>
<p id="p3" tabindex="0" aria-label="p3">Three</p>
<p id="p4" tabindex="0" aria-label="p4">Four</p>
<p id="p5" tabindex="0" aria-label="p5">Five</p>
<p id="p6" tabindex="0" aria-label="p6">Six</p>
<p id="p7" tabindex="0" aria-label="p7">Seven</p>
<p id="p8" tabindex="0" aria-label="p8">Eight</p>
<p id="p9" tabindex="0" aria-label="p9">Nine</p>
<p id="p10">Ten<span tabindex="0" aria-label="span10" id="span10">10</span></p>
</div>
<script>
function go() {
document.getElementById("p1").style.backgroundColor = "red";
document.getElementById("p2").style.color = "orange";
document.getElementById("p3").style.fontWeight = "bold";
document.getElementById("p4").style.fontStyle = "italic";
document.getElementById("p5").style.textDecoration = "overline";
document.getElementById("p6").style.textDecoration = "underline";
document.getElementById("p7").style.textDecoration = "line-through";
// To ensure we don't emit one event per change.
document.getElementById("p8").style.backgroundColor = "red";
document.getElementById("p8").style.color = "orange";
document.getElementById("p8").style.fontWeight = "bold";
document.getElementById("p8").style.fontStyle = "italic";
document.getElementById("p8").style.textDecoration = "overline";
document.getElementById("p8").style.textDecoration = "underline";
document.getElementById("p8").style.textDecoration = "line-through";
document.getElementById("p9").style.direction = "rtl";
document.getElementById("span10").style.verticalAlign = "super";
}
</script>