Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / transforms / 2d / computed-style-origin.html
blob919babf365868de2003c30769a56ac62c7ad86a0
1 <html>
2 <head>
3 <style type="text/css" media="screen">
4 #test1 {
5 width: 20px;
6 height: 20px;
7 background-color: blue;
8 position: relative;
9 transform: translate(0);
10 // default transform and perspective origin
12 #test2 {
13 width: 20px;
14 height: 20px;
15 background-color: blue;
16 position: relative;
17 transform: translate(0);
18 -webkit-transform-origin: 50% 50%;
19 -webkit-perspective-origin: 50% 50%;
21 #test3 {
22 width: 20px;
23 height: 20px;
24 background-color: blue;
25 position: relative;
26 transform: translate(0);
27 -webkit-transform-origin: 0% 100%;
28 -webkit-perspective-origin: 0% 100%;
30 #test4 {
31 width: 20px;
32 height: 20px;
33 background-color: blue;
34 position: relative;
35 transform: translate(0);
36 -webkit-transform-origin: 5px 7px;
37 -webkit-perspective-origin: 5px 7px;
39 #test5 {
40 width: 10px;
41 height: 10px;
42 padding: 5px;
43 margin: 5px;
44 border: 5px solid green;
45 background-color: blue;
46 position: relative;
47 transform: translate(0);
48 -webkit-transform-origin: 50% 50%;
49 -webkit-perspective-origin: 50% 50%;
51 #test6 {
52 width: 100px;
53 height: 100px;
54 background-color: blue;
55 position: relative;
56 transform: translate(0);
57 -webkit-perspective-origin: 10% 20% 30%;
60 </style>
61 <script src="../../resources/js-test.js"></script>
62 </head>
63 <body>
64 <p id="test1"></p>
65 <p id="test2"></p>
66 <p id="test3"></p>
67 <p id="test4"></p>
68 <p id="test5"></p>
69 <p id="test6"></p>
70 <p id="description"></p>
71 <div id="console"></div>
72 <script>
74 description("This tests computed style values for transform-origin and perspective-origin.");
76 var test1 = document.getElementById("test1");
77 var test2 = document.getElementById("test2");
78 var test3 = document.getElementById("test3");
79 var test4 = document.getElementById("test4");
80 var test5 = document.getElementById("test5");
81 var test6 = document.getElementById("test6");
83 var test1Style = window.getComputedStyle(test1);
84 var test2Style = window.getComputedStyle(test2);
85 var test3Style = window.getComputedStyle(test3);
86 var test4Style = window.getComputedStyle(test4);
87 var test5Style = window.getComputedStyle(test5);
88 var test6Style = window.getComputedStyle(test6);
90 shouldBe("test1Style.webkitTransformOrigin", "'10px 10px'");
91 shouldBe("test2Style.webkitTransformOrigin", "'10px 10px'");
92 shouldBe("test3Style.webkitTransformOrigin", "'0px 20px'");
93 shouldBe("test4Style.webkitTransformOrigin", "'5px 7px'");
94 shouldBe("test5Style.webkitTransformOrigin", "'15px 15px'");
96 shouldBe("test1Style.webkitPerspectiveOrigin", "'10px 10px'");
97 shouldBe("test2Style.webkitPerspectiveOrigin", "'10px 10px'");
98 shouldBe("test3Style.webkitPerspectiveOrigin", "'0px 20px'");
99 shouldBe("test4Style.webkitPerspectiveOrigin", "'5px 7px'");
100 shouldBe("test5Style.webkitPerspectiveOrigin", "'15px 15px'");
101 shouldBe("test6Style.webkitPerspectiveOrigin", "'50px 50px'");
103 debug("");
105 </script>
106 </body>
107 </html>