third_party/WebKit/LayoutTests/fast/css/hover-display-block-none.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <title>Switch between display block and none on :hover</title>
   5         <style>
   6                 .box {
   7                         width: 100px;
   8                         height: 100px;
   9                 }
  10                 #dummy {
  11                         background-color: black;
  12                 }
  13                 #hoverTest {
  14                         border: 5px solid green;
  15                         border-left: 100px solid green;
  16                         color: black;
  17                         display: block;
  18                         width: 230px;
  19                 }
  20                 #hoverTest:hover {
  21                         border-color: darkred;
  22                         display: none;
  23                 }
  24                 #after_hoverTest {
  25                         background-color: blue;
  26                         color: white;
  27                         padding: 10px;
  28                 }
  29         </style>
  30
  31         <script src="../../resources/js-test.js"></script>
  32 </head>
  33
  34 <script type="text/javascript">
  35         function elementHovered() {
  36                 if (window.testRunner)
  37                         document.getElementById("hoverTest").style.display = "none";
  38         }
  39 </script>
  40
  41 <body>
  42         <div id="dummy" class="box"></div>
  43         <div id="hoverTest" class="box" onmouseover="elementHovered()">When hovered, this box's display will switch from <b>block</b> to <b>none</b> (click on it and keep the mouse button pushed to avoid flicker and get a more clear view)</div>
  44         <div id="after_hoverTest" class="box">This is here to show the layout being recomputed</div>
  45
  46         <script type="text/javascript">
  47                 if (window.testRunner)
  48                         testRunner.waitUntilDone();
  49
  50                 function beginTest() {
  51                         if (window.eventSender) {
  52                                 var hoverTest  = document.getElementById("hoverTest");
  53
  54                                 // move mouse on the hover test object
  55                                 eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10);
  56
  57                                 release();
  58                         }
  59                 }
  60
  61                 function release() {
  62                         if (window.eventSender) {
  63                                 var hoverTest  = document.getElementById("hoverTest");
  64                                 var displayMode = window.getComputedStyle(hoverTest).getPropertyValue("display");
  65
  66                                 if (displayMode == "none")
  67                                         testPassed("Setting display to none on hover processed OK.");
  68                                 else
  69                                         testFailed("Setting display to none on hover FAILED." + " (expected 'none', got '" + displayMode + "')");
  70
  71                                 var elementsToHide = document.getElementsByClassName('box');
  72                                 for (var element, i = 0; element = elementsToHide[i]; i++)
  73                                     element.style.visibility = "hidden";
  74
  75                                 if (window.testRunner)
  76                                         testRunner.notifyDone();
  77                         }
  78                 }
  79
  80                 beginTest();
  81         </script>
  82 </body>
  83 </html>