52 lines
883 B
HTML
52 lines
883 B
HTML
<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 {
|
|
-webkit-transform: translate(100px, 50px);
|
|
background-color: green;
|
|
}
|
|
|
|
.translated2 {
|
|
-webkit-transform-origin: 50px, 50px;
|
|
-webkit-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> |