hover_helper.html (9058B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for :hover</title> 5 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 6 <style type="text/css"> 7 8 div#one { height: 10px; width: 10px; } 9 div#one:hover { background: #00f; } 10 div#one > div { height: 5px; width: 20px; } 11 div#one > div:hover { background: #f00; } 12 13 div#twoparent { overflow: hidden; height: 20px; } 14 div#two { width: 10px; height: 10px; } 15 div#two:hover { margin-left: 5px; background: #0f0; } 16 div#two + iframe { width: 50px; height: 10px; } 17 div#two:hover + iframe { width: 100px; } 18 19 </style> 20 </head> 21 <!-- need a set timeout because we need things to start after painting suppression ends --> 22 <body onload="setTimeout(step1, 0)"> 23 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 24 <div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px"> 25 26 <div id="one"><div></div></div> 27 28 <div id="twoparent"> 29 <div id="two"></div> 30 <iframe id="twoi" src="hover_empty.html"></iframe> 31 <div style="width: 5000px; height: 10px;"></div> 32 </div> 33 34 </div> 35 <pre id="test"> 36 <script type="application/javascript"> 37 38 var imports = [ "SimpleTest", "is", "isnot", "ok" ]; 39 for (var name of imports) { 40 window[name] = window.opener.wrappedJSObject[name]; 41 } 42 43 var div = document.getElementById("display"); 44 var divtwo = document.getElementById("two"); 45 var iframe = document.getElementById("twoi"); 46 var divtwoparent = document.getElementById("twoparent"); 47 48 iframe.contentDocument.open(); 49 iframe.contentDocument.write("<style type='text/css'>html, body { margin: 0; padding: 0; }<\/style><body>"); 50 iframe.contentDocument.close(); 51 52 var moveEvent = { type: "mousemove", clickCount: "0" }; 53 54 function setResize(str) { 55 var handler = function() { 56 iframe.contentWindow.removeEventListener("resize", arguments.callee); 57 setTimeout(str, 100); 58 }; 59 iframe.contentWindow.addEventListener("resize", handler); 60 } 61 62 function step1() { 63 /** test basic hover */ 64 var divone = document.getElementById("one"); 65 synthesizeMouse(divone, 5, 7, moveEvent, window); 66 is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", 67 ":hover applies"); 68 is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)", 69 ":hover does not apply"); 70 synthesizeMouse(divone, 5, 2, moveEvent, window); 71 is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", 72 ":hover applies hierarchically"); 73 is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)", 74 ":hover applies"); 75 synthesizeMouse(divone, 15, 7, moveEvent, window); 76 is(getComputedStyle(divone, "").backgroundColor, "rgba(0, 0, 0, 0)", 77 ":hover does not apply"); 78 is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)", 79 ":hover does not apply"); 80 synthesizeMouse(divone, 15, 2, moveEvent, window); 81 is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", 82 ":hover applies hierarchically"); 83 is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)", 84 ":hover applies"); 85 86 /** Test for Bug 302561 */ 87 setResize("step2();"); 88 is(iframe.contentDocument.body.offsetWidth, 50, 89 ":hover does not apply (iframe body width)"); 90 synthesizeMouse(divtwoparent, 7, 5, moveEvent, window); 91 is(iframe.contentDocument.body.offsetWidth, 100, 92 ":hover applies (iframe body width)"); 93 } 94 95 var step2called = false; 96 function step2() { 97 is(step2called, false, "step2 called only once"); 98 step2called = true; 99 is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", 100 ":hover applies"); 101 is(iframe.contentDocument.body.offsetWidth, 100, 102 ":hover applies (iframe body width)"); 103 setResize("step3()"); 104 synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); 105 is(iframe.contentDocument.body.offsetWidth, 50, 106 ":hover does not apply (iframe body width)"); 107 } 108 109 var step3called = false; 110 function step3() { 111 is(step3called, false, "step3 called only once"); 112 step3called = true; 113 if (getComputedStyle(iframe, "").width == "100px") { 114 // The two resize events may be coalesced into a single one. 115 step4(); 116 return; 117 } 118 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 119 ":hover does not apply"); 120 setResize("step4()"); 121 /* expect to get a second resize from the oscillation */ 122 } 123 124 var step4called = false; 125 function step4() { 126 is(step4called, false, "step4 called only once (more than two cycles of oscillation)"); 127 if (step4called) 128 return; 129 step4called = true; 130 is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", 131 ":hover applies"); 132 setTimeout(step5, 500); // time to detect oscillations if they exist 133 } 134 135 var step5called = false; 136 function step5() { 137 is(step5called, false, "step5 called only once"); 138 step5called = true; 139 setResize("step6()"); 140 synthesizeMouse(divtwoparent, 25, 5, moveEvent, window); 141 } 142 143 var step6called = false; 144 function step6() { 145 is(step6called, false, "step6 called only once"); 146 step6called = true; 147 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 148 ":hover does not apply"); 149 synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); 150 setTimeout(step7, 500); // time to detect oscillations if they exist 151 } 152 153 var step7called = false; 154 function step7() { 155 is(step7called, false, "step7 called only once (more than two cycles of oscillation)"); 156 if (step7called) 157 return; 158 step7called = true; 159 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 160 ":hover does not apply"); 161 setTimeout(step8, 500); // time to detect oscillations if they exist 162 } 163 164 /* test the same case with scrolltop */ 165 166 var step8called = false; 167 function step8() { 168 is(step8called, false, "step8 called only once"); 169 step8called = true; 170 iframe.contentDocument.body.removeAttribute("onresize"); 171 /* move the mouse out of the way */ 172 synthesizeMouse(divtwoparent, 200, 5, moveEvent, window); 173 divtwoparent.scrollLeft = 5; 174 setResize("step9()"); 175 synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); 176 /* mouse now over 7, 5 */ 177 } 178 179 var step9called = false; 180 function step9() { 181 is(step9called, false, "step9 called only once"); 182 step9called = true; 183 is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", 184 ":hover applies"); 185 setResize("step10()"); 186 divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */ 187 } 188 189 var step10called = false; 190 function step10() { 191 is(step10called, false, "step10 called only once"); 192 step10called = true; 193 if (getComputedStyle(iframe, "").width == "100px") { 194 // The two resize events may be coalesced into a single one. 195 step11(); 196 return; 197 } 198 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 199 ":hover does not apply"); 200 setResize("step11()"); 201 /* expect to get a second resize from the oscillation */ 202 } 203 204 var step11called = false; 205 function step11() { 206 is(step11called, false, "step11 called only once (more than two cycles of oscillation)"); 207 if (step11called) 208 return; 209 step11called = true; 210 is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", 211 ":hover applies"); 212 setTimeout(step12, 500); // time to detect oscillations if they exist 213 } 214 215 var step12called = false; 216 function step12() { 217 is(step12called, false, "step12 called only once"); 218 step12called = true; 219 setResize("step13()"); 220 divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */ 221 } 222 223 var step13called = false; 224 function step13() { 225 is(step13called, false, "step13 called only once"); 226 step13called = true; 227 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 228 ":hover does not apply"); 229 setResize("step14()"); 230 divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */ 231 } 232 233 var step14called = false; 234 function step14() { 235 is(step14called, false, "step14 called only once"); 236 step14called = true; 237 if (getComputedStyle(iframe, "").width == "50px") { 238 // The two resize events may be coalesced into a single one. 239 step15(); 240 return; 241 } 242 is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", 243 ":hover applies"); 244 setResize("step15()"); 245 /* expect to get a second resize from the oscillation */ 246 } 247 248 var step15called = false; 249 function step15() { 250 is(step15called, false, "step15 called only once (more than two cycles of oscillation)"); 251 if (step15called) 252 return; 253 step15called = true; 254 is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)", 255 ":hover does not apply"); 256 setTimeout(finish, 500); // time to detect oscillations if they exist 257 } 258 259 function finish() { 260 document.getElementById("display").style.display = "none"; 261 262 var tester = window.SimpleTest; 263 window.close(); 264 tester.finish(); 265 } 266 267 </script> 268 </pre> 269 </body> 270 </html>