css-transforms.xhtml | Explore in Territory

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>window.enablePixelTesting = true;</script>
<script src="../../resources/js-test.js"></script>
</head>
<body>

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="circle" cx="40" cy="40" r="40" fill="green" style="-webkit-transform: scale(2, 2) translate(10px, 10px)"/>
</svg>

<svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <rect id="rect" x="40" y="40" height="100" width="100" fill="green" transform="translate(1000, 1000) rotate(90)" style="-webkit-transform: translate(100px) rotate(45deg)"/>
</svg>

<p id="description"></p>
<p>Also, to pass the test, the rectangle should be rotated with 45deg</p>
<div id="console"></div>
<script type="text/javascript">
<![CDATA[
  description("This is a test of precedency between CSS and SVG transform");


  function dumpRect(r) {
    return "[" + r.x
          + " " + r.y
          + " " + r.width 
          + " " + r.height
          + "]";
  }

  function dumpMatrix(matrix) {
    return "[" + matrix.a.toFixed(1)
          + " " + matrix.b.toFixed(1)
          + " " + matrix.c.toFixed(1)
          + " " + matrix.d.toFixed(1)
          + " " + matrix.e.toFixed(1)
          + " " + matrix.f.toFixed(1)
          + "]";
  }

  function dumpTransform(transform) {
    var transformTypes = {
      "0": "SVG_TRANSFORM_UNKNOWN",
      "1": "SVG_TRANSFORM_MATRIX",
      "2": "SVG_TRANSFORM_TRANSLATE",
      "3": "SVG_TRANSFORM_SCALE",
      "4": "SVG_TRANSFORM_ROTATE",
      "5": "SVG_TRANSFORM_SKEWX",
      "6": "SVG_TRANSFORM_SKEWY"
    };

    return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
  }

  var svg1 = document.getElementById("svg1");
  var circle = document.getElementById("circle");

  var svg2 = document.getElementById("svg2");
  var rect = document.getElementById("rect");

  debug("");
  debug("Test SVGTransformList interface");
  shouldBe("circle.transform.baseVal.numberOfItems", "0");
  shouldBeNull("circle.getAttribute('transform')");
  shouldBe("rect.transform.baseVal.numberOfItems", "2");
  shouldBeEqualToString("rect.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
  shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
  shouldBeEqualToString("dumpTransform(rect.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

  debug("");
  debug("Test SVGLocatable interface");
  shouldBeEqualToString("dumpMatrix(circle.getCTM())", "[2.0 0.0 0.0 2.0 20.0 20.0]");
  shouldBeEqualToString("dumpMatrix(circle.getScreenCTM())", "[2.0 0.0 0.0 2.0 28.0 28.0]");
  shouldBeEqualToString("dumpRect(circle.getBBox())", "[0 0 80 80]");
  
  shouldBeEqualToString("dumpMatrix(rect.getCTM())", "[0.7 0.7 -0.7 0.7 100.0 0.0]");
  shouldBeEqualToString("dumpMatrix(rect.getScreenCTM())", "[0.7 0.7 -0.7 0.7 312.0 8.0]");
  shouldBeEqualToString("dumpRect(rect.getBBox())", "[40 40 100 100]");
  
  debug("");
  debug("Test CSSMatrix");
  shouldBeEqualToString("circle.style.webkitTransform", "scale(2, 2) translate(10px, 10px)");
  shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "[2.0 0.0 0.0 2.0 20.0 20.0]");
  shouldBeEqualToString("rect.style.webkitTransform", "translate(100px) rotate(45deg)");
  shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "[0.7 0.7 -0.7 0.7 100.0 0.0]");

  debug("");
  shouldBe("dumpMatrix(new WebKitCSSMatrix(circle.style.webkitTransform))", "dumpMatrix(circle.getCTM())");
  shouldBe("dumpMatrix(new WebKitCSSMatrix(rect.style.webkitTransform))", "dumpMatrix(rect.getCTM())");

  debug("");
  successfullyParsed = true;
]]>
</script>
</body>
</html>
chromium/third_party/blink/web_tests/svg/dom/css-transforms.xhtml
