/
active-and-hover-manual.html
181 lines (173 loc) · 8.78 KB
/
active-and-hover-manual.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html>
<head>
<title>The :active and :hover quirk</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style> iframe { width:100%; height:200px; } </style>
</head>
<body>
<p>Click on the boxes below (using a pointing device). <button onclick="timeout()">Abort and show results</button></p>
<div id=log></div>
<p>quirks:
<iframe id=quirks></iframe>
<p>almost:
<iframe id=almost></iframe>
<p>standards:
<iframe id=standards></iframe>
<script type="text/plain" id=html_tmpl>
<html id=html class=x lang=en>
<style>
.t:not(area), img { display:inline-block; vertical-align:middle; width:50px; height:50px; background-color:#eee; margin:0 0.5em }
.done.done { background-color:lime }
link::before { content:'' }
table, tbody, tr, td { display:inline }
</style>
<style>{style}</style>
<body id=body class=x>
a<a href=# id=a class=t></a>
b<a id=b class=t></a>
c<map id=map1 name=map1 class=x><area href=# coords=0,0,50,50 id=c class=t></map><img id=img1 class=x usemap=#map1 src=/images/transparent.png>
d<map id=map2 name=map2 class=x><area coords=0,0,50,50 id=d class=t></map><img id=img2 class=x usemap=#map2 src=/images/transparent.png>
e<link href=# id=e class=t>
f<link rel=stylesheet href=# id=f class=t>
g<link id=g class=t>
h<button id=h class=t></button>
i<input type=submit id=i class=t value>
j<input type=image id=j class=t alt>
k<input type=reset id=k class=t value>
l<input type=button id=l class=t value>
m<img tabindex=0 id=n class=t src=/images/transparent.png>
n<a href=# id=a_ancestor class=x><table id=table class=x><tbody id=tbody class=x><tr id=tr class=x><td id=td class=x><a href=# id=o class=t></a></table></a>
</script>
<script>
setup({explicit_done:true, explicit_timeout:true});
onload = function() {
var links_only = [
{input:':active', prop:'background-attachment', value:'fixed'},
{input:':hover', prop:'background-position', value:'1px 2px'},
{input:':hover:active', prop:'background-repeat', value:'repeat-x'},
{input:':active:active', prop:'border-collapse', value:'collapse'},
{input:':hover:hover', prop:'border-spacing', value:'1px 2px'},
{input:'*:active', prop:'border-top-style', value:'dotted'},
{input:'*:hover', prop:'border-right-style', value:'dotted'},
];
var any_elm = [
// type selector
{input:'a:active, map:active, area:active, link:active, button:active, input:active, img:active, table:active, tbody:active, tr:active, td:active, body:active, html:active', prop:'top', value:'1px'},
{input:'a:hover, map:hover, area:hover, link:hover, button:hover, input:hover, img:hover, table:hover, tbody:hover, tr:hover, td:hover, body:hover, html:hover', prop:'right', value:'1px'},
// attribute selector
{input:'[id]:active', prop:'bottom', value:'1px'},
{input:'[id]:hover', prop:'left', value:'1px'},
// id selector
{input:'#a:active, #b:active, #map1:active, #c:active, #img1:active, #map2:active, #d:active, #img2:active, #e:active, #f:active, #g:active, #h:active, #i:active, #j:active, #k:active, #l:active, #m:active, #n:active, #o:active, #a_ancestor:active, #table:active, #tbody:active, #tr:active, #td:active, #body:active, #html:active', prop:'caption-side', value:'bottom'},
{input:'#a:hover, #b:hover, #map1:hover, #c:hover, #img1:hover, #map2:hover, #d:hover, #img2:hover, #e:hover, #f:hover, #g:hover, #h:hover, #i:hover, #j:hover, #k:hover, #l:hover, #m:hover, #n:hover, #o:hover, #a_ancestor:hover, #table:hover, #tbody:hover, #tr:hover, #td:hover, #body:hover, #html:hover', prop:'clear', value:'left'},
{input:':active#a, :active#b, :active#map1, :active#c, :active#img1, :active#map2, :active#d, :active#img2, :active#e, :active#f, :active#g, :active#h, :active#i, :active#j, :active#k, :active#l, :active#m, :active#n, :active#o, :active#a_ancestor, :active#table, :active#tbody, :active#tr, :active#td, :active#body, :active#html', prop:'list-style-type', value:'circle'},
{input:':hover#a, :hover#b, :hover#map1, :hover#c, :hover#img1, :hover#map2, :hover#d, :hover#img2, :hover#e, :hover#f, :hover#g, :hover#h, :hover#i, :hover#j, :hover#k, :hover#l, :hover#m, :hover#n, :hover#o, :hover#a_ancestor, :hover#table, :hover#tbody, :hover#tr, :hover#td, :hover#body, :hover#html', prop:'max-height', value:'10000px'},
// class selector
{input:'.t:active, .x:active', prop:'cursor', value:'move'},
{input:'.t:hover, .x:hover', prop:'empty-cells', value:'hide'},
{input:':active.t, :active.x', prop:'max-width', value:'10000px'},
{input:':hover.t, :hover.x', prop:'min-height', value:'1px'},
// pseudo-class selector
{input:':lang(en):active', prop:'font-style', value:'italic'},
{input:':lang(en):hover', prop:'font-variant', value:'small-caps'},
{input:':active:lang(en)', prop:'min-width', value:'1px'},
{input:':hover:lang(en)', prop:'overflow', value:'hidden'},
// pseudo-element selector
{input:':active::before', prop:'top', value:'1px', pseudoElt:'::before'},
{input:':hover::before', prop:'right', value:'1px', pseudoElt:'::before'},
{input:':active::after', prop:'bottom', value:'1px', pseudoElt:'::after'},
{input:':hover::after', prop:'left', value:'1px', pseudoElt:'::after'},
// as argument
//{input:':matches(:active)', prop:'font-weight', value:'bold'},
//{input:':matches(:hover)', prop:'list-style-position', value:'inside'},
];
var stylesheet = '';
function serialize(t) {
return t.input + '{' + t.prop + ':' + t.value + '}';
}
links_only.concat(any_elm).forEach(function(t) {
stylesheet += serialize(t);
});
var html = document.getElementById('html_tmpl').textContent.replace('{style}', stylesheet);
var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
var s_doctype = '<!DOCTYPE HTML>';
var q = document.getElementById('quirks').contentWindow;
var a = document.getElementById('almost').contentWindow;
var s = document.getElementById('standards').contentWindow;
q.document.open();
q.document.write(html);
q.document.close();
a.document.open();
a.document.write(a_doctype + html);
a.document.close();
s.document.open();
s.document.write(s_doctype + html);
s.document.close();
q.mode = 'quirks';
a.mode = 'almost';
s.mode = 'standards';
[q, a, s].forEach(function(win) {
win.onmousedown = win.onmouseup = run_tests;
win.onclick = function(e) {
e.preventDefault();
};
});
var test_count = 0;
var total_test_count = q.document.querySelectorAll('.t').length * 3;
function check_matches(id, win, elm, t, expectMatch) {
var prefix = id + ', ' + win.mode + ': ';
// .getComputedStyle can be checked both for pseudo-elements and normal elements
test(function() {
assert_equals(win.getComputedStyle(elm, t.pseudoElt).getPropertyValue(t.prop) === t.value, expectMatch);
}, prefix + 'getComputedStyle(' + elm.id + ') with selector ' + t.input);
// .matches doesn't work with pseudo-elements
if (!t.pseudoElt) {
test(function() {
assert_equals(elm.matches(t.input), expectMatch);
}, prefix + elm.id + '.matches("' + t.input + '")');
}
}
function run_tests(e) {
var elm = e.target;
if (elm.classList.contains('t') && !elm.classList.contains('done')) {
if (!elm.matches('.t:active')) {
return;
}
if (elm.tagName != 'AREA') {
elm.classList.add('done');
} else {
// For <area> we want to style the <img> instead.
if (elm.parentNode.nextElementSibling.tagName != 'IMG') {
throw new Error("<area>'s parent's next element sibling wasn't an <img>");
}
elm.parentNode.nextElementSibling.classList.add('done');
}
var id = elm.id;
var win = elm.ownerDocument.defaultView;
do {
if (win.mode === 'quirks') {
links_only.forEach(function(t) {
var elmIsLink = elm.matches('a[href], area[href], link[href]');
check_matches(id, win, elm, t, elmIsLink);
});
} else {
links_only.forEach(function(t) {
check_matches(id, win, elm, t, true);
});
}
any_elm.forEach(function(t) {
check_matches(id, win, elm, t, true);
});
} while (elm = elm.parentElement);
test_count++;
if (test_count === total_test_count) {
done();
}
}
}
}
</script>
</body>
</html>