CSS: Serialize % before px in calc

https://drafts.csswg.org/css-values/#math-function-serialize-a-summation Percentage should be serialized before dimensions with units Also fix typo in WPTs svg/geometry/parsing/*-computed.svg calc(50% + 60x) becomes calc(50% + 60px) BUG=904805 Change-Id: I2ecb732564c405f9315a1ef06e5bd0777c407f19 Reviewed-on: https://chromium-review.googlesource.com/c/1341289 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#609262}
web-platform-tests · Nov 19, 2018 · a44d2f3 · a44d2f3
1 parent 740e67d
commit a44d2f3
Show file tree

Hide file tree

Showing 22 changed files with 73 additions and 38 deletions.
diff --git a/css/css-align/gaps/column-gap-parsing-001.html b/css/css-align/gaps/column-gap-parsing-001.html
@@ -86,7 +86,7 @@
     test(
       function(){
         var target = document.getElementById("columnGapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
       }, "column-gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-align/gaps/gap-parsing-001.html b/css/css-align/gaps/gap-parsing-001.html
@@ -140,8 +140,8 @@
     test(
       function(){
         var target = document.getElementById("gapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
-        assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
       }, "gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-align/gaps/grid-column-gap-parsing-001.html b/css/css-align/gaps/grid-column-gap-parsing-001.html
@@ -86,7 +86,7 @@
     test(
       function(){
         var target = document.getElementById("columnGapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
       }, "grid-column-gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-align/gaps/grid-gap-parsing-001.html b/css/css-align/gaps/grid-gap-parsing-001.html
@@ -140,8 +140,8 @@
     test(
       function(){
         var target = document.getElementById("gapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
-        assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
       }, "grid-gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-align/gaps/grid-row-gap-parsing-001.html b/css/css-align/gaps/grid-row-gap-parsing-001.html
@@ -86,7 +86,7 @@
     test(
       function(){
         var target = document.getElementById("rowGapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
       }, "grid-row-gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-align/gaps/row-gap-parsing-001.html b/css/css-align/gaps/row-gap-parsing-001.html
@@ -86,7 +86,7 @@
     test(
       function(){
         var target = document.getElementById("rowGapCalcFixedPercent");
-        assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
       }, "row-gap accepts calc() mixing fixed and percentage values");
     test(
       function(){

diff --git a/css/css-paint-api/registered-property-interpolation-004.https.html b/css/css-paint-api/registered-property-interpolation-004.https.html
@@ -15,7 +15,7 @@
         name: '--prop', syntax: '<length-percentage>'
       });
 
-      expectWorkletValue(target, '--prop', '[CSSMathSum calc(5px + 10%)]');
+      expectWorkletValue(target, '--prop', '[CSSMathSum calc(10% + 5px)]');
     } catch(e) {
       document.body.textContent = e;
       takeScreenshot();

diff --git a/css/css-paint-api/registered-property-value-009.https.html b/css/css-paint-api/registered-property-value-009.https.html
@@ -33,12 +33,12 @@
 
       target.style.setProperty('--prop-1', '10%');
       target.style.setProperty('--prop-2', '10px');
-      target.style.setProperty('--prop-3', 'calc(10px + 10%)');
+      target.style.setProperty('--prop-3', 'calc(10% + 10px)');
 
       expectWorkletValues(target, {
         '--prop-1': ['[CSSUnitValue 10%]'],
         '--prop-2': ['[CSSUnitValue 10px]'],
-        '--prop-3': ['[CSSMathSum calc(10px + 10%)]'],
+        '--prop-3': ['[CSSMathSum calc(10% + 10px)]'],
       });
     } catch(e) {
       document.body.textContent = e;

diff --git a/css/css-properties-values-api/registered-property-computation.html b/css/css-properties-values-api/registered-property-computation.html
@@ -103,25 +103,25 @@
 
 test_computed_value('<length-percentage>', '17em', '170px');
 test_computed_value('<length-percentage>', '18%', '18%');
-test_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(190px + -2%)');
+test_computed_value('<length-percentage>', 'calc(19em - 2%)', 'calc(-2% + 190px)');
 
 test_computed_value('<length>#', '10px, 3em', '10px, 30px');
 test_computed_value('<length>#', '4em ,9px', '40px, 9px');
 test_computed_value('<length>#', '8em', '80px');
 
 test_computed_value('<length-percentage>#', '3% , 10vmax  , 22px', ['3%', length_ref('10vmax'), '22px'].join(', '));
-test_computed_value('<length-percentage>#', 'calc(50% + 1em), 4px', 'calc(10px + 50%), 4px');
-test_computed_value('<length-percentage>#', 'calc(13% + 37px)', 'calc(37px + 13%)');
+test_computed_value('<length-percentage>#', 'calc(50% + 1em), 4px', 'calc(50% + 10px), 4px');
+test_computed_value('<length-percentage>#', 'calc(13% + 37px)', 'calc(13% + 37px)');
 
 test_computed_value('<length>+', '10px 3em', '10px 30px');
 test_computed_value('<length>+', '4em 9px', '40px 9px');
 
 test_computed_value('<length-percentage>+', '3% 10vmax 22px', ['3%', length_ref('10vmax'), '22px'].join(' '));
-test_computed_value('<length-percentage>+', 'calc(50% + 1em) 4px', 'calc(10px + 50%) 4px');
+test_computed_value('<length-percentage>+', 'calc(50% + 1em) 4px', 'calc(50% + 10px) 4px');
 
 test_computed_value('<transform-function>', 'translateX(2px)', 'translateX(2px)');
 test_computed_value('<transform-function>', 'translateX(10em)', 'translateX(100px)');
-test_computed_value('<transform-function>', 'translateX(calc(11em + 10%))', 'translateX(calc(110px + 10%))');
+test_computed_value('<transform-function>', 'translateX(calc(11em + 10%))', 'translateX(calc(10% + 110px))');
 test_computed_value('<transform-function>+', 'translateX(10%) scale(2)', 'translateX(10%) scale(2)');
 
 test_computed_value('<integer>', '15', '15');

diff --git a/css/css-properties-values-api/registered-property-initial.html b/css/css-properties-values-api/registered-property-initial.html
@@ -17,7 +17,7 @@
 }
 
 test_initial_value({ syntax: '<length>', initialValue: 'calc(10px + 15px)' }, '25px');
-test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(100px + 10%)');
+test_initial_value({ syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)' }, 'calc(10% + 100px)');
 test_initial_value({ syntax: '<color>', initialValue: 'pink', inherits: true }, 'rgb(255, 192, 203)');
 test_initial_value({ syntax: '<color>', initialValue: 'purple' }, 'rgb(128, 0, 128)');
 test_initial_value({ syntax: '<transform-function>', initialValue: 'rotate(42deg)' }, 'rotate(42deg)');

diff --git a/css/css-transforms/translate-getComputedStyle.html b/css/css-transforms/translate-getComputedStyle.html
@@ -42,7 +42,7 @@
     test(function() {
       assert_equals(getTranslateFor("first"), "10px 20px");
       assert_equals(getTranslateFor("second"), "30% 40% 50px");
-      assert_equals(getTranslateFor("third"), "calc(70px + 80%) -90px");
+      assert_equals(getTranslateFor("third"), "calc(80% + 70px) -90px");
     }, "computed style for translate");
   </script>
 </body>

diff --git a/css/motion/offset-supports-calc.html b/css/motion/offset-supports-calc.html
@@ -22,7 +22,7 @@
 
 test(function(){
   target.style = 'offset-position: calc(30px + 20%) calc(-200px + 8em + 100%);';
-  assert_equals(getComputedStyle(target).offsetPosition, 'calc(30px + 20%) calc(-40px + 100%)');
+  assert_equals(getComputedStyle(target).offsetPosition, 'calc(20% + 30px) calc(100% + -40px)');
 }, 'offset-position supports calc');
 
 test(function(){
@@ -32,7 +32,7 @@
 
 test(function(){
   target.style = 'offset-distance: calc(-100px + 50%);';
-  assert_equals(getComputedStyle(target).offsetDistance, 'calc(-100px + 50%)');
+  assert_equals(getComputedStyle(target).offsetDistance, 'calc(50% + -100px)');
 }, 'offset-distance supports calc');
 
 test(function(){
@@ -42,7 +42,7 @@
 
 test(function(){
   target.style = 'offset-anchor: calc(30px + 20%) calc(-200px + 8em + 100%);';
-  assert_equals(getComputedStyle(target).offsetAnchor, 'calc(30px + 20%) calc(-40px + 100%)');
+  assert_equals(getComputedStyle(target).offsetAnchor, 'calc(20% + 30px) calc(100% + -40px)');
 }, 'offset-anchor supports calc');
 
 </script>

diff --git a/svg/geometry/parsing/cx-computed.svg b/svg/geometry/parsing/cx-computed.svg
diff --git a/svg/geometry/parsing/cy-computed.svg b/svg/geometry/parsing/cy-computed.svg
diff --git a/svg/geometry/parsing/r-computed.svg b/svg/geometry/parsing/r-computed.svg
diff --git a/svg/geometry/parsing/rx-computed.svg b/svg/geometry/parsing/rx-computed.svg
diff --git a/svg/geometry/parsing/ry-computed.svg b/svg/geometry/parsing/ry-computed.svg
diff --git a/svg/geometry/parsing/x-computed.svg b/svg/geometry/parsing/x-computed.svg
diff --git a/svg/geometry/parsing/y-computed.svg b/svg/geometry/parsing/y-computed.svg
diff --git a/svg/painting/parsing/stroke-width-computed.svg b/svg/painting/parsing/stroke-width-computed.svg
diff --git a/svg/painting/parsing/stroke-width-valid.svg b/svg/painting/parsing/stroke-width-valid.svg
diff --git a/web-animations/animation-model/animation-types/property-types.js b/web-animations/animation-model/animation-types/property-types.js
@@ -334,7 +334,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['10px', '20%'] },
                                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
-                           [{ time: 500,  expected: 'calc(5px + 10%)' }]);
+                           [{ time: 500,  expected: 'calc(10% + 5px)' }]);
     }, `${property} supports animating as combination units "px" and "%"`);
 
     test(t => {
@@ -343,7 +343,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['10%', '2em'] },
                                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
-                           [{ time: 500,  expected: 'calc(10px + 5%)' }]);
+                           [{ time: 500,  expected: 'calc(5% + 10px)' }]);
     }, `${property} supports animating as combination units "%" and "em"`);
 
     test(t => {
@@ -363,7 +363,7 @@ const lengthPercentageOrCalcType = {
         { duration: 1000, fill: 'both' }
       );
       testAnimationSamples(animation, idlName,
-                           [{ time: 500,  expected: 'calc(10px + 10%)' }]);
+                           [{ time: 500,  expected: 'calc(10% + 10px)' }]);
     }, `${property} supports animating as combination units "px" and "calc"`);
 
     test(t => {
@@ -374,7 +374,7 @@ const lengthPercentageOrCalcType = {
         { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,
-                              expected: 'calc(15px + 15%)' }]);
+                              expected: 'calc(15% + 15px)' }]);
     }, `${property} supports animating as a calc`);
   },
 
@@ -389,7 +389,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['10%', '50%'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(10px + 10%)' }]);
+                           [{ time: 0, expected: 'calc(10% + 10px)' }]);
     }, `${property}: units "%" onto "px"`);
 
     test(t => {
@@ -399,7 +399,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['10px', '50px'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(10px + 10%)' }]);
+                           [{ time: 0, expected: 'calc(10% + 10px)' }]);
     }, `${property}: units "px" onto "%"`);
 
     test(t => {
@@ -409,7 +409,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(20px + 10%)' }]);
+                           [{ time: 0, expected: 'calc(10% + 20px)' }]);
     }, `${property}: units "rem" onto "%"`);
 
     test(t => {
@@ -419,7 +419,7 @@ const lengthPercentageOrCalcType = {
       const animation = target.animate({ [idlName]: ['10%', '50%'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(20px + 10%)' }]);
+                           [{ time: 0, expected: 'calc(10% + 20px)' }]);
     }, `${property}: units "%" onto "rem"`);
 
     test(t => {
@@ -448,7 +448,7 @@ const lengthPercentageOrCalcType = {
                                                    'calc(5rem + 50%)'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(30px + 20%)' }]);
+                           [{ time: 0, expected: 'calc(20% + 30px)' }]);
     }, `${property}: units "calc" onto "px"`);
 
     test(t => {
@@ -459,7 +459,7 @@ const lengthPercentageOrCalcType = {
                                                    'calc(2em + 3rem + 40%)'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(30px + 30%)' }]);
+                           [{ time: 0, expected: 'calc(30% + 30px)' }]);
     }, `${property}: calc`);
   },