SVG-dynamic-css-transform.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="resources/SVGTestCase.js"></script>
<script src="../../resources/js-test.js"></script>
<style type="text/css" media="screen">
  .column {
    margin: 10px;
    display: inline-block;
    vertical-align: top;
  }
  .container {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 10px;
    background-color: silver;
    border: 1px solid black;
  }
  #wrapper {
      position: relative;
      top: 0;
      left: 0;
      height: 60px;
      width: 60px;
      -webkit-transform-origin: top left; /* to match SVG */
  }
</style>
</head>
<body>
<div class="column">
  <div class="container">
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
      <rect id="rect1" x="0" y="0" height="60" width="60" fill="green"/>
    </svg>
  </div>
  <div class="container">
    <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
      <rect id="rect2" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
    </svg>
  </div>
</div>
<div class="column">
  <div class="container">
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
      <rect id="rect3" x="0" y="0" height="60" width="60" fill="green"/>
    </svg>
  </div>
  <div class="container">
    <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
      <rect id="rect4" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
    </svg>
  </div>
</div>
<div class="column">
  <div class="container">
    <div id="wrapper">
      <svg id="svg3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
        <rect id="rect5" x="0" y="0" height="60" width="60" fill="green"/>
      </svg>
    </div>
  </div>
</div>
<h1>SVG 1.1 dynamic update tests</h1>
<p id="description"></p>
<p>Also, to pass the test, the rectangles should be rotated with 45deg</p>
<div id="console"></div>
<script>
// [Expected rendering result] 'Test passed' message - and a series of PASS messages

description("Tests dynamic updates of the '-webkit-transform' on SVG element");
//createSVGTestCase();

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 rect1 = document.getElementById("rect1");
var rect2 = document.getElementById("rect2");
var rect3 = document.getElementById("rect3");
var rect4 = document.getElementById("rect4");
var rect5 = document.getElementById("rect5");

var wrapper = document.getElementById("wrapper");

debug("");
debug("Transform via style attribute");
rect1.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

shouldBeEqualToString("rect1.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect1.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "dumpMatrix(rect1.getCTM())");
shouldBe("rect1.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect1.getAttribute('transform')");


shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[0.0 1.0 -1.0 0.0 1000.0 1000.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");

rect2.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

shouldBeEqualToString("rect2.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "dumpMatrix(rect2.getCTM())");
shouldBe("rect2.transform.baseVal.numberOfItems", "2");
shouldBeEqualToString("rect2.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

debug("");
debug("Transform via CSS");
rect3.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

shouldBeEqualToString("rect3.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect3.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "dumpMatrix(rect3.getCTM())");
shouldBe("rect3.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect3.getAttribute('transform')");


shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");

rect4.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

shouldBeEqualToString("rect4.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
shouldBeEqualToString("dumpMatrix(rect4.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "dumpMatrix(rect4.getCTM())");
shouldBe("rect4.transform.baseVal.numberOfItems", "2");
shouldBeEqualToString("rect4.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

debug("");
debug("Transform on wrapper div");
wrapper.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
shouldBeEqualToString("rect5.style.transform", "");
shouldBeEqualToString("dumpMatrix(rect5.getCTM())", "[1.0 0.0 0.0 1.0 0.0 0.0]");
shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
shouldBe("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "dumpMatrix(rect5.getCTM())");
shouldBe("rect5.transform.baseVal.numberOfItems", "0");
shouldBeNull("rect5.getAttribute('transform')");

debug("");
var successfullyParsed = true;
afterTest();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/svg/dynamic-updates/SVG-dynamic-css-transform.html
