<!DOCTYPE html>
<script src="../../resources/js-test-pre.js"></script>
<style>
  .test { display: height: 10px; background: #ddf; font: 20px/1 Ahem; }
  #nocalc { width: 310px; }
  #calc { width: calc(15em + 10px); width: -moz-calc(15em + 10px); width: calc(15em + 10px); }
</style>
<div id="nocalc" class="test"></div>
<div id="calc" class="test"></div>
<script>
  descriptionQuiet("Tests that zooming a calc expression containing 'em' units works correctly");
  zoomLevels = [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 1];
  calc = document.getElementById("calc");
  nocalc = document.getElementById("nocalc");
  for (var z = 0; z < zoomLevels.length; z++) {
    var zoom = zoomLevels[z];
    document.body.style.zoom = zoom;

    shouldBe(calc.offsetWidth + "", nocalc.offsetWidth + "", true);
  }   
</script>
<script src="../../resources/js-test-post.js"></script>