third_party/WebKit/LayoutTests/svg/dynamic-updates/SVG-dynamic-css-transform.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="resources/SVGTestCase.js"></script>
   5 <script src="../../resources/js-test.js"></script>
   6 <style type="text/css" media="screen">
   7   .column {
   8     margin: 10px;
   9     display: inline-block;
  10     vertical-align: top;
  11   }
  12   .container {
  13     position: relative;
  14     height: 200px;
  15     width: 200px;
  16     margin: 10px;
  17     background-color: silver;
  18     border: 1px solid black;
  19   }
  20   #wrapper {
  21       position: relative;
  22       top: 0;
  23       left: 0;
  24       height: 60px;
  25       width: 60px;
  26       -webkit-transform-origin: top left; /* to match SVG */
  27   }
  28 </style>
  29 </head>
  30 <body>
  31 <div class="column">
  32   <div class="container">
  33     <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
  34       <rect id="rect1" x="0" y="0" height="60" width="60" fill="green"/>
  35     </svg>
  36   </div>
  37   <div class="container">
  38     <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
  39       <rect id="rect2" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
  40     </svg>
  41   </div>
  42 </div>
  43 <div class="column">
  44   <div class="container">
  45     <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
  46       <rect id="rect3" x="0" y="0" height="60" width="60" fill="green"/>
  47     </svg>
  48   </div>
  49   <div class="container">
  50     <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
  51       <rect id="rect4" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
  52     </svg>
  53   </div>
  54 </div>
  55 <div class="column">
  56   <div class="container">
  57     <div id="wrapper">
  58       <svg id="svg3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
  59         <rect id="rect5" x="0" y="0" height="60" width="60" fill="green"/>
  60       </svg>
  61     </div>
  62   </div>
  63 </div>
  64 <h1>SVG 1.1 dynamic update tests</h1>
  65 <p id="description"></p>
  66 <p>Also, to pass the test, the rectangles should be rotated with 45deg</p>
  67 <div id="console"></div>
  68 <script>
  69 // [Expected rendering result] 'Test passed' message - and a series of PASS messages
  70
  71 description("Tests dynamic updates of the '-webkit-transform' on SVG element");
  72 //createSVGTestCase();
  73
  74 function dumpRect(r) {
  75   return "[" + r.x
  76         + " " + r.y
  77         + " " + r.width
  78         + " " + r.height
  79         + "]";
  80 }
  81
  82 function dumpMatrix(matrix) {
  83   return "[" + matrix.a.toFixed(1)
  84         + " " + matrix.b.toFixed(1)
  85         + " " + matrix.c.toFixed(1)
  86         + " " + matrix.d.toFixed(1)
  87         + " " + matrix.e.toFixed(1)
  88         + " " + matrix.f.toFixed(1)
  89         + "]";
  90 }
  91
  92 function dumpTransform(transform) {
  93   var transformTypes = {
  94     "0": "SVG_TRANSFORM_UNKNOWN",
  95     "1": "SVG_TRANSFORM_MATRIX",
  96     "2": "SVG_TRANSFORM_TRANSLATE",
  97     "3": "SVG_TRANSFORM_SCALE",
  98     "4": "SVG_TRANSFORM_ROTATE",
  99     "5": "SVG_TRANSFORM_SKEWX",
 100     "6": "SVG_TRANSFORM_SKEWY"
 101   };
 102
 103   return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
 104 }
 105
 106 var rect1 = document.getElementById("rect1");
 107 var rect2 = document.getElementById("rect2");
 108 var rect3 = document.getElementById("rect3");
 109 var rect4 = document.getElementById("rect4");
 110 var rect5 = document.getElementById("rect5");
 111
 112 var wrapper = document.getElementById("wrapper");
 113
 114 debug("");
 115 debug("Transform via style attribute");
 116 rect1.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");
 117
 118 shouldBeEqualToString("rect1.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 119 shouldBeEqualToString("dumpMatrix(rect1.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 120 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 121 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "dumpMatrix(rect1.getCTM())");
 122 shouldBe("rect1.transform.baseVal.numberOfItems", "0");
 123 shouldBeNull("rect1.getAttribute('transform')");
 124
 125
 126 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[0.0 1.0 -1.0 0.0 1000.0 1000.0]");
 127 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
 128
 129 rect2.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");
 130
 131 shouldBeEqualToString("rect2.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 132 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 133 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 134 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "dumpMatrix(rect2.getCTM())");
 135 shouldBe("rect2.transform.baseVal.numberOfItems", "2");
 136 shouldBeEqualToString("rect2.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
 137 shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
 138 shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
 139
 140 debug("");
 141 debug("Transform via CSS");
 142 rect3.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
 143
 144 shouldBeEqualToString("rect3.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 145 shouldBeEqualToString("dumpMatrix(rect3.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 146 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 147 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "dumpMatrix(rect3.getCTM())");
 148 shouldBe("rect3.transform.baseVal.numberOfItems", "0");
 149 shouldBeNull("rect3.getAttribute('transform')");
 150
 151
 152 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 153 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 154
 155 rect4.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
 156
 157 shouldBeEqualToString("rect4.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 158 shouldBeEqualToString("dumpMatrix(rect4.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 159 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 160 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "dumpMatrix(rect4.getCTM())");
 161 shouldBe("rect4.transform.baseVal.numberOfItems", "2");
 162 shouldBeEqualToString("rect4.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
 163 shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
 164 shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");
 165
 166 debug("");
 167 debug("Transform on wrapper div");
 168 wrapper.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
 169 shouldBeEqualToString("rect5.style.transform", "");
 170 shouldBeEqualToString("dumpMatrix(rect5.getCTM())", "[1.0 0.0 0.0 1.0 0.0 0.0]");
 171 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
 172 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "dumpMatrix(rect5.getCTM())");
 173 shouldBe("rect5.transform.baseVal.numberOfItems", "0");
 174 shouldBeNull("rect5.getAttribute('transform')");
 175
 176 debug("");
 177 var successfullyParsed = true;
 178 afterTest();
 179 </script>
 180 </body>
 181 </html>