<!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>