transform.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
</head>
<style>
  /* regression test for failing to unzoom transform coefficients */
  body { zoom: 1.5; }
</style>
<body>
<div id='testElement'></div>

<svg>
  <g id='testSvgGroup'>
  </g>
</svg>

<script>

var testElement = document.getElementById('testElement');
var testSvgGroup = document.getElementById('testSvgGroup');
var computedStyleMap = testElement.computedStyleMap();

test(function() {
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'none');
}, 'transform is none by default');

test(function() {
  testElement.style.transform = 'translate(100px, 30%)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'translate(100px, 30%)');
}, 'transform preserves a translate value');

test(function() {
  testElement.style.transform = 'translate3d(100px, 30%, 40px)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'translate3d(100px, 30%, 40px)');
}, 'transform preserves a translate3d value');

test(function() {
  testElement.style.transform = 'rotate(90deg)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'rotate(90deg)');
}, 'transform preserves a rotate value');

test(function() {
  testElement.style.transform = 'rotate3d(0, 0, 1, 90deg)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'rotate3d(0, 0, 1, 90deg)');
}, 'transform preserves a rotate3d value');

test(function() {
  testElement.style.transform = 'scale(1, 2)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'scale(1, 2)');
}, 'transform preserves a scale value');

test(function() {
  testElement.style.transform = 'scale3d(1, 2, 3)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'scale3d(1, 2, 3)');
}, 'transform preserves a scale3d value');

test(function() {
  testElement.style.transform = 'perspective(100px)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'perspective(100px)');
}, 'transform preserves a perspective value');

test(function() {
  testElement.style.transform = 'skew(10deg, 10deg)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'skew(10deg, 10deg)');
}, 'transform preserves a skew value');

test(function() {
  testElement.style.transform = 'matrix(1, 0, 0, 2, 3, 4)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'matrix(1, 0, 0, 2, 3, 4)');
}, 'transform preserves a matrix value');

test(function() {
  testElement.style.transform = 'matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, 4, 5, 6, 1)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, 4, 5, 6, 1)');
}, 'transform preserves a matrix3d value');

test(function() {
  testElement.style.transform = 'matrix3d(1, 0, 0, 0.01, 0, 2, 0, 0.02, 0, 0, 3, 0.03, 4, 5, 6, 1)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'matrix3d(1, 0, 0, 0.01, 0, 2, 0, 0.02, 0, 0, 3, 0.03, 4, 5, 6, 1)');
}, 'transform preserves a matrix3d value with perspective');

test(function() {
  testElement.style.transform = 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 4, 5, 0, 1)';
  var result = computedStyleMap.get('transform');
  assert_equals(result.toString(), 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 4, 5, 0, 1)',
      'Computes as specified (matrix3d)');
  assert_equals(getComputedStyle(testElement).transform, 'matrix(2, 0, 0, 3, 4, 5)', 'Resolves as 2D');
}, 'transform preserves a matrix3d value which reperesents a 2d transform');

test(function() {
  // Chosen for floating-point stability as 90deg was returning episilon
  // for coefficients which should have been zero.
  testSvgGroup.setAttribute('transform', 'rotate(45, 10, 0)');
  var result = testSvgGroup.computedStyleMap().get('transform');

  // TODO(https://github.com/w3c/csswg-drafts/issues/5011):
  // Update this once there is consensus.
  assert_equals(result.toString(), "matrix(0.707107, 0.707107, -0.707107, 0.707107, 2.92893, -7.07107)");
}, 'transform serializes a three-valued rotate from an svg presentation attribute value as a matrix.');

test(function() {
  testElement.style.width = '100px';
  var anim = testElement.animate({transform: ['translate(0px, 25px) rotate(90deg)', 'translate(0px, 25px) translateX(100%)']}, 1000);
  anim.pause();
  anim.currentTime = 500;
  var result = computedStyleMap.get('transform');


  assert_equals(result.toString(), 'translate(0px, 25px) matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)',
      'Computes as the absolute part of a deferred interpolation.');
  assert_equals(getComputedStyle(testElement).transform, 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 50, 25)',
      'Resolves as the full transform, including relative parts.');
}, 'transform preserves as much of a deferred interpolation as currently possible');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/typedcssom/computedstyle/transform.html
