Bug 1604230 [wpt PR 20790] - Make interpolation-testcommon.js support composition, a=testonly
authorhaozhe <haozhes@chromium.org>
Fri, 20 Dec 2019 11:37:06 +0000
changeset 508219 094bdebc95c55f613e98d36d8bb32140bb08ef11
parent 508218 9793d18c81cb4ebb876c72c171eede55f77aece4
child 508220 8765db34a85fa302624e26384bd44217404def05
push id36943
push useropoprus@mozilla.com
push dateMon, 23 Dec 2019 16:27:52 +0000
treeherdermozilla-central@6d2e33d632e7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1604230, 20790, 1034538, 1965910, 725575
milestone73.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1604230 [wpt PR 20790] - Make interpolation-testcommon.js support composition, a=testonly Automatic update from web-platform-tests Make interpolation-testcommon.js support composition Port font-variation-settings-composition Add composition test ability to external/wpt. The Chrome passes all tests. Firefox has a bug which give the output in reverse order. Bug: 1034538 Change-Id: Ib71fc2518008144f7002eee95bff57fe90e05cce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1965910 Reviewed-by: Xida Chen <xidachen@chromium.org> Commit-Queue: Hao Sheng <haozhes@chromium.org> Cr-Commit-Position: refs/heads/master@{#725575} -- wpt-commits: b4f67181463668e61186828d11abee6d079d98c3 wpt-pr: 20790
testing/web-platform/tests/css/css-fonts/animations/font-variation-settings-composition.html
testing/web-platform/tests/css/support/interpolation-testcommon.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/animations/font-variation-settings-composition.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>font-variation-settings composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variation-settings">
+<meta name="assert" content="font-variation-settings supports animation pairwise by 'like' properties">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body></body>
+
+<script>
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'test' 50",
+  addFrom: "'test' 100",
+  addTo: "'test' 200",
+}, [
+  {at: -0.3, expect: "'test' 120"},
+  {at: 0, expect: "'test' 150"},
+  {at: 0.5, expect: "'test' 200"},
+  {at: 1, expect: "'test' 250"},
+  {at: 1.5, expect: "'test' 300"},
+]);
+
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'test' 50",
+  addFrom: "'test' 100",
+  replaceTo: "'test' 200",
+}, [
+  {at: -0.3, expect: "'test' 135"},
+  {at: 0, expect: "'test' 150"},
+  {at: 0.5, expect: "'test' 175"},
+  {at: 1, expect: "'test' 200"},
+  {at: 1.5, expect: "'test' 225"},
+]);
+
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'test' 100",
+  addFrom: 'normal',
+  replaceTo: "'test' 200",
+}, [
+  {at: -0.3, expect: 'normal'},
+  {at: 0, expect: 'normal'},
+  {at: 0.5, expect: "'test' 200"},
+  {at: 1, expect: "'test' 200"},
+  {at: 1.5, expect: "'test' 200"},
+]);
+
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'test' 100",
+  addFrom: 'normal',
+  addTo: "'test' 200",
+}, [
+  {at: -0.3, expect: 'normal'},
+  {at: 0, expect: 'normal'},
+  {at: 0.5, expect: "'test' 300"},
+  {at: 1, expect: "'test' 300"},
+  {at: 1.5, expect: "'test' 300"},
+]);
+
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'aaaa' 100, 'bbbb' 200",
+  addFrom: "'aaaa' 20, 'bbbb' 50",
+  addTo: "'aaaa' 30, 'bbbb' 100",
+}, [
+  {at: -0.3, expect: "'aaaa' 117, 'bbbb' 235"},
+  {at: 0, expect: "'aaaa' 120, 'bbbb' 250"},
+  {at: 0.5, expect: "'aaaa' 125, 'bbbb' 275"},
+  {at: 1, expect: "'aaaa' 130, 'bbbb' 300"},
+  {at: 1.5, expect: "'aaaa' 135, 'bbbb' 325"},
+]);
+
+test_composition({
+  property: 'font-variation-settings',
+  underlying: "'test' 100",
+  addFrom: "'aaaa' 20, 'bbbb' 50",
+  addTo: "'aaaa' 30, 'bbbb' 100",
+}, [
+  {at: -0.3, expect: "'aaaa' 17, 'bbbb' 35"},
+  {at: 0, expect: "'aaaa' 20, 'bbbb' 50"},
+  {at: 0.5, expect: "'aaaa' 25, 'bbbb' 75"},
+  {at: 1, expect: "'aaaa' 30, 'bbbb' 100"},
+  {at: 1.5, expect: "'aaaa' 35, 'bbbb' 125"},
+]);
+</script>
+</body>
--- a/testing/web-platform/tests/css/support/interpolation-testcommon.js
+++ b/testing/web-platform/tests/css/support/interpolation-testcommon.js
@@ -1,11 +1,12 @@
 'use strict';
 (function() {
   var interpolationTests = [];
+  var compositionTests = [];
   var cssAnimationsData = {
     sharedStyle: null,
     nextID: 0,
   };
   var expectNoInterpolation = {};
   var neutralKeyframe = {};
   function isNeutralKeyframe(keyframe) {
     return keyframe === neutralKeyframe;
@@ -296,48 +297,128 @@
               getComputedStyle(target).getPropertyValue(property),
               expectedValue);
         }, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedStr)}]`);
       };
       return target;
     });
   }
 
-  function createTestTargets(interpolationMethods, interpolationTests, container) {
+  function createCompositionTestTargets(compositionContainer, compositionTest) {
+    var options = compositionTest.options;
+    var property = options.property;
+    var underlying = options.underlying;
+    var comparisonFunction = options.comparisonFunction;
+    var from = options.accumulateFrom || options.addFrom || options.replaceFrom;
+    var to = options.accumulateTo || options.addTo || options.replaceTo;
+    var fromComposite = 'accumulateFrom' in options ? 'accumulate' : 'addFrom' in options ? 'add' : 'replace';
+    var toComposite = 'accumulateTo' in options ? 'accumulate' : 'addTo' in options ? 'add' : 'replace';
+    const invalidFrom = 'addFrom' in options === 'replaceFrom' in options
+        && 'addFrom' in options === 'accumulateFrom' in options;
+    const invalidTo = 'addTo' in options === 'replaceTo' in options
+        && 'addTo' in options === 'accumulateTo' in options;
+    if (invalidFrom || invalidTo) {
+      test(function() {
+        assert_false(invalidFrom, 'Exactly one of accumulateFrom, addFrom, or replaceFrom must be specified');
+        assert_false(invalidTo, 'Exactly one of accumulateTo, addTo, or replaceTo must be specified');
+      }, `Composition tests must have valid setup`);
+    }
+
+    var testText = `Compositing: property <${property}> underlying [${underlying}] from ${fromComposite} [${from}] to ${toComposite} [${to}]`;
+    var testContainer = createElement(compositionContainer, 'div');
+    createElement(testContainer);
+
+    // Setup a standard equality function if an override is not provided.
+    if (!comparisonFunction) {
+      comparisonFunction = (actual, expected) => {
+        assert_equals(normalizeValue(actual), normalizeValue(expected));
+      };
+    }
+
+    return compositionTest.expectations.map(function(expectation) {
+      var actualTargetContainer = createTargetContainer(testContainer, 'actual');
+      var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
+      var expectedStr = expectation.option || expectation.expect;
+      if (!isNeutralKeyframe(expectedStr)) {
+        expectedTargetContainer.target.style.setProperty(property, expectedStr);
+      }
+      var target = actualTargetContainer.target;
+      target.style.setProperty(property, underlying);
+      target.interpolate = function() {
+        webAnimationsInterpolation.interpolateComposite(property, from, fromComposite, to, toComposite, expectation.at, target);
+      };
+      target.measure = function() {
+        var expectedValue = getComputedStyle(expectedTargetContainer.target).getPropertyValue(property);
+        test(function() {
+
+          if (from && from !== neutralKeyframe) {
+            assert_true(CSS.supports(property, from), '\'from\' value should be supported');
+          }
+          if (to && to !== neutralKeyframe) {
+            assert_true(CSS.supports(property, to), '\'to\' value should be supported');
+          }
+          if (typeof underlying !== 'undefined') {
+            assert_true(CSS.supports(property, underlying), '\'underlying\' value should be supported');
+          }
+
+          comparisonFunction(
+              getComputedStyle(target).getPropertyValue(property),
+              expectedValue);
+        }, `${testText} at (${expectation.at}) should be [${sanitizeUrls(expectedStr)}]`);
+      };
+      return target;
+    });
+  }
+
+
+
+  function createTestTargets(interpolationMethods, interpolationTests, compositionTests, container) {
     var targets = [];
     for (var interpolationMethod of interpolationMethods) {
       var interpolationMethodContainer = createElement(container);
       for (var interpolationTest of interpolationTests) {
         [].push.apply(targets, createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest));
       }
     }
+    var compositionContainer = createElement(container);
+    for (var compositionTest of compositionTests) {
+      [].push.apply(targets, createCompositionTestTargets(compositionContainer, compositionTest));
+    }
     return targets;
   }
 
   function test_no_interpolation(options) {
     test_interpolation(options, expectNoInterpolation);
   }
-
-  function test_interpolation(options, expectations) {
-    interpolationTests.push({options, expectations});
+  function create_tests() {
     var interpolationMethods = [
       cssTransitionsInterpolation,
       cssTransitionAllInterpolation,
       cssAnimationsInterpolation,
       webAnimationsInterpolation,
     ];
     var container = createElement(document.body);
-    var targets = createTestTargets(interpolationMethods, interpolationTests, container);
+    var targets = createTestTargets(interpolationMethods, interpolationTests, compositionTests, container);
     // Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
     for (var target of targets) {
       target.interpolate();
     }
     for (var target of targets) {
       target.measure();
     }
     container.remove();
-    interpolationTests = [];
   }
 
+  function test_interpolation(options, expectations) {
+    interpolationTests.push({options, expectations});
+    create_tests();
+    interpolationTests = [];
+  }
+  function test_composition(options, expectations) {
+    compositionTests.push({options, expectations});
+    create_tests();
+    compositionTests = [];
+  }
   window.test_interpolation = test_interpolation;
   window.test_no_interpolation = test_no_interpolation;
+  window.test_composition = test_composition;
   window.neutralKeyframe = neutralKeyframe;
 })();