transforms-with-zoom.html | Explore in Territory

<html>
<head>
<style>
body {
  margin: 0;
  zoom: 120%;
}
.box {
  position: absolute;
  top: 20px;
  width:100px;
  height:100px;
}

.tester1 {
  left: 100px;
  top: 70px;
  background-color: red;
}

.tester2 {
  left: 250px;
  top: 70px;
  background-color: red;
}

.translated1 {
  transform: translate(100px, 50px);
  background-color: green;
}

.translated2 {
  -webkit-transform-origin: 50px, 50px;
  transform: translate(250px, 50px) rotate(90deg);
  background-color: green;
}

</style>
</head>
<body>

<p><a href="https://bugs.webkit.org/show_bug.cgi?id=24784">https://bugs.webkit.org/show_bug.cgi?id=24784</a></p>
<p>Test transform lengths with zoom. You should see two green squares below, no red.</p>

<div class="tester1 box"></div>
<div class="tester2 box"></div>

<div class="translated1 box"></div>
<div class="translated2 box"></div>

</body>
</html>

chromium/third_party/blink/web_tests/transforms/transforms-with-zoom.html