third_party/WebKit/LayoutTests/fast/transforms/bounding-rect-zoom.html

   1 <head>
   2 <script type="text/javascript">
   3
   4 function rectsShouldBeEqual(baseline, other, outputElt)
   5 {
   6   if (baseline.left != other.left ||
   7       baseline.top != other.top ||
   8       baseline.right != other.right ||
   9       baseline.bottom != other.bottom)
  10       outputElt.innerHTML = '<span style="color:red;"><b>FAIL<BR></b></span>' +
  11           "left should be " + baseline.left + " but is " + other.left + "<BR>" +
  12           "top should be " + baseline.top + " but is " + other.top + "<BR>" +
  13           "right should be " + baseline.right + " but is " + other.right + "<BR>" +
  14           "bottom should be " + baseline.bottom + " but is " + other.bottom;
  15   else
  16       outputElt.innerHTML = '<span style="color:green;"><b>PASS</b></span>';
  17 }
  18
  19 function testGetClientBoundingRect()
  20 {
  21     var baseline = document.getElementById("baseline1");
  22     var moveme = document.getElementById("moveme1");
  23
  24     var bounds = baseline.getBoundingClientRect();
  25     moveme.style.left = bounds.left;
  26     moveme.style.top = bounds.top;
  27     moveme.style.width = bounds.right - bounds.left;
  28     moveme.style.height = bounds.bottom - bounds.top;
  29
  30     var newBounds = moveme.getBoundingClientRect();
  31     rectsShouldBeEqual(bounds, newBounds, document.getElementById("results1"));
  32 }
  33
  34 function testGetClientRects()
  35 {
  36     var baseline = document.getElementById("baseline2");
  37     var moveme = document.getElementById("moveme2");
  38
  39     var boundsList = baseline.getClientRects();
  40     moveme.style.left = boundsList[0].left;
  41     moveme.style.top = boundsList[0].top;
  42     moveme.style.width = boundsList[0].right - boundsList[0].left;
  43     moveme.style.height = boundsList[0].bottom - boundsList[0].top;
  44
  45     var newBoundList = moveme.getClientRects();
  46     rectsShouldBeEqual(boundsList[0], newBoundList[0], document.getElementById("results2"));
  47 }
  48
  49 function runTest()
  50 {
  51   document.body.style.zoom = "0.9";
  52   testGetClientBoundingRect();
  53   testGetClientRects();
  54 }
  55 </script>
  56 </head>
  57 <body onload="runTest();">
  58
  59 <p>Tests that these functions account for full page zoom.<br>There should be no red visible.</p>
  60
  61 <table width="100%"><tr><td width="200px">getClientBoundingRect():
  62
  63 <div id="baseline1" style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:red;"></div>
  64 <div id="moveme1" style="position:absolute; left:0px; top:0px; width:50px; height:50px; background-color:green;"></div>
  65 <div id="results1" style="position:absolute; left:10px; top:220px">...</div>
  66
  67 </td><td>getClientRects():
  68
  69 <div id="baseline2" style="position:absolute; left:300px; top:100px; width:100px; height:100px; background-color:red;"></div>
  70 <div id="moveme2" style="position:absolute; left:0px; top:0px; width:50px; height:50px; background-color:green;"></div>
  71 <div id="results2" style="position:absolute; left:220px; top:220px">...</div>
  72
  73 </td>
  74
  75 </body>