Bug 1454883: Fix animation tests to account for font-stretch animating as percentage. r=hiro
authorEmilio Cobos Álvarez <emilio@crisal.io>
Sun, 22 Apr 2018 19:59:46 +0200
changeset 468643 46996fb339f8990b708598813e66394330baa385
parent 468642 b61541f85293fa3fddd7edfe9863624f9a56e92b
child 468644 cb740fda090640ff39e7844273fca3f15a9df0c9
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1454883
milestone61.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 1454883: Fix animation tests to account for font-stretch animating as percentage. r=hiro MozReview-Commit-ID: KPXUJSI930X
dom/smil/test/db_smilCSSFromTo.js
dom/smil/test/test_smilCSSFontStretchRelative.xhtml
layout/style/test/test_transitions_per_property.html
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
--- a/dom/smil/test/db_smilCSSFromTo.js
+++ b/dom/smil/test/db_smilCSSFromTo.js
@@ -283,23 +283,31 @@ var gFromToBundles = [
   new TestcaseBundle(gPropList.font_stretch, [
     new AnimTestcaseFromTo("normal", "wider", {},
                            "need support for animating between " +
                            "relative 'font-stretch' values"),
     new AnimTestcaseFromTo("narrower", "ultra-condensed", {},
                            "need support for animating between " +
                            "relative 'font-stretch' values"),
     new AnimTestcaseFromTo("ultra-condensed", "condensed",
-                           { midComp: "extra-condensed" }),
+                           { fromComp: "50%",
+                             midComp: "62.5%",
+                             toComp: "75%"}),
     new AnimTestcaseFromTo("semi-condensed", "semi-expanded",
-                           { midComp: "normal" }),
+                           { fromComp: "87.5%",
+                             midComp: "100%",
+                             toComp: "112.5%"}),
     new AnimTestcaseFromTo("expanded", "ultra-expanded",
-                           { midComp: "extra-expanded" }),
+                           { fromComp: "125%",
+                             midComp: "162.5%",
+                             toComp: "200%"}),
     new AnimTestcaseFromTo("ultra-expanded", "inherit",
-                           { midComp: "expanded", toComp: "normal" }),
+                           { fromComp: "200%",
+                             midComp: "150%",
+                             toComp: "100%"}),
   ]),
   new TestcaseBundle(gPropList.font_style, [
     new AnimTestcaseFromTo("italic", "inherit", { toComp: "normal" }),
     new AnimTestcaseFromTo("normal", "italic"),
     new AnimTestcaseFromTo("italic", "oblique"),
     new AnimTestcaseFromTo("oblique", "normal"),
   ]),
   new TestcaseBundle(gPropList.font_variant, [
--- a/dom/smil/test/test_smilCSSFontStretchRelative.xhtml
+++ b/dom/smil/test/test_smilCSSFontStretchRelative.xhtml
@@ -22,28 +22,28 @@
 */
 
 SimpleTest.waitForExplicitFinish();
 
 const gPropertyName="font-stretch";
 
 // List of non-relative font-stretch values, from smallest to largest
 const gFontStretchValues = [
-  "ultra-condensed",
-  "extra-condensed",
-  "condensed",
-  "semi-condensed",
-  "normal",
-  "semi-expanded",
-  "expanded",
-  "extra-expanded",
-  "ultra-expanded"
+  ["ultra-condensed", "50%"],
+  ["extra-condensed", "62.5%"],
+  ["condensed", "75%"],
+  ["semi-condensed", "87.5%"],
+  ["normal", "100%"],
+  ["semi-expanded", "112.5%"],
+  ["expanded", "125%"],
+  ["extra-expanded", "150%"],
+  ["ultra-expanded", "200%"],
 ];
 
-function testFontStretchValue(baseValue, narrowerStep, widerStep)
+function testFontStretchValue([baseValue, computedValue], [narrowerStep, computedNarrowerStep], [widerStep, computedWiderStep])
 {
   var svg = SMILUtil.getSVGRoot();
   var gElem = document.createElementNS(SVG_NS, "g");
   gElem.setAttribute("style", "font-stretch: " + baseValue);
   svg.appendChild(gElem);
 
   var textElem = document.createElementNS(SVG_NS, "text");
   gElem.appendChild(textElem);
@@ -56,26 +56,26 @@ function testFontStretchValue(baseValue,
   textElem.appendChild(animElem);
 
   // CHECK EFFECT OF 'narrower'
   // NOTE: Using is() instead of todo_is() for ultra-condensed, since
   // 'narrower' has no effect on that value.
   var myIs = (baseValue == "ultra-condensed" ? is : todo_is);
   animElem.setAttribute("to", "narrower");
   SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample
-  myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), narrowerStep,
+  myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), computedNarrowerStep,
        "checking effect of 'narrower' on inherited value '" + baseValue + "'");
 
   // CHECK EFFECT OF 'wider'
   // NOTE: using is() instead of todo_is() for ultra-expanded, since
   // 'wider' has no effect on that value.
   myIs = (baseValue == "ultra-expanded" ? is : todo_is);
   animElem.setAttribute("to", "wider");
   SMILUtil.getSVGRoot().setCurrentTime(1.0); // Force a resample
-  myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), widerStep,
+  myIs(SMILUtil.getComputedStyleSimple(textElem, gPropertyName), computedWiderStep,
           "checking effect of 'wider' on inherited value '" + baseValue + "'");
 
   // Removing animation should clear animated effects
   textElem.removeChild(animElem);
   svg.removeChild(gElem);
 }
 
 function main()
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -162,17 +162,17 @@ var supported_properties = {
                         test_float_zeroToOne_clamped ],
     "font-size": [ test_length_transition, test_percent_transition,
                    test_length_percent_calc_transition,
                    test_length_clamped, test_percent_clamped ],
     "font-size-adjust": [ test_float_zeroToOne_transition,
                           test_float_aboveOne_transition,
                           /* FIXME: font-size-adjust treats zero specially */
                           /* test_float_zeroToOne_clamped */ ],
-    "font-stretch": [ test_font_stretch ],
+    "font-stretch": [ test_percent_transition, test_percent_clamped ],
     "font-weight": [ test_font_weight ],
     "grid-column-gap": [ test_grid_gap ],
     "grid-row-gap": [ test_grid_gap ],
     "height": [ test_length_transition, test_percent_transition,
                 test_length_percent_calc_transition,
                 test_length_clamped, test_percent_clamped ],
     "left": [ test_length_transition, test_percent_transition,
               test_length_percent_calc_transition,
@@ -1978,58 +1978,16 @@ function test_integer_transition(prop) {
      "integer-valued property " + prop + ": flush before clamping test");
   div.style.setProperty("transition-property", prop, "");
   div.style.setProperty(prop, "100", "");
   isnot(cs.getPropertyValue(prop), "0",
         "integer-valued property " + prop + ": clamping of negatives");
   div.style.setProperty("transition-timing-function", "linear", "");
 }
 
-function test_font_stretch(prop) {
-  is(prop, "font-stretch", "only designed for one property");
-
-  div.style.setProperty("transition-property", "none", "");
-  div.style.setProperty(prop, "normal", "");
-  is(cs.getPropertyValue(prop), "normal",
-     "font-stretch property " + prop + ": computed value before transition");
-  div.style.setProperty("transition-property", prop, "");
-  div.style.setProperty(prop, "ultra-expanded", "");
-  is(cs.getPropertyValue(prop), "semi-expanded",
-     "font-stretch property " + prop + ": interpolation of font-stretches");
-  check_distance(prop, "normal", "semi-expanded", "ultra-expanded");
-  div.style.setProperty("transition-property", "none", "");
-  div.style.setProperty(prop, "expanded", "");
-  is(cs.getPropertyValue(prop), "expanded",
-     "font-stretch property " + prop + ": computed value before transition");
-  div.style.setProperty("transition-property", prop, "");
-  div.style.setProperty(prop, "extra-condensed", "");
-  is(cs.getPropertyValue(prop), "semi-expanded",
-     "font-stretch property " + prop + ": interpolation of font-stretches");
-  check_distance(prop, "expanded", "semi-expanded", "condensed");
-
-  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
-  div.style.setProperty("transition-property", "none", "");
-  div.style.setProperty(prop, "ultra-condensed", "");
-  is(cs.getPropertyValue(prop), "ultra-condensed",
-     "font-stretch property " + prop + ": flush before clamping test");
-  div.style.setProperty("transition-property", prop, "");
-  div.style.setProperty(prop, "ultra-expanded", "");
-  is(cs.getPropertyValue(prop), "ultra-condensed",
-     "font-stretch property " + prop + ": clamping of values");
-  div.style.setProperty("transition-property", "none", "");
-  div.style.setProperty(prop, "ultra-expanded", "");
-  is(cs.getPropertyValue(prop), "ultra-expanded",
-     "font-stretch property " + prop + ": flush before clamping test");
-  div.style.setProperty("transition-property", prop, "");
-  div.style.setProperty(prop, "ultra-condensed", "");
-  is(cs.getPropertyValue(prop), "ultra-expanded",
-     "font-stretch property " + prop + ": clamping of values");
-  div.style.setProperty("transition-timing-function", "linear", "");
-}
-
 function test_font_weight(prop) {
   is(prop, "font-weight", "only designed for one property");
 
   div.style.setProperty("transition-property", "none", "");
   div.style.setProperty(prop, "normal", "");
   is(cs.getPropertyValue(prop), "400",
      "font-weight property " + prop + ": computed value before transition");
   div.style.setProperty("transition-property", prop, "");
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -524,18 +524,18 @@ const gCSSProperties = {
     ]
   },
   'font-size-adjust': {
     // https://drafts.csswg.org/css-fonts-3/#propdef-font-size-adjust
     types: [
     ]
   },
   'font-stretch': {
-    // https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch
-    types: [ 'fontStretch' ]
+    // https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch
+    types: [ 'percentage' ]
   },
   'font-style': {
     // https://drafts.csswg.org/css-fonts/#propdef-font-style
     types: [
       { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
     ]
   },
   'float': {
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -2561,64 +2561,16 @@ const dasharrayType = {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'accumulate');
   },
 }
 
-const fontStretchType = {
-  testInterpolation: (property, setup) => {
-    test(t => {
-      const idlName = propertyToIDL(property);
-      const target = createTestElement(t, setup);
-      const animation =
-        target.animate({ [idlName]: ['ultra-condensed', 'extra-condensed'] },
-                       { duration: 1000, fill: 'both' });
-      testAnimationSamples(animation, idlName,
-                           [{ time: 499,  expected: 'ultra-condensed' },
-                            { time: 500,  expected: 'extra-condensed' }]);
-    }, `${property} supports animating as a font-stretch (adjacent values)`);
-
-    test(t => {
-      const idlName = propertyToIDL(property);
-      const target = createTestElement(t, setup);
-      const animation =
-        target.animate({ [idlName]: ['ultra-condensed', 'condensed'] },
-                       { duration: 1000, fill: 'both' });
-      testAnimationSamples(animation, idlName,
-                           [{ time: 500,  expected: 'extra-condensed' }]);
-    }, `${property} supports animating as a font-stretch (between value)`);
-  },
-
-  testAdditionOrAccumulation: (property, setup, composite) => {
-    test(t => {
-      const idlName = propertyToIDL(property);
-      const target = createTestElement(t, setup);
-      target.style[idlName] = 'condensed';
-      const animation =
-        target.animate({ [idlName]: ['expanded', 'ultra-expanded'] },
-                       { duration: 1000, composite });
-      testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'normal' },
-                            { time: 250, expected: 'semi-expanded' }]);
-    },
-    `${property} uses font-stretch behavior for composite type ${composite}`);
-  },
-
-  testAddition: function(property, setup) {
-    this.testAdditionOrAccumulation(property, setup, 'add');
-  },
-
-  testAccumulation: function(property, setup) {
-    this.testAdditionOrAccumulation(property, setup, 'accumulate');
-  },
-}
-
 const fontVariationSettingsType = {
   testInterpolation: (property, setup) => {
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       const animation =
         target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },
                        { duration: 1000, fill: 'both' });
@@ -2696,11 +2648,10 @@ const types = {
   translateList: translateListType,
   scaleList: scaleListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
   dasharray: dasharrayType,
-  fontStretch: fontStretchType,
   fontVariationSettings: fontVariationSettingsType,
 };