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