Skip to content

GitLab

T
tangled
Commit 81d29b0d authored by George Steel's avatar George Steel Committed by Commit Bot
Browse files
Options

Add tests for true computed value of transform interpolations 

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
https://github.com/w3c/csswg-drafts/issues/4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}
parent d0c9d517
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 0 deletions
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-computed-value.html 0 → 100644
View file @ 81d29b0d
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions">
<meta name="assert" content="transform gives the correct computed values when interpolated">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<body>
<script>
function interpolation_test(from, to, expected_50) {
test(t => {
let div = createDiv(t);
let anim = div.animate({transform: [from, to]}, 2000);
anim.pause();
anim.currentTime = 1000;
let halfway = div.computedStyleMap().get('transform').toString();
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to computedStyleMap.");
test(t => {
let div = createDiv(t);
div.style.zoom = 1.25;
let anim = div.animate({transform: [from, to]}, 2000);
anim.pause();
anim.currentTime = 1000;
let halfway = div.computedStyleMap().get('transform').toString();
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to computedStyleMap with zoom active.");
test(t => {
let div = createDiv(t);
let anim = div.animate({transform: [from, to]}, 2000);
anim.pause();
anim.currentTime = 1000;
anim.commitStyles()
let halfway = div.style.transform;
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to commitStyles.");
}
interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)');
interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)');
interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%, 0px)');
interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)');
interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)');
interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)');
interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)');
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)');
interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)');
interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)');
interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)');
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)');
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)');
interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)');
interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)');
interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)');
interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)');
interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)');
interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)');
interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)');
interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)');
interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)');
interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)');
interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)');
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment