<html>
<head>
<script>
if (window.testRunner)
testRunner.dumpAsText();
</script>
<style>
.test_div {
zoom: 2;
width: 300px;
}
#zoomed_and_displayed {
background: #ccc;
}
#zoomed_and_hidden {
display: none;
background: orange;
}
</style>
</head>
<body>
<div id="result">FAIL.</div>
<br/>
<div id="zoomed_and_displayed" class="test_div">
This div has a zoom value of "2." It has a width of 300px.
</div>
<div id="zoomed_and_hidden" class="test_div">
This div is has a zoom value of "2" and is hidden. It has a width of 300px.
</div>
<script type="text/javascript" charset="utf-8">
var zoomedAndDisplayed = document.getElementById("zoomed_and_displayed");
var zoomedAndHidden = document.getElementById("zoomed_and_hidden");
var renderedWidth = zoomedAndDisplayed.scrollWidth;
var computedWidthDisplayed = parseFloat(document.defaultView.getComputedStyle(zoomedAndDisplayed).width);
var computedWidthHidden = parseFloat(document.defaultView.getComputedStyle(zoomedAndHidden).width);
var result = document.getElementById("result");
if (computedWidthHidden == computedWidthDisplayed && computedWidthDisplayed == renderedWidth)
result.innerHTML = "PASS! Neither the computed width of the displayed div nor the computed width of the display:none div has been affected by the zoom factor.";
</script>
</body>
</html>