src/third_party/WebKit/LayoutTests/transforms/2d/computed-style-origin.html

   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
  11     }
  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%;
  20     }
  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%;
  29     }
  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;
  38     }
  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%;
  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%;
  58     }
  59
  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>
  73
  74 description("This tests computed style values for transform-origin and perspective-origin.");
  75
  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");
  82
  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);
  89
  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'");
  95
  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'");
 102
 103 debug("");
 104
 105 </script>
 106 </body>
 107 </html>