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