Google Git
Sign in
webkit / WebKit / ff9c6e48f3add2399713e28a9d952b7902b9cd58 / . / LayoutTests / compositing / hidpi-subpixel-transform-origin-expected.html
blob: e42319c45122ac4c75289114be45b74066667630 [file] [log] [blame]
zalan@apple.com7fd51b22016-08-17 03:18:21 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<title>This tests transform origin with subpixel values.</title>
5<style>
6.container {
7 position: absolute;
8 background-color: green;
9 width: 15px;
10 height: 15px;
11 transform: rotate(90deg) translateZ(0);
12}
13</style>
14</head>
15<body>
16<div class="container" style="left: 30px; top: 30px; transform-origin: 0px 0px;"></div>
17<div class="container" style="left: 30px; top: 50px; transform-origin: 0px 0px;"></div>
18<div class="container" style="left: 30px; top: 70px; transform-origin: 0px 1px;"></div>
19<div class="container" style="left: 30px; top: 90px; transform-origin: 0px 2px;"></div>
20<div class="container" style="left: 30px; top: 110px; transform-origin: 0px 3px;"></div>
21<div class="container" style="left: 30.5px; top: 130.5px; transform-origin: 0px 5px;"></div>
22<div class="container" style="left: 30.5px; top: 150.5px; transform-origin: 0px 7px;"></div>
23<div class="container" style="left: 30.5px; top: 170.5px; transform-origin: 0px 10px;"></div>
24<div class="container" style="left: 30.5px; top: 190.5px; transform-origin: 0px 13px;"></div>
25<div class="container" style="left: 30.5px; top: 210.5px; transform-origin: 0px 16px;"></div>
26<div class="container" style="left: 50.5px; top: 30.5px; transform-origin: 0px 0px;"></div>
27<div class="container" style="left: 50.5px; top: 50.5px; transform-origin: 0px 0px;"></div>
28<div class="container" style="left: 50.5px; top: 70.5px; transform-origin: 0.5px 1px;"></div>
29<div class="container" style="left: 50.5px; top: 90.5px; transform-origin: 0.5px 2px;"></div>
30<div class="container" style="left: 50.5px; top: 110.5px; transform-origin: 1px 3px;"></div>
31<div class="container" style="left: 51px; top: 131px; transform-origin: 1px 5px;"></div>
32<div class="container" style="left: 51px; top: 151px; transform-origin: 1px 7px;"></div>
33<div class="container" style="left: 51px; top: 171px; transform-origin: 1.5px 10px;"></div>
34<div class="container" style="left: 51px; top: 191px; transform-origin: 1.5px 13px;"></div>
35<div class="container" style="left: 51px; top: 211px; transform-origin: 2px 16px;"></div>
36<div class="container" style="left: 71px; top: 31px; transform-origin: 0px 0px;"></div>
37<div class="container" style="left: 71px; top: 51px; transform-origin: 0.5px 0px;"></div>
38<div class="container" style="left: 71px; top: 71px; transform-origin: 1px 1px;"></div>
39<div class="container" style="left: 71px; top: 91px; transform-origin: 1px 2px;"></div>
40<div class="container" style="left: 71px; top: 111px; transform-origin: 1.5px 3px;"></div>
41<div class="container" style="left: 71.5px; top: 131.5px; transform-origin: 2px 5px;"></div>
42<div class="container" style="left: 71.5px; top: 151.5px; transform-origin: 2.5px 7px;"></div>
43<div class="container" style="left: 71.5px; top: 171.5px; transform-origin: 3px 10px;"></div>
44<div class="container" style="left: 71.5px; top: 191.5px; transform-origin: 3px 13px;"></div>
45<div class="container" style="left: 71.5px; top: 211.5px; transform-origin: 3.5px 16px;"></div>
46<div class="container" style="left: 91.5px; top: 31.5px; transform-origin: 0px 0px;"></div>
47<div class="container" style="left: 91.5px; top: 51.5px; transform-origin: 0.5px 0.2px;"></div>
48<div class="container" style="left: 91.5px; top: 71.5px; transform-origin: 1px 1px;"></div>
49<div class="container" style="left: 91.5px; top: 91.5px; transform-origin: 2px 2px;"></div>
50<div class="container" style="left: 91.5px; top: 111.5px; transform-origin: 2.5px 3px;"></div>
51<div class="container" style="left: 92px; top: 132px; transform-origin: 3px 5px;"></div>
52<div class="container" style="left: 92px; top: 152px; transform-origin: 3.5px 7px;"></div>
53<div class="container" style="left: 92px; top: 172px; transform-origin: 4px 10px;"></div>
54<div class="container" style="left: 92px; top: 192px; transform-origin: 5px 13px;"></div>
55<div class="container" style="left: 92px; top: 212px; transform-origin: 5.5px 16px;"></div>
56<div class="container" style="left: 112px; top: 32px; transform-origin: 0px 0px;"></div>
57<div class="container" style="left: 112px; top: 52px; transform-origin: 1px 0px;"></div>
58<div class="container" style="left: 112px; top: 72px; transform-origin: 1.5px 1px;"></div>
59<div class="container" style="left: 112px; top: 92px; transform-origin: 2.5px 2px;"></div>
60<div class="container" style="left: 112px; top: 112px; transform-origin: 3px 3px;"></div>
61<div class="container" style="left: 112.5px; top: 132.5px; transform-origin: 4px 5px;"></div>
62<div class="container" style="left: 112.5px; top: 152.5px; transform-origin: 5px 7px;"></div>
63<div class="container" style="left: 112.5px; top: 172.5px; transform-origin: 5.5px 10px;"></div>
64<div class="container" style="left: 112.5px; top: 192.5px; transform-origin: 6.5px 13px;"></div>
65<div class="container" style="left: 112.5px; top: 212.5px; transform-origin: 7px 16px;"></div>
66<div class="container" style="left: 132.5px; top: 32.5px; transform-origin: 0px 0px;"></div>
67<div class="container" style="left: 132.5px; top: 52.5px; transform-origin: 1px 0px;"></div>
68<div class="container" style="left: 132.5px; top: 72.5px; transform-origin: 2px 1px;"></div>
69<div class="container" style="left: 132.5px; top: 92.5px; transform-origin: 3px 2px;"></div>
70<div class="container" style="left: 132.5px; top: 112.5px; transform-origin: 4px 3px;"></div>
71<div class="container" style="left: 133px; top: 133px; transform-origin: 5px 5px;"></div>
72<div class="container" style="left: 133px; top: 153px; transform-origin: 6px 7px;"></div>
73<div class="container" style="left: 133px; top: 173px; transform-origin: 7px 10px;"></div>
74<div class="container" style="left: 133px; top: 193px; transform-origin: 8px 13px;"></div>
75<div class="container" style="left: 133px; top: 213px; transform-origin: 9px 16px;"></div>
76<div class="container" style="left: 153px; top: 33px; transform-origin: 0px 0px;"></div>
77<div class="container" style="left: 153px; top: 53px; transform-origin: 1px 0.2px;"></div>
78<div class="container" style="left: 153px; top: 73px; transform-origin: 2.5px 1px;"></div>
79<div class="container" style="left: 153px; top: 93px; transform-origin: 3.5px 2px;"></div>
80<div class="container" style="left: 153px; top: 113px; transform-origin: 5px 3px;"></div>
81<div class="container" style="left: 153.5px; top: 133.5px; transform-origin: 6px 5px;"></div>
82<div class="container" style="left: 153.5px; top: 153.5px; transform-origin: 7px 7px;"></div>
83<div class="container" style="left: 153.5px; top: 173.5px; transform-origin: 8.5px 10px;"></div>
84<div class="container" style="left: 153.5px; top: 193.5px; transform-origin: 9.5px 13px;"></div>
85<div class="container" style="left: 153.5px; top: 213.5px; transform-origin: 11px 16px;"></div>
86<div class="container" style="left: 173.5px; top: 33.5px; transform-origin: 0px 0px;"></div>
87<div class="container" style="left: 173.5px; top: 53.5px; transform-origin: 1.5px 0.2px;"></div>
88<div class="container" style="left: 173.5px; top: 73.5px; transform-origin: 3px 1px;"></div>
89<div class="container" style="left: 173.5px; top: 93.5px; transform-origin: 4px 2px;"></div>
90<div class="container" style="left: 173.5px; top: 113.5px; transform-origin: 5.5px 3px;"></div>
91<div class="container" style="left: 174px; top: 134px; transform-origin: 7px 5px;"></div>
92<div class="container" style="left: 174px; top: 154px; transform-origin: 8.5px 7px;"></div>
93<div class="container" style="left: 174px; top: 174px; transform-origin: 10px 10px;"></div>
94<div class="container" style="left: 174px; top: 194px; transform-origin: 11px 13px;"></div>
95<div class="container" style="left: 174px; top: 214px; transform-origin: 12.5px 16px;"></div>
96<div class="container" style="left: 194px; top: 34px; transform-origin: 0px 0px;"></div>
97<div class="container" style="left: 194px; top: 54px; transform-origin: 1.5px 0px;"></div>
98<div class="container" style="left: 194px; top: 74px; transform-origin: 3px 1px;"></div>
99<div class="container" style="left: 194px; top: 94px; transform-origin: 5px 2px;"></div>
100<div class="container" style="left: 194px; top: 114px; transform-origin: 6.5px 3px;"></div>
101<div class="container" style="left: 194.5px; top: 134.5px; transform-origin: 8px 5px;"></div>
102<div class="container" style="left: 194.5px; top: 154.5px; transform-origin: 9.5px 7px;"></div>
103<div class="container" style="left: 194.5px; top: 174.5px; transform-origin: 11px 10px;"></div>
104<div class="container" style="left: 194.5px; top: 194.5px; transform-origin: 13px 13px;"></div>
105<div class="container" style="left: 194.5px; top: 214.5px; transform-origin: 14.5px 16px;"></div>
106<div class="container" style="left: 214.5px; top: 34.5px; transform-origin: 0px 0px;"></div>
107<div class="container" style="left: 214.5px; top: 54.5px; transform-origin: 2px 0px;"></div>
108<div class="container" style="left: 214.5px; top: 74.5px; transform-origin: 3.5px 1px;"></div>
109<div class="container" style="left: 214.5px; top: 94.5px; transform-origin: 5.5px 2px;"></div>
110<div class="container" style="left: 214.5px; top: 114.5px; transform-origin: 7px 3px;"></div>
111<div class="container" style="left: 215px; top: 135px; transform-origin: 9px 5px;"></div>
112<div class="container" style="left: 215px; top: 155px; transform-origin: 11px 7px;"></div>
113<div class="container" style="left: 215px; top: 175px; transform-origin: 12.5px 10px;"></div>
114<div class="container" style="left: 215px; top: 195px; transform-origin: 14.5px 13px;"></div>
115<div class="container" style="left: 215px; top: 215px; transform-origin: 16px 16px;"></div>
116
117</body></html>