third_party/WebKit/LayoutTests/fast/css/computed-offset-with-zoom.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #container {
   6                 width: 500px;
   7                 height: 500px;
   8                 position: relative;
   9             }
  10             #container > div {
  11                 position: relative;
  12                 border: 1px solid red;
  13                 font-size: 20px;
  14                 width: 100px;
  15                 height: 100px;
  16             }
  17             #test-fixed  {
  18                 left: 100px;
  19                 right: 100px;
  20                 top: 100px;
  21                 bottom: 100px;
  22             }
  23             #test-percentage {
  24                 left: 20%;
  25                 right: 20%;
  26                 top: 10%;
  27                 bottom: 10%;
  28             }
  29             #test-viewport {
  30                 left: 10vw;
  31                 right: 10vw;
  32                 top: 10vh;
  33                 bottom: 10vh;
  34             }
  35         </style>
  36         <script src="../../resources/js-test.js"></script>
  37     </head>
  38     <body>
  39         <p>
  40             Reported computed offset should not change with zoom level.
  41         </p>
  42         <div id="container">
  43             <div id="test-fixed"></div>
  44             <div id="test-percentage"></div>
  45             <div id="test-viewport"></div>
  46         </div>
  47         <script>
  48             var fixedElement = document.getElementById('test-fixed');
  49             var percentageElement = document.getElementById('test-percentage');
  50             var viewportElement = document.getElementById('test-viewport');
  51             function test(zoomLevel)
  52             {
  53                     document.body.style.zoom = zoomLevel;
  54                     var windowWidth = "'" + (window.innerWidth / 10) + "px'";
  55                     var windowHeight = "'" + (window.innerHeight / 10) + "px'";
  56
  57                     shouldBe("window.getComputedStyle(fixedElement).top", "'100px'");
  58                     shouldBe("window.getComputedStyle(fixedElement).right", "'100px'");
  59                     shouldBe("window.getComputedStyle(fixedElement).bottom", "'100px'");
  60                     shouldBe("window.getComputedStyle(fixedElement).left", "'100px'");
  61
  62                     shouldBe("window.getComputedStyle(percentageElement).top", "'50px'");
  63                     shouldBe("window.getComputedStyle(percentageElement).right", "'100px'");
  64                     shouldBe("window.getComputedStyle(percentageElement).bottom", "'50px'");
  65                     shouldBe("window.getComputedStyle(percentageElement).left", "'100px'");
  66
  67                     shouldBe("window.getComputedStyle(viewportElement).top", windowHeight);
  68                     shouldBe("window.getComputedStyle(viewportElement).right", windowWidth);
  69                     shouldBe("window.getComputedStyle(viewportElement).bottom", windowHeight);
  70                     shouldBe("window.getComputedStyle(viewportElement).left", windowWidth);
  71             }
  72             test(0.5);
  73             test(1.25);
  74             test(1.0);
  75         </script>
  76     </body>
  77 </html>