third_party/WebKit/LayoutTests/fast/text-autosizing/inline-block-em-width-hover.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta name="viewport" content="width=800">
   5 <style>
   6
   7 body { margin: 0; overflow-y: hidden; color: #aaa; }
   8 #ib { display: inline-block; width: 12em; }
   9 #ib:hover { color: #99f; }
  10 i { color: black; }
  11
  12 </style>
  13 <script src="resources/autosizingTest.js"></script>
  14 </head>
  15 <body>
  16 <div id="ib">(hover styled inline block)</div> (some text follows)<br><br>
  17 <i>
  18 This test requires text autosizing to be enabled. The test passes if the width
  19 of the inline block does not increase when the user hovers over the content.
  20 </i>
  21 <br><br>
  22 (additional text to trigger autosizing)
  23 <script>
  24
  25 function runTest() {
  26   var inlineBlock = document.querySelector("#ib");
  27   var width1 = inlineBlock.clientWidth;
  28
  29   // Trigger hover styles.
  30   eventSender.mouseMoveTo(50, 30);
  31
  32   var width2 = inlineBlock.clientWidth;
  33   var pass = width1 == width2;
  34
  35   document.body.innerText = pass ? "PASS" : "FAIL";
  36   testRunner.dumpAsText();
  37 }
  38
  39 if (window.testRunner && window.eventSender)
  40   runTest();
  41
  42 </script>
  43 </body>
  44 </html>