third_party/WebKit/LayoutTests/css3/calc/zoom-with-em.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/ahem.js"></script>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5   .test { display: height: 10px; background: #ddf; font: 20px/1 Ahem; }
   6   #nocalc { width: 310px; }
   7   #calc { width: calc(15em + 10px); width: -moz-calc(15em + 10px); width: calc(15em + 10px); }
   8 </style>
   9 <div id="nocalc" class="test"></div>
  10 <div id="calc" class="test"></div>
  11 <script>
  12   descriptionQuiet("Tests that zooming a calc expression containing 'em' units works correctly");
  13   zoomLevels = [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 1];
  14   calc = document.getElementById("calc");
  15   nocalc = document.getElementById("nocalc");
  16   for (var z = 0; z < zoomLevels.length; z++) {
  17     var zoom = zoomLevels[z];
  18     document.body.style.zoom = zoom;
  19
  20     shouldBe(calc.offsetWidth + "", nocalc.offsetWidth + "", true);
  21   }
  22 </script>