<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=800">
<style>

body { margin: 0; overflow-y: hidden; color: #aaa; }
#ib { display: inline-block; width: 12em; }
#ib:hover { color: #99f; }
i { color: black; }

</style>
<script src="resources/autosizingTest.js"></script>
</head>
<body>
<div id="ib">(hover styled inline block)</div> (some text follows)<br><br>
<i>
This test requires text autosizing to be enabled. The test passes if the width
of the inline block does not increase when the user hovers over the content.
</i>
<br><br>
(additional text to trigger autosizing)
<script>

function runTest() {
  var inlineBlock = document.querySelector("#ib");
  var width1 = inlineBlock.clientWidth;

  // Trigger hover styles.
  eventSender.mouseMoveTo(50, 30);

  var width2 = inlineBlock.clientWidth;
  var pass = width1 == width2;

  document.body.innerText = pass ? "PASS" : "FAIL";
  testRunner.dumpAsText();
}

if (window.testRunner && window.eventSender)
  runTest();

</script>
</body>
</html>