Quelle test_transform.xhtml Sprache: unbekannt

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Test SVGTransform behavior</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="matrixUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=512636">Mozilla Bug 512636</a>
<p id="display"></p>
<div id="content">

  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1" id="svg">
    <g id="g" transform="translate(10, 20)"/>
  </svg>

</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[

SimpleTest.waitForExplicitFinish();

function run() {
  var g, t, m, m2;

  g = $("g");

  t = g.transform.baseVal.getItem(0);
  m = t.matrix;

  // test that the SVGTransform correctly reflects the translate()
  checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE,
                 {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20},
                 0, "translate");

  // set the SVGTransform to be a scale()
  t.setScale(2, 3);

  // test that the matrix is live and now reflects the scale()
  checkTransform(t, SVGTransform.SVG_TRANSFORM_SCALE,
                 {a: 2, b: 0, c: 0, d: 3, e: 0, f: 0},
                 0, "scale");

  // set the SVGTransform to be a matrix()
  m2 = createMatrix(1, 2, 3, 4, 5, 6);
  t.setMatrix(m2);

  // check that setMatrix() took a copy of m
  ok(m != m2, "t.matrix identity");

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
                 {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6},
                 0, "matrix");

  m2 = {m11: 6, m12: 5, m21: 4, m22: 3, m41: 2, m42: 1};
  t.setMatrix(m2);
  checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
                 {a: 6, b: 5, c: 4, d: 3, e: 2, f: 1},
                 0, "matrix");

  // set the SVGTransform to be a translate() then convert to a matrix
  t.setTranslate(0, 10);
  m.a = 2;

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
                 {a: 2, b: 0, c: 0, d: 1, e: 0, f: 10},
                 0, "matrix");

  // If ty is not supplied it is assumed to be zero
  g.setAttribute("transform", "translate(5)");

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_TRANSLATE,
                 {a: 1, b: 0, c: 0, d: 1, e: 5, f: 0},
                 0, "transform");

  // set the SVGTransform to be a rotate()
  t.setRotate(90, 0, 0);

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_ROTATE,
                 {a: Math.cos(Math.PI / 2), b: Math.sin(Math.PI / 2),
                  c: -Math.sin(Math.PI / 2), d: Math.cos(Math.PI / 2),
                  e: 0, f: 0},
                 90, "rotate");

  // set the SVGTransform to be a skewX()
  t.setSkewX(45);

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWX,
                 {a: 1, b: 0,
                  c: Math.tan(Math.PI / 4), d: Math.tan(Math.PI / 4),
                  e: 0, f: 0},
                 45, "skewX");

  // set the SVGTransform to be a skewY()
  t.setSkewY(45);

  // test that the SVGTransform now reflects the matrix value
  checkTransform(t, SVGTransform.SVG_TRANSFORM_SKEWY,
                 {a: Math.tan(Math.PI / 4), b: Math.tan(Math.PI / 4),
                  c: 0, d: 1,
                  e: 0, f: 0},
                 45, "skewY");

  // check angle is reset after changing type
  t.setTranslate(10, 20);
  is(t.angle, 0, "Angle not reset after changing to translate type");

  // check read-only properties
  t.angle = 40;
  is(t.angle, 0, "t.angle should be read-only");
  t.type = 7;
  is(t.type, SVGTransform.SVG_TRANSFORM_TRANSLATE,
     "t.type should be read-only");
  t.matrix = m2;
  ok(t.matrix != m2 && t.matrix.b == 0, "t.matrix should be read-only");

  // check transform object identity after manipulation
  ok(t === g.transform.baseVal.getItem(0),
     "Got different transform objects after manipulation");
  ok(t.matrix === m,
     "Got different matrix objects after manipulation");

  testCreateTransform();
  testMatrixTransform();

  SimpleTest.finish();
}

function testMatrixTransform() {
  let svg = $("svg");
  const epsilon = 1 / 65536;

  let point = svg.createSVGPoint();
  point.x = 5;
  point.y = 4;
  let matrix = createMatrix(2, 0, 0, 2, 10, 10);
  let result = point.matrixTransform(matrix);
  let expected = DOMPoint.fromPoint(point).matrixTransform(matrix);
  isfuzzy(result.x, expected.x, epsilon, "matrix transformation x");
  isfuzzy(result.y, expected.y, epsilon, "matrix transformation y");

  svg.currentTranslate.x = 5;
  svg.currentTranslate.y = 4;
  result = svg.currentTranslate.matrixTransform(matrix);
  isfuzzy(result.x, expected.x, epsilon, "svg matrix transformation x");
  isfuzzy(result.y, expected.y, epsilon, "svg matrix transformation y");
  svg.currentTranslate.x = 0;
  svg.currentTranslate.y = 0;
}

function testCreateTransform() {
  let svg = $("svg");
  let t = svg.createSVGTransform();
  ok(t != svg.createSVGTransform(),
     "Got identical objects when creating new transform");
  checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
                 createMatrix(1, 0, 0, 1, 0, 0), 0, "createSVGTransform");

  let m = createMatrix(1, 2, 3, 4, 5, 6);
  t = svg.createSVGTransformFromMatrix(m);
  ok(t.matrix != m,
     "createSVGTransformFromMatrix should copy matrix not adopt it");
  m.a = 7; // Just to be sure, changing m should not affect t
  checkTransform(t, SVGTransform.SVG_TRANSFORM_MATRIX,
                 {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6},
                 0, "createSVGTransformFromMatrix");
}

function checkTransform(transform, type, matrix, angle, forWhat) {
  roughCmpMatrix(transform.matrix, matrix, forWhat);
  is(transform.type, type, `transform.type for ${forWhat}`);
  is(transform.angle, angle, `transform.angle for ${forWhat}`);
}

window.addEventListener("load", run);

]]>
</script>
</pre>
</body>
</html>

Quelle test_transform.xhtml Sprache: unbekannt

[ Dauer der Verarbeitung: 0.19 Sekunden (vorverarbeitet) ]