Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / svg / transforms / transform-origin-css-property-expected.xhtml
blobb5137c31f8bbd88bbe22eea7581926d0dcb80df5
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <style>
3 #transformOriginDiv {
4 position: absolute;
5 width: 30px;
6 height: 30px;
7 background: green;
8 transform: rotate(90deg);
10 </style>
12 <body>
13 <div id="divRoot"></div>
15 <script><![CDATA[
17 function addTransformOriginDiv(x, y, transformOrigin)
19 var div = document.createElement("div");
20 div.setAttribute("id", "transformOriginDiv");
21 div.setAttribute("style", "top: " + y + "px; left: "+ x + "px; -webkit-transform-origin: " + transformOrigin + ";");
22 document.getElementById("divRoot").appendChild(div);
25 var equivalentTransformOrigins = [
26 ["50% 50%", "center 50%", "50% center", "center", "center center"],
27 ["0% 0%", "left 0%", "0% top", "left top", "top left"],
28 ["0% 50%", "left 50%", "0% center", "left", "left center", "center left"],
29 ["100% 0%", "right 0%", "100% top", "right top", "top right"],
30 ["0% 50%", "left 50%", "0% center", "left center", "center left"],
31 ["100% 50%", "right 50%", "100% center", "right center", "center right"],
32 ["0% 100%", "left 100%", "0% bottom", "left bottom", "left bottom"],
33 ["50% 100%", "center 100%", "50% bottom", "bottom", "center bottom", "bottom center"],
34 ["100% 100%", "right 100%", "100% bottom", "right bottom", "bottom right"]
37 for (var i = 0; i < equivalentTransformOrigins.length; i++) {
38 var x = 60 + (i % 4) * 60;
39 var y = 60 + Math.floor(i / 4) * 60;
40 equivalentTransformOrigins[i].map( function(s) { addTransformOriginDiv(x, y, s); } );
43 ]]></script>
44 </body>
45 </html>