third_party/WebKit/LayoutTests/fast/transforms/transforms-with-zoom.html

   1 <html>
   2 <head>
   3 <style>
   4 body {
   5   margin: 0;
   6   zoom: 120%;
   7 }
   8 .box {
   9   position: absolute;
  10   top: 20px;
  11   width:100px;
  12   height:100px;
  13 }
  14
  15 .tester1 {
  16   left: 100px;
  17   top: 70px;
  18   background-color: red;
  19 }
  20
  21 .tester2 {
  22   left: 250px;
  23   top: 70px;
  24   background-color: red;
  25 }
  26
  27 .translated1 {
  28   transform: translate(100px, 50px);
  29   background-color: green;
  30 }
  31
  32 .translated2 {
  33   -webkit-transform-origin: 50px, 50px;
  34   transform: translate(250px, 50px) rotate(90deg);
  35   background-color: green;
  36 }
  37
  38 </style>
  39 </head>
  40 <body>
  41
  42 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=24784">https://bugs.webkit.org/show_bug.cgi?id=24784</a></p>
  43 <p>Test transform lengths with zoom. You should see two green squares below, no red.</p>
  44
  45 <div class="tester1 box"></div>
  46 <div class="tester2 box"></div>
  47
  48 <div class="translated1 box"></div>
  49 <div class="translated2 box"></div>
  50
  51 </body>
  52 </html>