| <!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> |
