LayoutTests/compositing/hidpi-subpixel-transform-origin-expected.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>This tests transform origin with subpixel values.</title>
 <style>
 .container {
   position: absolute;
   background-color: green;
   width: 15px;
   height: 15px;
   transform: rotate(90deg) translateZ(0);
 }
 </style>
 </head>
 <body>
 <div class="container" style="left: 30px; top: 30px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 30px; top: 50px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 30px; top: 70px; transform-origin: 0px 1px;"></div>
 <div class="container" style="left: 30px; top: 90px; transform-origin: 0px 2px;"></div>
 <div class="container" style="left: 30px; top: 110px; transform-origin: 0px 3px;"></div>
 <div class="container" style="left: 30.5px; top: 130.5px; transform-origin: 0px 5px;"></div>
 <div class="container" style="left: 30.5px; top: 150.5px; transform-origin: 0px 7px;"></div>
 <div class="container" style="left: 30.5px; top: 170.5px; transform-origin: 0px 10px;"></div>
 <div class="container" style="left: 30.5px; top: 190.5px; transform-origin: 0px 13px;"></div>
 <div class="container" style="left: 30.5px; top: 210.5px; transform-origin: 0px 16px;"></div>
 <div class="container" style="left: 50.5px; top: 30.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 50.5px; top: 50.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 50.5px; top: 70.5px; transform-origin: 0.5px 1px;"></div>
 <div class="container" style="left: 50.5px; top: 90.5px; transform-origin: 0.5px 2px;"></div>
 <div class="container" style="left: 50.5px; top: 110.5px; transform-origin: 1px 3px;"></div>
 <div class="container" style="left: 51px; top: 131px; transform-origin: 1px 5px;"></div>
 <div class="container" style="left: 51px; top: 151px; transform-origin: 1px 7px;"></div>
 <div class="container" style="left: 51px; top: 171px; transform-origin: 1.5px 10px;"></div>
 <div class="container" style="left: 51px; top: 191px; transform-origin: 1.5px 13px;"></div>
 <div class="container" style="left: 51px; top: 211px; transform-origin: 2px 16px;"></div>
 <div class="container" style="left: 71px; top: 31px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 71px; top: 51px; transform-origin: 0.5px 0px;"></div>
 <div class="container" style="left: 71px; top: 71px; transform-origin: 1px 1px;"></div>
 <div class="container" style="left: 71px; top: 91px; transform-origin: 1px 2px;"></div>
 <div class="container" style="left: 71px; top: 111px; transform-origin: 1.5px 3px;"></div>
 <div class="container" style="left: 71.5px; top: 131.5px; transform-origin: 2px 5px;"></div>
 <div class="container" style="left: 71.5px; top: 151.5px; transform-origin: 2.5px 7px;"></div>
 <div class="container" style="left: 71.5px; top: 171.5px; transform-origin: 3px 10px;"></div>
 <div class="container" style="left: 71.5px; top: 191.5px; transform-origin: 3px 13px;"></div>
 <div class="container" style="left: 71.5px; top: 211.5px; transform-origin: 3.5px 16px;"></div>
 <div class="container" style="left: 91.5px; top: 31.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 91.5px; top: 51.5px; transform-origin: 0.5px 0.2px;"></div>
 <div class="container" style="left: 91.5px; top: 71.5px; transform-origin: 1px 1px;"></div>
 <div class="container" style="left: 91.5px; top: 91.5px; transform-origin: 2px 2px;"></div>
 <div class="container" style="left: 91.5px; top: 111.5px; transform-origin: 2.5px 3px;"></div>
 <div class="container" style="left: 92px; top: 132px; transform-origin: 3px 5px;"></div>
 <div class="container" style="left: 92px; top: 152px; transform-origin: 3.5px 7px;"></div>
 <div class="container" style="left: 92px; top: 172px; transform-origin: 4px 10px;"></div>
 <div class="container" style="left: 92px; top: 192px; transform-origin: 5px 13px;"></div>
 <div class="container" style="left: 92px; top: 212px; transform-origin: 5.5px 16px;"></div>
 <div class="container" style="left: 112px; top: 32px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 112px; top: 52px; transform-origin: 1px 0px;"></div>
 <div class="container" style="left: 112px; top: 72px; transform-origin: 1.5px 1px;"></div>
 <div class="container" style="left: 112px; top: 92px; transform-origin: 2.5px 2px;"></div>
 <div class="container" style="left: 112px; top: 112px; transform-origin: 3px 3px;"></div>
 <div class="container" style="left: 112.5px; top: 132.5px; transform-origin: 4px 5px;"></div>
 <div class="container" style="left: 112.5px; top: 152.5px; transform-origin: 5px 7px;"></div>
 <div class="container" style="left: 112.5px; top: 172.5px; transform-origin: 5.5px 10px;"></div>
 <div class="container" style="left: 112.5px; top: 192.5px; transform-origin: 6.5px 13px;"></div>
 <div class="container" style="left: 112.5px; top: 212.5px; transform-origin: 7px 16px;"></div>
 <div class="container" style="left: 132.5px; top: 32.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 132.5px; top: 52.5px; transform-origin: 1px 0px;"></div>
 <div class="container" style="left: 132.5px; top: 72.5px; transform-origin: 2px 1px;"></div>
 <div class="container" style="left: 132.5px; top: 92.5px; transform-origin: 3px 2px;"></div>
 <div class="container" style="left: 132.5px; top: 112.5px; transform-origin: 4px 3px;"></div>
 <div class="container" style="left: 133px; top: 133px; transform-origin: 5px 5px;"></div>
 <div class="container" style="left: 133px; top: 153px; transform-origin: 6px 7px;"></div>
 <div class="container" style="left: 133px; top: 173px; transform-origin: 7px 10px;"></div>
 <div class="container" style="left: 133px; top: 193px; transform-origin: 8px 13px;"></div>
 <div class="container" style="left: 133px; top: 213px; transform-origin: 9px 16px;"></div>
 <div class="container" style="left: 153px; top: 33px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 153px; top: 53px; transform-origin: 1px 0.2px;"></div>
 <div class="container" style="left: 153px; top: 73px; transform-origin: 2.5px 1px;"></div>
 <div class="container" style="left: 153px; top: 93px; transform-origin: 3.5px 2px;"></div>
 <div class="container" style="left: 153px; top: 113px; transform-origin: 5px 3px;"></div>
 <div class="container" style="left: 153.5px; top: 133.5px; transform-origin: 6px 5px;"></div>
 <div class="container" style="left: 153.5px; top: 153.5px; transform-origin: 7px 7px;"></div>
 <div class="container" style="left: 153.5px; top: 173.5px; transform-origin: 8.5px 10px;"></div>
 <div class="container" style="left: 153.5px; top: 193.5px; transform-origin: 9.5px 13px;"></div>
 <div class="container" style="left: 153.5px; top: 213.5px; transform-origin: 11px 16px;"></div>
 <div class="container" style="left: 173.5px; top: 33.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 173.5px; top: 53.5px; transform-origin: 1.5px 0.2px;"></div>
 <div class="container" style="left: 173.5px; top: 73.5px; transform-origin: 3px 1px;"></div>
 <div class="container" style="left: 173.5px; top: 93.5px; transform-origin: 4px 2px;"></div>
 <div class="container" style="left: 173.5px; top: 113.5px; transform-origin: 5.5px 3px;"></div>
 <div class="container" style="left: 174px; top: 134px; transform-origin: 7px 5px;"></div>
 <div class="container" style="left: 174px; top: 154px; transform-origin: 8.5px 7px;"></div>
 <div class="container" style="left: 174px; top: 174px; transform-origin: 10px 10px;"></div>
 <div class="container" style="left: 174px; top: 194px; transform-origin: 11px 13px;"></div>
 <div class="container" style="left: 174px; top: 214px; transform-origin: 12.5px 16px;"></div>
 <div class="container" style="left: 194px; top: 34px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 194px; top: 54px; transform-origin: 1.5px 0px;"></div>
 <div class="container" style="left: 194px; top: 74px; transform-origin: 3px 1px;"></div>
 <div class="container" style="left: 194px; top: 94px; transform-origin: 5px 2px;"></div>
 <div class="container" style="left: 194px; top: 114px; transform-origin: 6.5px 3px;"></div>
 <div class="container" style="left: 194.5px; top: 134.5px; transform-origin: 8px 5px;"></div>
 <div class="container" style="left: 194.5px; top: 154.5px; transform-origin: 9.5px 7px;"></div>
 <div class="container" style="left: 194.5px; top: 174.5px; transform-origin: 11px 10px;"></div>
 <div class="container" style="left: 194.5px; top: 194.5px; transform-origin: 13px 13px;"></div>
 <div class="container" style="left: 194.5px; top: 214.5px; transform-origin: 14.5px 16px;"></div>
 <div class="container" style="left: 214.5px; top: 34.5px; transform-origin: 0px 0px;"></div>
 <div class="container" style="left: 214.5px; top: 54.5px; transform-origin: 2px 0px;"></div>
 <div class="container" style="left: 214.5px; top: 74.5px; transform-origin: 3.5px 1px;"></div>
 <div class="container" style="left: 214.5px; top: 94.5px; transform-origin: 5.5px 2px;"></div>
 <div class="container" style="left: 214.5px; top: 114.5px; transform-origin: 7px 3px;"></div>
 <div class="container" style="left: 215px; top: 135px; transform-origin: 9px 5px;"></div>
 <div class="container" style="left: 215px; top: 155px; transform-origin: 11px 7px;"></div>
 <div class="container" style="left: 215px; top: 175px; transform-origin: 12.5px 10px;"></div>
 <div class="container" style="left: 215px; top: 195px; transform-origin: 14.5px 13px;"></div>
 <div class="container" style="left: 215px; top: 215px; transform-origin: 16px 16px;"></div>

 </body></html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>This tests transform origin with subpixel values.</title>
	<style>
	.container {
	position: absolute;
	background-color: green;
	width: 15px;
	height: 15px;
	transform: rotate(90deg) translateZ(0);
	}
	</style>
	</head>
	<body>
	<div class="container" style="left: 30px; top: 30px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 30px; top: 50px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 30px; top: 70px; transform-origin: 0px 1px;"></div>
	<div class="container" style="left: 30px; top: 90px; transform-origin: 0px 2px;"></div>
	<div class="container" style="left: 30px; top: 110px; transform-origin: 0px 3px;"></div>
	<div class="container" style="left: 30.5px; top: 130.5px; transform-origin: 0px 5px;"></div>
	<div class="container" style="left: 30.5px; top: 150.5px; transform-origin: 0px 7px;"></div>
	<div class="container" style="left: 30.5px; top: 170.5px; transform-origin: 0px 10px;"></div>
	<div class="container" style="left: 30.5px; top: 190.5px; transform-origin: 0px 13px;"></div>
	<div class="container" style="left: 30.5px; top: 210.5px; transform-origin: 0px 16px;"></div>
	<div class="container" style="left: 50.5px; top: 30.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 50.5px; top: 50.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 50.5px; top: 70.5px; transform-origin: 0.5px 1px;"></div>
	<div class="container" style="left: 50.5px; top: 90.5px; transform-origin: 0.5px 2px;"></div>
	<div class="container" style="left: 50.5px; top: 110.5px; transform-origin: 1px 3px;"></div>
	<div class="container" style="left: 51px; top: 131px; transform-origin: 1px 5px;"></div>
	<div class="container" style="left: 51px; top: 151px; transform-origin: 1px 7px;"></div>
	<div class="container" style="left: 51px; top: 171px; transform-origin: 1.5px 10px;"></div>
	<div class="container" style="left: 51px; top: 191px; transform-origin: 1.5px 13px;"></div>
	<div class="container" style="left: 51px; top: 211px; transform-origin: 2px 16px;"></div>
	<div class="container" style="left: 71px; top: 31px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 71px; top: 51px; transform-origin: 0.5px 0px;"></div>
	<div class="container" style="left: 71px; top: 71px; transform-origin: 1px 1px;"></div>
	<div class="container" style="left: 71px; top: 91px; transform-origin: 1px 2px;"></div>
	<div class="container" style="left: 71px; top: 111px; transform-origin: 1.5px 3px;"></div>
	<div class="container" style="left: 71.5px; top: 131.5px; transform-origin: 2px 5px;"></div>
	<div class="container" style="left: 71.5px; top: 151.5px; transform-origin: 2.5px 7px;"></div>
	<div class="container" style="left: 71.5px; top: 171.5px; transform-origin: 3px 10px;"></div>
	<div class="container" style="left: 71.5px; top: 191.5px; transform-origin: 3px 13px;"></div>
	<div class="container" style="left: 71.5px; top: 211.5px; transform-origin: 3.5px 16px;"></div>
	<div class="container" style="left: 91.5px; top: 31.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 91.5px; top: 51.5px; transform-origin: 0.5px 0.2px;"></div>
	<div class="container" style="left: 91.5px; top: 71.5px; transform-origin: 1px 1px;"></div>
	<div class="container" style="left: 91.5px; top: 91.5px; transform-origin: 2px 2px;"></div>
	<div class="container" style="left: 91.5px; top: 111.5px; transform-origin: 2.5px 3px;"></div>
	<div class="container" style="left: 92px; top: 132px; transform-origin: 3px 5px;"></div>
	<div class="container" style="left: 92px; top: 152px; transform-origin: 3.5px 7px;"></div>
	<div class="container" style="left: 92px; top: 172px; transform-origin: 4px 10px;"></div>
	<div class="container" style="left: 92px; top: 192px; transform-origin: 5px 13px;"></div>
	<div class="container" style="left: 92px; top: 212px; transform-origin: 5.5px 16px;"></div>
	<div class="container" style="left: 112px; top: 32px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 112px; top: 52px; transform-origin: 1px 0px;"></div>
	<div class="container" style="left: 112px; top: 72px; transform-origin: 1.5px 1px;"></div>
	<div class="container" style="left: 112px; top: 92px; transform-origin: 2.5px 2px;"></div>
	<div class="container" style="left: 112px; top: 112px; transform-origin: 3px 3px;"></div>
	<div class="container" style="left: 112.5px; top: 132.5px; transform-origin: 4px 5px;"></div>
	<div class="container" style="left: 112.5px; top: 152.5px; transform-origin: 5px 7px;"></div>
	<div class="container" style="left: 112.5px; top: 172.5px; transform-origin: 5.5px 10px;"></div>
	<div class="container" style="left: 112.5px; top: 192.5px; transform-origin: 6.5px 13px;"></div>
	<div class="container" style="left: 112.5px; top: 212.5px; transform-origin: 7px 16px;"></div>
	<div class="container" style="left: 132.5px; top: 32.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 132.5px; top: 52.5px; transform-origin: 1px 0px;"></div>
	<div class="container" style="left: 132.5px; top: 72.5px; transform-origin: 2px 1px;"></div>
	<div class="container" style="left: 132.5px; top: 92.5px; transform-origin: 3px 2px;"></div>
	<div class="container" style="left: 132.5px; top: 112.5px; transform-origin: 4px 3px;"></div>
	<div class="container" style="left: 133px; top: 133px; transform-origin: 5px 5px;"></div>
	<div class="container" style="left: 133px; top: 153px; transform-origin: 6px 7px;"></div>
	<div class="container" style="left: 133px; top: 173px; transform-origin: 7px 10px;"></div>
	<div class="container" style="left: 133px; top: 193px; transform-origin: 8px 13px;"></div>
	<div class="container" style="left: 133px; top: 213px; transform-origin: 9px 16px;"></div>
	<div class="container" style="left: 153px; top: 33px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 153px; top: 53px; transform-origin: 1px 0.2px;"></div>
	<div class="container" style="left: 153px; top: 73px; transform-origin: 2.5px 1px;"></div>
	<div class="container" style="left: 153px; top: 93px; transform-origin: 3.5px 2px;"></div>
	<div class="container" style="left: 153px; top: 113px; transform-origin: 5px 3px;"></div>
	<div class="container" style="left: 153.5px; top: 133.5px; transform-origin: 6px 5px;"></div>
	<div class="container" style="left: 153.5px; top: 153.5px; transform-origin: 7px 7px;"></div>
	<div class="container" style="left: 153.5px; top: 173.5px; transform-origin: 8.5px 10px;"></div>
	<div class="container" style="left: 153.5px; top: 193.5px; transform-origin: 9.5px 13px;"></div>
	<div class="container" style="left: 153.5px; top: 213.5px; transform-origin: 11px 16px;"></div>
	<div class="container" style="left: 173.5px; top: 33.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 173.5px; top: 53.5px; transform-origin: 1.5px 0.2px;"></div>
	<div class="container" style="left: 173.5px; top: 73.5px; transform-origin: 3px 1px;"></div>
	<div class="container" style="left: 173.5px; top: 93.5px; transform-origin: 4px 2px;"></div>
	<div class="container" style="left: 173.5px; top: 113.5px; transform-origin: 5.5px 3px;"></div>
	<div class="container" style="left: 174px; top: 134px; transform-origin: 7px 5px;"></div>
	<div class="container" style="left: 174px; top: 154px; transform-origin: 8.5px 7px;"></div>
	<div class="container" style="left: 174px; top: 174px; transform-origin: 10px 10px;"></div>
	<div class="container" style="left: 174px; top: 194px; transform-origin: 11px 13px;"></div>
	<div class="container" style="left: 174px; top: 214px; transform-origin: 12.5px 16px;"></div>
	<div class="container" style="left: 194px; top: 34px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 194px; top: 54px; transform-origin: 1.5px 0px;"></div>
	<div class="container" style="left: 194px; top: 74px; transform-origin: 3px 1px;"></div>
	<div class="container" style="left: 194px; top: 94px; transform-origin: 5px 2px;"></div>
	<div class="container" style="left: 194px; top: 114px; transform-origin: 6.5px 3px;"></div>
	<div class="container" style="left: 194.5px; top: 134.5px; transform-origin: 8px 5px;"></div>
	<div class="container" style="left: 194.5px; top: 154.5px; transform-origin: 9.5px 7px;"></div>
	<div class="container" style="left: 194.5px; top: 174.5px; transform-origin: 11px 10px;"></div>
	<div class="container" style="left: 194.5px; top: 194.5px; transform-origin: 13px 13px;"></div>
	<div class="container" style="left: 194.5px; top: 214.5px; transform-origin: 14.5px 16px;"></div>
	<div class="container" style="left: 214.5px; top: 34.5px; transform-origin: 0px 0px;"></div>
	<div class="container" style="left: 214.5px; top: 54.5px; transform-origin: 2px 0px;"></div>
	<div class="container" style="left: 214.5px; top: 74.5px; transform-origin: 3.5px 1px;"></div>
	<div class="container" style="left: 214.5px; top: 94.5px; transform-origin: 5.5px 2px;"></div>
	<div class="container" style="left: 214.5px; top: 114.5px; transform-origin: 7px 3px;"></div>
	<div class="container" style="left: 215px; top: 135px; transform-origin: 9px 5px;"></div>
	<div class="container" style="left: 215px; top: 155px; transform-origin: 11px 7px;"></div>
	<div class="container" style="left: 215px; top: 175px; transform-origin: 12.5px 10px;"></div>
	<div class="container" style="left: 215px; top: 195px; transform-origin: 14.5px 13px;"></div>
	<div class="container" style="left: 215px; top: 215px; transform-origin: 16px 16px;"></div>

	</body></html>