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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <title>Switch between display block and inline 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                 }
  19                 #hoverTest:hover {
  20                         border-color: darkred;
  21                         display: inline;
  22                 }
  23                 #after_hoverTest {
  24                         background-color: blue;
  25                         color: white;
  26                         padding: 10px;
  27                 }
  28         </style>
  29
  30         <script src="../../resources/js-test.js"></script>
  31 </head>
  32
  33 <body>
  34         <div id="dummy" class="box"></div>
  35         <div id="hoverTest" class="box">When hovered, this box's display will switch from <b>block</b> to <b>inline</b></div>
  36         <div id="after_hoverTest" class="box">This is here to show the layout being recomputed</div>
  37
  38         <script type="text/javascript">
  39                 if (window.testRunner)
  40                         testRunner.waitUntilDone();
  41
  42                 function beginTest() {
  43                         if (window.eventSender) {
  44                                 var hoverTest  = document.getElementById("hoverTest");
  45
  46                                 // move mouse on the hover test object
  47                                 eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10);
  48                                 eventSender.mouseDown(0);
  49
  50                                 release();
  51                         }
  52                 }
  53
  54                 function release() {
  55                         if (window.eventSender) {
  56                                 var hoverTest  = document.getElementById("hoverTest");
  57                                 var displayMode = window.getComputedStyle(hoverTest).getPropertyValue("display");
  58
  59                                 if (displayMode == "inline")
  60                                         testPassed("Setting display to inline on hover processed OK.");
  61                                 else
  62                                         testFailed("Setting display to inline on hover FAILED." + " (expected 'inline', got '" + displayMode + "')");
  63
  64                                 var elementsToHide = document.getElementsByClassName('box');
  65                                 for (var element, i = 0; element = elementsToHide[i]; i++)
  66                                     element.style.visibility = "hidden";
  67
  68                                 eventSender.mouseUp(0);
  69
  70                         if (window.testRunner)
  71                                         testRunner.notifyDone();
  72                         }
  73                 }
  74
  75                 beginTest();
  76         </script>
  77 </body>
  78 </html>