2008-11-20 Simon Fraser <simon.fraser@apple.com>
[WebKit-https.git] / LayoutTests / transforms / transform-value-types.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <link rel="stylesheet" href="../fast/js/resources/js-test-style.css">
5 <script src="../fast/js/resources/js-test-pre.js"></script>
6 <style id="style" media="screen">
7 .non-existent-class {
8     -webkit-transform: translate(10px)
9                        translateX(10px)
10                        translateY(10px)
11                        rotate(10deg)
12                        scale(2)
13                        scaleX(1.2)    /* test uppercase */
14                        scaley(1.2)
15                        skew(10deg,      10rad)
16                        skewX(10deg)
17                        skewy(11grad)
18                        matrix(1, 0, 0,     1, 0, 0);
19 }
20 </style>
21 </head>
22 <body>
23 <p id="description"></p>
24 <div id="console"></div>
25 <script type="text/javascript" charset="utf-8">
26
27   var stylesheet = document.getElementById("style").sheet;
28   var root = document.documentElement;
29
30   function jsWrapperClass(node)
31   {
32       if (!node)
33           return "[null]";
34       var string = Object.prototype.toString.apply(node);
35       return string.substr(8, string.length - 9);
36   }
37
38   function test(expression, className, prototypeName, constructorName)
39   {
40       if (!prototypeName)
41           prototypeName = className + "Prototype";
42       if (!constructorName)
43           constructorName = className + "Constructor";
44       shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
45       shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + prototypeName + "'");
46       shouldBe("jsWrapperClass(" + expression + ".constructor)", "'" + constructorName + "'");
47   }
48
49   var transformRule = stylesheet.cssRules.item(0).style.getPropertyCSSValue('-webkit-transform');
50   test("transformRule", "CSSValueList");
51   
52   test("transformRule[0]", "WebKitCSSTransformValue");
53
54   shouldBe("transformRule[0].operationType", "1");        // CSS_TRANSLATE
55   shouldBe("transformRule[0].cssText", "'translate(10px)'");
56
57   shouldBe("transformRule[1].operationType", "2");        // CSS_TRANSLATEX
58   shouldBe("transformRule[1].cssText", "'translateX(10px)'");
59
60   shouldBe("transformRule[2].operationType", "3");        // CSS_TRANSLATEY
61   shouldBe("transformRule[2].cssText", "'translateY(10px)'");
62
63   shouldBe("transformRule[3].operationType", "4");        // CSS_ROTATE
64   shouldBe("transformRule[3].cssText", "'rotate(10deg)'");
65
66   shouldBe("transformRule[4].operationType", "5");        // CSS_SCALE
67   shouldBe("transformRule[4].cssText", "'scale(2)'");
68
69   shouldBe("transformRule[5].operationType", "6");        // CSS_SCALEX
70   shouldBe("transformRule[5].cssText", "'scaleX(1.2)'");
71
72   shouldBe("transformRule[6].operationType", "7");        // CSS_SCALEY
73   shouldBe("transformRule[6].cssText", "'scaleY(1.2)'");
74
75   shouldBe("transformRule[7].operationType", "8");        // CSS_SKEW
76   shouldBe("transformRule[7].cssText", "'skew(10deg, 10rad)'");
77
78   shouldBe("transformRule[8].operationType", "9");        // CSS_SKEWX
79   shouldBe("transformRule[8].cssText", "'skewX(10deg)'");
80
81   shouldBe("transformRule[9].operationType", "10");        // CSS_SKEWY
82   shouldBe("transformRule[9].cssText", "'skewY(11grad)'");
83
84   shouldBe("transformRule[10].operationType", "11");        // CSS_MATRIX
85   shouldBe("transformRule[10].cssText", "'matrix(1, 0, 0, 1, 0, 0)'");
86   
87   var successfullyParsed = true;
88 </script>
89 <script src="../fast/js/resources/js-test-post.js"></script>
90 </body>
91 </html>