zoom-on-display-none.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/zoom-on-display-none.html
