Bug 1508211 [wpt PR 14121] - CSS: Serialize % before px in calc, a=testonly
authorEric Willigers <ericwilligers@chromium.org>
Thu, 22 Nov 2018 10:33:54 +0000
changeset 504335 0f18b7b652c4cf53ae51cc999bfd22882f7b4561
parent 504334 e31c568c2e3eda32d9d5d8d9aca1dab645ff01d5
child 504336 5ac1a86bd492464eed245a53e93d8f2af2e7db7a
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1508211, 14121, 904805, 1341289, 609262
milestone65.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 1508211 [wpt PR 14121] - CSS: Serialize % before px in calc, a=testonly Automatic update from web-platform-testsCSS: 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} -- wpt-commits: 6f90ad64b9f531ae835623e445a6010031a52aa7 wpt-pr: 14121
testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html
testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html
testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html
testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html
testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html
testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html
testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-004.https.html
testing/web-platform/tests/css/css-paint-api/registered-property-value-009.https.html
testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html
testing/web-platform/tests/css/motion/offset-supports-calc.html
testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg
testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg
testing/web-platform/tests/svg/geometry/parsing/r-computed.svg
testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg
testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg
testing/web-platform/tests/svg/geometry/parsing/x-computed.svg
testing/web-platform/tests/svg/geometry/parsing/y-computed.svg
testing/web-platform/tests/svg/painting/parsing/stroke-width-computed.svg
testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
--- a/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html
@@ -81,17 +81,17 @@
     test(
       function(){
         var target = document.getElementById("columnGapCalc");
         assert_equals(getComputedStyle(target).columnGap, "14px");
       }, "column-gap accepts calc()");
     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(){
         var target = document.getElementById("columnGapInitial");
         assert_equals(getComputedStyle(target).columnGap, "normal");
       }, "Initial column-gap is 'normal'");
     test(
       function(){
--- a/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html
@@ -135,18 +135,18 @@
       function(){
         var target = document.getElementById("gapCalc");
         assert_equals(getComputedStyle(target).rowGap, "14px");
         assert_equals(getComputedStyle(target).columnGap, "14px");
       }, "gap accepts calc()");
     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(){
         var target = document.getElementById("gapCalcTwo");
         assert_equals(getComputedStyle(target).rowGap, "14px");
         assert_equals(getComputedStyle(target).columnGap, "12px");
       }, "gap accepts calc() 2");
     test(
--- a/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html
@@ -81,17 +81,17 @@
     test(
       function(){
         var target = document.getElementById("columnGapCalc");
         assert_equals(getComputedStyle(target).columnGap, "14px");
       }, "grid-column-gap accepts calc()");
     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(){
         var target = document.getElementById("columnGapInitial");
         assert_equals(getComputedStyle(target).columnGap, "normal");
       }, "Initial grid-column-gap is 'normal'");
     test(
       function(){
--- a/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html
@@ -135,18 +135,18 @@
       function(){
         var target = document.getElementById("gapCalc");
         assert_equals(getComputedStyle(target).rowGap, "14px");
         assert_equals(getComputedStyle(target).columnGap, "14px");
       }, "grid-gap accepts calc()");
     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(){
         var target = document.getElementById("gapCalcTwo");
         assert_equals(getComputedStyle(target).rowGap, "14px");
         assert_equals(getComputedStyle(target).columnGap, "12px");
       }, "grid-gap accepts calc() 2");
     test(
--- a/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html
@@ -81,17 +81,17 @@
     test(
       function(){
         var target = document.getElementById("rowGapCalc");
         assert_equals(getComputedStyle(target).rowGap, "14px");
       }, "grid-row-gap accepts calc()");
     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(){
         var target = document.getElementById("rowGapInitial");
         assert_equals(getComputedStyle(target).rowGap, "normal");
       }, "Initial grid-row-gap is 'normal'");
     test(
       function(){
--- a/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html
+++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html
@@ -81,17 +81,17 @@
     test(
       function(){
         var target = document.getElementById("rowGapCalc");
         assert_equals(getComputedStyle(target).rowGap, "14px");
       }, "row-gap accepts calc()");
     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(){
         var target = document.getElementById("rowGapInitial");
         assert_equals(getComputedStyle(target).rowGap, "normal");
       }, "Initial row-gap is 'normal'");
     test(
       function(){
--- a/testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-004.https.html
+++ b/testing/web-platform/tests/css/css-paint-api/registered-property-interpolation-004.https.html
@@ -10,16 +10,16 @@
 <div id="target"></div>
 <script>
     try {
       registerAndInterpolateProperty({
         on: target, from: '10px', to: '20%',
         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();
     }
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-paint-api/registered-property-value-009.https.html
+++ b/testing/web-platform/tests/css/css-paint-api/registered-property-value-009.https.html
@@ -28,22 +28,22 @@
         name: '--prop-3',
         syntax: '<length-percentage>',
         initialValue: '0',
         inherits: false
       });
 
       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;
       takeScreenshot();
     }
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
@@ -98,35 +98,35 @@ test(function(){
 test_computed_value('<length>', '12px', '12px');
 test_computed_value('<length>', '13vw', length_ref('13vw'));
 test_computed_value('<length>', '14em', '140px');
 test_computed_value('<length>', '15vmin', length_ref('15vmin'));
 test_computed_value('<length>', 'calc(16px - 7em + 10vh)', length_ref('calc(10vh - 54px)'));
 
 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');
 test_computed_value('<integer>', 'calc(15 + 15)', '30');
 test_computed_value('<integer>', 'calc(2.4)', '2');
 test_computed_value('<integer>', 'calc(2.6)', '3');
 test_computed_value('<integer>', 'calc(2.6 + 3.1)', '6');
 
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-initial.html
@@ -12,17 +12,17 @@ function test_initial_value(reg, expecte
     test(function(){
         let name = generate_property(reg);
         let actual = getComputedStyle(target).getPropertyValue(name);
         assert_equals(actual, expected);
     }, `Initial value for ${reg.syntax} correctly computed [${reg.initialValue}${suffix}]`);
 }
 
 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)');
 test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))' }, 'scale(4)');
 test_initial_value({ syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))' }, 'scale(3) translateX(4px)');
 
 // Test that the initial value of the custom property 'reg' is successfully
 // substituted into 'property'.
--- a/testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html
+++ b/testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html
@@ -37,13 +37,13 @@
     'use strict';
     function getTranslateFor(id) {
       return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate");
     }
 
     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>
 </html>
--- a/testing/web-platform/tests/css/motion/offset-supports-calc.html
+++ b/testing/web-platform/tests/css/motion/offset-supports-calc.html
@@ -17,34 +17,34 @@
 </head>
 <body>
 <div id="target"></div>
 <script>
 'use strict';
 
 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(){
   target.style = 'offset-path: ray(calc(1turn - 100grad) closest-side);';
   assert_equals(getComputedStyle(target).offsetPath, 'ray(270deg closest-side)');
 }, 'offset-path supports calc');
 
 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(){
   target.style = 'offset-rotate: auto calc(1turn - 100grad);';
   assert_equals(getComputedStyle(target).offsetRotate, 'auto 270deg');
 }, 'offset-rotate supports calc');
 
 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>
 </body>
 </html>
--- a/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg
@@ -15,13 +15,14 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("cx", "-10px");
 test_computed_value("cx", "0.5em", "20px");
 test_computed_value("cx", "calc(10px + 0.5em)", "30px");
+test_computed_value("cx", "calc(10px - 0.5em)", "-10px");
 test_computed_value("cx", "40%");
-test_computed_value("cx", "calc(50% + 60x)");
+test_computed_value("cx", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg
@@ -15,13 +15,14 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("cy", "-10px");
 test_computed_value("cy", "0.5em", "20px");
 test_computed_value("cy", "calc(10px + 0.5em)", "30px");
+test_computed_value("cy", "calc(10px - 0.5em)", "-10px");
 test_computed_value("cy", "40%");
-test_computed_value("cy", "calc(50% + 60x)");
+test_computed_value("cy", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg
@@ -15,13 +15,14 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("r", "10px");
 test_computed_value("r", "0.5em", "20px");
 test_computed_value("r", "calc(10px + 0.5em)", "30px");
+test_computed_value("r", "calc(10px - 0.5em)", "0px");
 test_computed_value("r", "40%");
-test_computed_value("r", "calc(50% + 60x)");
+test_computed_value("r", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg
@@ -17,13 +17,14 @@
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("rx", "auto");
 
 test_computed_value("rx", "10px");
 test_computed_value("rx", "0.5em", "20px");
 test_computed_value("rx", "calc(10px + 0.5em)", "30px");
+test_computed_value("rx", "calc(10px - 0.5em)", "0px");
 test_computed_value("rx", "40%");
-test_computed_value("rx", "calc(50% + 60x)");
+test_computed_value("rx", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg
@@ -17,13 +17,14 @@
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("ry", "auto");
 
 test_computed_value("ry", "10px");
 test_computed_value("ry", "0.5em", "20px");
 test_computed_value("ry", "calc(10px + 0.5em)", "30px");
+test_computed_value("ry", "calc(10px - 0.5em)", "0px");
 test_computed_value("ry", "40%");
-test_computed_value("ry", "calc(50% + 60x)");
+test_computed_value("ry", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg
@@ -15,13 +15,14 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("x", "-10px");
 test_computed_value("x", "0.5em", "20px");
 test_computed_value("x", "calc(10px + 0.5em)", "30px");
+test_computed_value("x", "calc(10px - 0.5em)", "-10px");
 test_computed_value("x", "40%");
-test_computed_value("x", "calc(50% + 60x)");
+test_computed_value("x", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- a/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg
+++ b/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg
@@ -15,13 +15,14 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
 
 test_computed_value("y", "-10px");
 test_computed_value("y", "0.5em", "20px");
 test_computed_value("y", "calc(10px + 0.5em)", "30px");
+test_computed_value("y", "calc(10px - 0.5em)", "-10px");
 test_computed_value("y", "40%");
-test_computed_value("y", "calc(50% + 60x)");
+test_computed_value("y", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-width-computed.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Geometry Properties: getComputedValue().strokeWidth</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidth"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("stroke-width", "10", "10px");
+test_computed_value("stroke-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("stroke-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("stroke-width", "40%");
+test_computed_value("stroke-width", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
--- a/testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg
+++ b/testing/web-platform/tests/svg/painting/parsing/stroke-width-valid.svg
@@ -14,11 +14,12 @@
   <script><![CDATA[
 
 test_valid_value("stroke-width", "0");
 test_valid_value("stroke-width", "10");
 test_valid_value("stroke-width", "1px");
 test_valid_value("stroke-width", "calc(2em + 3ex)");
 test_valid_value("stroke-width", "4%");
 test_valid_value("stroke-width", "5vmin");
+test_valid_value("stroke-width", "calc(50% + 60px)");
 
   ]]></script>
 </svg>
--- 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
@@ -329,26 +329,26 @@ const lengthPercentageOrCalcType = {
     percentageType.testInterpolation(property, setup);
 
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       const animation = target.animate({ [idlName]: ['1em', '2rem'] },
                                        { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
@@ -358,73 +358,73 @@ const lengthPercentageOrCalcType = {
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       const animation = target.animate(
         { [idlName]: ['10px', 'calc(1em + 20%)'] },
         { 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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       const animation = target.animate(
         { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },
         { duration: 1000, fill: 'both' });
       testAnimationSamples(animation, idlName,
                            [{ time: 500,
-                              expected: 'calc(15px + 15%)' }]);
+                              expected: 'calc(15% + 15px)' }]);
     }, `${property} supports animating as a calc`);
   },
 
   testAdditionOrAccumulation: (property, setup, composite) => {
     lengthType.testAddition(property, setup);
     percentageType.testAddition(property, setup);
 
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '10px';
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '10%';
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '10%';
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '2rem';
       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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '2em';
       const animation = target.animate({ [idlName]: ['2rem', '5rem'] },
                                        { duration: 1000, composite });
@@ -443,28 +443,28 @@ const lengthPercentageOrCalcType = {
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = '10px';
       const animation = target.animate({ [idlName]: ['calc(2em + 20%)',
                                                    '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 => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       target.style[idlName] = 'calc(10px + 10%)';
       const animation = target.animate({ [idlName]: ['calc(20px + 20%)',
                                                    'calc(2em + 3rem + 40%)'] },
                                        { duration: 1000, composite });
       testAnimationSamples(animation, idlName,
-                           [{ time: 0, expected: 'calc(30px + 30%)' }]);
+                           [{ time: 0, expected: 'calc(30% + 30px)' }]);
     }, `${property}: calc`);
   },
 
   testAddition: function(property, setup) {
     this.testAdditionOrAccumulation(property, setup, 'add');
   },
 
   testAccumulation: function(property, setup) {