dom/events/test/test_bug635465.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=635465
michael@0 5 -->
michael@0 6 <head>
michael@0 7 <meta charset="utf-8">
michael@0 8 <title>Test for Bug 635465</title>
michael@0 9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 10 <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
michael@0 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
michael@0 12 <style type="text/css">
michael@0 13 #item {
michael@0 14 position: relative;
michael@0 15 }
michael@0 16 .s-menu-section-submenu {
michael@0 17 position: absolute;
michael@0 18 display: none;
michael@0 19 }
michael@0 20 .open .s-menu-section-submenu {
michael@0 21 display: block;
michael@0 22 }
michael@0 23 </style>
michael@0 24 </head>
michael@0 25 <body>
michael@0 26 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=635465">Mozilla Bug 635465</a>
michael@0 27 <div id="display">
michael@0 28 <div class="item" id="item"
michael@0 29 onmouseover="showSubmenu(event)" onmouseout="hideSubmenu(event)">
michael@0 30 <a href="#" id="firsthover">Hover me</a>
michael@0 31 <div class="s-menu-section-submenu" id="menu">
michael@0 32 <a href="#" id="secondhover">Now hover me</a>
michael@0 33 </div>
michael@0 34 </div>
michael@0 35 </div>
michael@0 36 <div id="content" style="display: none">
michael@0 37
michael@0 38 </div>
michael@0 39 <pre id="test">
michael@0 40 <script type="application/javascript;version=1.8">
michael@0 41
michael@0 42 /** Test for Bug 635465 **/
michael@0 43 function showSubmenu(event) {
michael@0 44 var item = document.getElementById('item');
michael@0 45
michael@0 46 var width = item.offsetWidth; // IT WORKS IF YOU REMOVE THIS LINE
michael@0 47
michael@0 48 item.className='open';
michael@0 49 }
michael@0 50
michael@0 51 function hideSubmenu(event) {
michael@0 52 document.getElementById('item').className='';
michael@0 53 }
michael@0 54
michael@0 55 SimpleTest.waitForExplicitFinish();
michael@0 56
michael@0 57 function executeTests() {
michael@0 58 // First flush out layout of firsthover
michael@0 59 ok($("firsthover").getBoundingClientRect().height > 0, true,
michael@0 60 "Should have a nonzero height before hover");
michael@0 61
michael@0 62 // Now trigger a mouseover on firsthover
michael@0 63 synthesizeMouseAtCenter($("firsthover"), { type: "mousemove" });
michael@0 64
michael@0 65 ok($("secondhover").getBoundingClientRect().height > 0, true,
michael@0 66 "Should have a nonzero height for submenu after hover");
michael@0 67
michael@0 68 // Now determine where secondhover is hanging out
michael@0 69 var rect = $("secondhover").getBoundingClientRect();
michael@0 70 synthesizeMouseAtCenter($("secondhover"), { type: "mousemove" });
michael@0 71
michael@0 72 // And another mouseover one pixel to the right of where the center used to be
michael@0 73 synthesizeMouseAtPoint(rect.left + rect.width/2 + 1,
michael@0 74 rect.top + rect.height/2,
michael@0 75 { type: "mousemove" });
michael@0 76
michael@0 77 ok($("secondhover").getBoundingClientRect().height > 0, true,
michael@0 78 "Should have a nonzero height for submenu after second hover");
michael@0 79
michael@0 80 // And check computed display of the menu
michael@0 81 is(getComputedStyle($("menu"), "").display, "block", "Should have block display");
michael@0 82
michael@0 83 SimpleTest.finish();
michael@0 84 }
michael@0 85
michael@0 86 SimpleTest.waitForFocus(executeTests);
michael@0 87 </script>
michael@0 88 </pre>
michael@0 89 </body>
michael@0 90 </html>

mercurial