The Tor Browser: layout/style/test/chrome/hover

     1 <!DOCTYPE HTML>

     2 <html>

     3 <head>

     4   <title>Test for :hover</title>

     5   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

     6   <style type="text/css">

     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; }

    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; }

    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">

    26   <div id="one"><div></div></div>

    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>

    34 </div>

    35 <pre id="test">

    36 <script type="application/javascript">

    38 var imports = [ "SimpleTest", "is", "isnot", "ok" ];

    39 for (var name of imports) {

    40     window[name] = window.opener.wrappedJSObject[name];

    41 }

    43 var div = document.getElementById("display");

    44 var divtwo = document.getElementById("two");

    45 var iframe = document.getElementById("twoi");

    46 var divtwoparent = document.getElementById("twoparent");

    48 iframe.contentDocument.open();

    49 iframe.contentDocument.write("<style type='text/css'>html, body { margin: 0; padding: 0; }<\/style><body>");

    50 iframe.contentDocument.close();

    52 var moveEvent = { type: "mousemove", clickCount: "0" };

    54 function setResize(str) {

    55   var handler = function() {

    56     iframe.contentWindow.removeEventListener("resize", arguments.callee, false);

    57     setTimeout(str, 100);

    58   };

    59   iframe.contentWindow.addEventListener("resize", handler, false);

    60 }

    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, "transparent",

    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, "transparent",

    77        ":hover does not apply");

    78     is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent",

    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");

    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 }

    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 }

   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, "transparent",

   119        ":hover does not apply");

   120     setResize("step4()");

   121     /* expect to get a second resize from the oscillation */

   122 }

   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 }

   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 }

   143 var step6called = false;

   144 function step6() {

   145     is(step6called, false, "step6 called only once");

   146     step6called = true;

   147     is(getComputedStyle(divtwo, "").backgroundColor, "transparent",

   148        ":hover does not apply");

   149     setResize("step7()");

   150     synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);

   151 }

   153 var step7called = false;

   154 function step7() {

   155     is(step7called, false, "step7 called only once");

   156     step7called = true;

   157     if (getComputedStyle(iframe, "").width == "50px") {

   158         // The two resize events may be coalesced into a single one.

   159         step8();

   160         return;

   161     }

   162     is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",

   163        ":hover applies");

   164     setResize("step8()");

   165     /* expect to get a second resize from the oscillation */

   166 }

   168 var step8called = false;

   169 function step8() {

   170     is(step8called, false, "step8 called only once (more than two cycles of oscillation)");

   171     if (step8called)

   172         return;

   173     step8called = true;

   174     is(getComputedStyle(divtwo, "").backgroundColor, "transparent",

   175        ":hover does not apply");

   176     setTimeout(step9, 500); // time to detect oscillations if they exist

   177 }

   179 /* test the same case with scrolltop */

   181 var step9called = false;

   182 function step9() {

   183     is(step9called, false, "step9 called only once");

   184     step9called = true;

   185     iframe.contentDocument.body.removeAttribute("onresize");

   186     /* move the mouse out of the way */

   187     synthesizeMouse(divtwoparent, 200, 5, moveEvent, window);

   188     divtwoparent.scrollLeft = 5;

   189     setResize("step10()");

   190     synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);

   191     /* mouse now over 7, 5 */

   192 }

   194 var step10called = false;

   195 function step10() {

   196     is(step10called, false, "step10 called only once");

   197     step10called = true;

   198     is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",

   199        ":hover applies");

   200     setResize("step11()");

   201     divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */

   202 }

   204 var step11called = false;

   205 function step11() {

   206     is(step11called, false, "step11 called only once");

   207     step11called = true;

   208     if (getComputedStyle(iframe, "").width == "100px") {

   209         // The two resize events may be coalesced into a single one.

   210         step12();

   211         return;

   212     }

   213     is(getComputedStyle(divtwo, "").backgroundColor, "transparent",

   214        ":hover does not apply");

   215     setResize("step12()");

   216     /* expect to get a second resize from the oscillation */

   217 }

   219 var step12called = false;

   220 function step12() {

   221     is(step12called, false, "step12 called only once (more than two cycles of oscillation)");

   222     if (step12called)

   223         return;

   224     step12called = true;

   225     is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",

   226        ":hover applies");

   227     setTimeout(step13, 500); // time to detect oscillations if they exist

   228 }

   230 var step13called = false;

   231 function step13() {

   232     is(step13called, false, "step13 called only once");

   233     step13called = true;

   234     setResize("step14()");

   235     divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */

   236 }

   238 var step14called = false;

   239 function step14() {

   240     is(step14called, false, "step14 called only once");

   241     step14called = true;

   242     is(getComputedStyle(divtwo, "").backgroundColor, "transparent",

   243        ":hover does not apply");

   244     setResize("step15()");

   245     divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */

   246 }

   248 var step15called = false;

   249 function step15() {

   250     is(step15called, false, "step15 called only once");

   251     step15called = true;

   252     if (getComputedStyle(iframe, "").width == "50px") {

   253         // The two resize events may be coalesced into a single one.

   254         step16();

   255         return;

   256     }

   257     is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",

   258        ":hover applies");

   259     setResize("step16()");

   260     /* expect to get a second resize from the oscillation */

   261 }

   263 var step16called = false;

   264 function step16() {

   265     is(step16called, false, "step16 called only once (more than two cycles of oscillation)");

   266     if (step16called)

   267         return;

   268     step16called = true;

   269     is(getComputedStyle(divtwo, "").backgroundColor, "transparent",

   270        ":hover does not apply");

   271     setTimeout(finish, 500); // time to detect oscillations if they exist

   272 }

   274 function finish() {

   275     document.getElementById("display").style.display = "none";

   277     var tester = window.SimpleTest;

   278     window.close();

   279     tester.finish();

   280 }

   282 </script>

   283 </pre>

   284 </body>

   285 </html>

The Tor Browser / file revision

layout/style/test/chrome/hover_helper.html@4ab42b5ab56c

layout/style/test/chrome/hover_helper.html