retargeted-matching-rotation-transforms.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#actual {
  transition: transform 2s -1s linear;
}
</style>
<div id="actual"></div>
<div id="expected"></div>
<script>
function setTransform(transform) {
  actual.style.transform = transform;
}

function expectTransform(transform) {
  expected.style.transform = transform;
  assert_equals(getComputedStyle(actual).transform, getComputedStyle(expected).transform, transform);
}

test(() => {
  expectTransform('none');

  setTransform('rotateX(100deg) rotateY(100deg) rotateZ(100deg) rotate3d(1, 1, 1, 100deg)');
  expectTransform('rotateX(50deg) rotateY(50deg) rotateZ(50deg) rotate3d(1, 1, 1, 50deg)');

  setTransform('rotateX(250deg) rotateY(250deg) rotateZ(250deg) rotate3d(1, 1, 1, 250deg)');
  expectTransform('rotateX(150deg) rotateY(150deg) rotateZ(150deg) rotate3d(1, 1, 1, 150deg)');

  setTransform('rotateX(350deg) rotateY(350deg) rotateZ(350deg) rotate3d(1, 1, 1, 350deg)');
  expectTransform('rotateX(250deg) rotateY(250deg) rotateZ(250deg) rotate3d(1, 1, 1, 250deg)');
}, 'Retargeted rotation transform transitions should not decompose when rotation operations match');
</script>

chromium/third_party/blink/web_tests/transitions/retargeted-matching-rotation-transforms.html