WebKit export of https://bugs.webkit.org/show_bug.cgi?id=284669 (web-…

…platform-tests#49747)

css/css-transforms/animation/rotate-interpolation-math-functions-tentative.html

@@ -32,7 +32,7 @@
       test_interpolation({
         property: 'rotate',
         from: 'calc(sign(20rem - 20px) * 100deg)',
-        to: 'calc(progress(10rem from 20px to 100px) * 180deg)',
+        to: 'calc(progress(10rem, 20px, 100px) * 180deg)',
       }, [
         {at: -1, expect: '20deg'},
         {at: 0, expect: '100deg'},

css/css-transforms/animation/scale-animation-math-functions-tentative.html

@@ -32,7 +32,7 @@
       test_interpolation({
         property: 'scale',
         from: 'calc(sign(20rem - 20px) * 100)',
-        to: 'calc(progress(10rem from 20px to 100px) * 180)',
+        to: 'calc(progress(10rem, 20px, 100px) * 180)',
       }, [
         {at: -1, expect: '20'},
         {at: 0, expect: '100'},

css/css-values/container-progress-computed.tentative.html

@@ -57,28 +57,28 @@
 let outerHeight = 228;
 
 // Identity tests
-test_math_used('container-progress(height from 0px to 1px)', innerHeight, {type:'number'});
-test_math_used('container-progress(width of my-container from 0px to 1px)', outerWidth, {type:'number'});
+test_math_used('container-progress(height, 0px, 1px)', innerHeight, {type:'number'});
+test_math_used('container-progress(width of my-container, 0px, 1px)', outerWidth, {type:'number'});
 
 // Nestings
-test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 1px to container-progress(height from 0px to 1px) * 1px)', '0', {type:'number'});
-test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 0.5px to container-progress(height from 0px to 1px) * 1px)', '1', {type:'number'});
-test_math_used('container-progress(height from container-progress(width of my-container from 0px to 1px) * 1px to container-progress(height of my-container-2 from 0px to 1px) * 1px)', (innerHeight - outerWidth) / (extraHeight - outerWidth), {type:'number'});
+test_math_used('container-progress(height, container-progress(height, 0px, 1px) * 1px, container-progress(height, 0px, 1px) * 1px)', '0', {type:'number'});
+test_math_used('container-progress(height, container-progress(height, 0px, 1px) * 0.5px, container-progress(height, 0px, 1px) * 1px)', '1', {type:'number'});
+test_math_used('container-progress(height, container-progress(width of my-container, 0px, 1px) * 1px, container-progress(height of my-container-2, 0px, 1px) * 1px)', (innerHeight - outerWidth) / (extraHeight - outerWidth), {type:'number'});
 
 // General calculations
-test_math_used('calc(container-progress(width from 0px to 50px) * 10px + 100px)', (innerWidth / 50 * 10 + 100) + 'px');
-test_math_used('calc(container-progress(height from 10px to sign(50px - 500em) * 10px))', (innerHeight - 10) / (-10 - 10), {type:'number'});
-test_math_used('calc(container-progress(width of my-container from 0px to 50px) * 10px + 100px)', (outerWidth / 50 * 10 + 100) + 'px');
-test_math_used('calc(container-progress(height of my-container from 10px to sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'});
+test_math_used('calc(container-progress(width, 0px, 50px) * 10px + 100px)', (innerWidth / 50 * 10 + 100) + 'px');
+test_math_used('calc(container-progress(height, 10px, sign(50px - 500em) * 10px))', (innerHeight - 10) / (-10 - 10), {type:'number'});
+test_math_used('calc(container-progress(width of my-container, 0px, 50px) * 10px + 100px)', (outerWidth / 50 * 10 + 100) + 'px');
+test_math_used('calc(container-progress(height of my-container, 10px, sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'});
 
 // Fallback
-test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for non-existing container name'});
-test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for non-existing container names'});
-test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for out of scope container'});
-test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for out of scope container'});
+test_math_used('container-progress(width of non-existing-container, 0px, 1px)', width, {type:'number', msg: 'container-progress() width fallback for non-existing container name'});
+test_math_used('container-progress(height of non-existing-container, 0px, 1px)', height, {type:'number', msg: 'container-progress() height fallback for non-existing container names'});
+test_math_used('container-progress(width of out-of-scope-container, 0px, 1px)', width, {type:'number', msg: 'container-progress() width fallback for out of scope container'});
+test_math_used('container-progress(height of out-of-scope-container, 0px, 1px)', height, {type:'number', msg: 'container-progress() height fallback for out of scope container'});
 
 // Type checking
-test_math_used('calc(container-progress(width from 0px to 1px) * 1px)', innerWidth + 'px');
-test_math_used('calc(container-progress(height of my-container from 0px to 1px) * 1s)', outerHeight + 's', {type:'time'});
-test_math_used('calc(container-progress(width of my-container-2 from 0px to 1px) * 1deg)', extraWidth + 'deg', {type:'angle', approx:0.001});
+test_math_used('calc(container-progress(width, 0px, 1px) * 1px)', innerWidth + 'px');
+test_math_used('calc(container-progress(height of my-container, 0px, 1px) * 1s)', outerHeight + 's', {type:'time'});
+test_math_used('calc(container-progress(width of my-container-2, 0px, 1px) * 1deg)', extraWidth + 'deg', {type:'angle', approx:0.001});
 </script>

css/css-values/container-progress-invalid.tentative.html

@@ -17,39 +17,40 @@
 test_invalid_number('container-progress()');
 test_invalid_number('container-progress( )');
 test_invalid_number('container-progress(,)');
-test_invalid_number('container-progress(1 from )');
+test_invalid_number('container-progress(1, )');
 test_invalid_number('container-progress(1)');
-test_invalid_number('container-progress(50% to 0)');
-test_invalid_number('container-progress(0 from 1 to)');
-test_invalid_number('container-progress(from to)');
-test_invalid_number('container-progress(from 1 to 0)');
-test_invalid_number('container-progress(3 of 2 from 1 to 0)');
-test_invalid_number('container-progress(width of 2 from 1 to 0)');
-test_invalid_number('container-progress(from 1 to 0 1)');
+test_invalid_number('container-progress(50%, 0)');
+test_invalid_number('container-progress(0, 1,)');
+test_invalid_number('container-progress(from,)');
+test_invalid_number('container-progress(from 1, 0)');
+test_invalid_number('container-progress(3 of 2, 1, 0)');
+test_invalid_number('container-progress(width of 2, 1, 0)');
+test_invalid_number('container-progress(from 1, 0 1)');
 test_invalid_number('container-progress(from 1 0)');
-test_invalid_number('container-progress(0 from to 0)');
-test_invalid_number('container-progress(to to to to to)');
-test_invalid_number('container-progress(0, from, 10, to 200)');
-test_invalid_number('container-progress(0, from, 10, to, 200)');
-test_invalid_number('container-progress(0, from 10, to 200)');
+test_invalid_number('container-progress(0,, 0)');
+test_invalid_number('container-progress(to,,,,)');
+test_invalid_number('container-progress(0,,, 10,, 200)');
+test_invalid_number('container-progress(0,,, 10,,, 200)');
+test_invalid_number('container-progress(0,, 10,, 200)');
 test_invalid_number('container-progress(0, 10, 200)');
+test_invalid_number('container-progress(0 from 10 to 200)');
 
 // General tests
-test_invalid_number('container-progress(height from 0 to 8');
-test_invalid_number('container-progress(height container from 0 to 8');
-test_invalid_number('container-progress(height of from 0 to 8');
-test_invalid_number('container-progress(depth from 0px to 8px');
-test_invalid_number('container-progress(width of 10 from 0px to 8px');
-test_invalid_number('container-progress(height of 10 from 0px to 8px');
-test_invalid_number('container-progress(height of name from 0deg to 8deg');
-test_invalid_number('container-progress(height of name from 0 to 8px');
-test_invalid_number('container-progress(10px from 0px to 8px');
-test_invalid_number('container-progress(depth of name from 0px to 8px');
-test_invalid_number('container-progress(width from 0deg to 8deg');
-test_invalid_number('container-progress(5 from 0deg to 8deg');
-test_invalid_number('container-progress(5 from 0% to 8deg');
-test_invalid_number('container-progress(height from 0% to sign(10px)');
-test_invalid_number('container-progress(5% from 0px to 10px');
-test_invalid_length('calc(1px * container-progress(10deg from 0 to 10))');
-test_invalid_length('calc(1px * container-progress(10 from 0px to 10))');
+test_invalid_number('container-progress(height, 0, 8');
+test_invalid_number('container-progress(height container, 0, 8');
+test_invalid_number('container-progress(height of, 0, 8');
+test_invalid_number('container-progress(depth, 0px, 8px');
+test_invalid_number('container-progress(width of 10, 0px, 8px');
+test_invalid_number('container-progress(height of 10, 0px, 8px');
+test_invalid_number('container-progress(height of name, 0deg, 8deg');
+test_invalid_number('container-progress(height of name, 0, 8px');
+test_invalid_number('container-progress(10px, 0px, 8px');
+test_invalid_number('container-progress(depth of name, 0px, 8px');
+test_invalid_number('container-progress(width, 0deg, 8deg');
+test_invalid_number('container-progress(5, 0deg, 8deg');
+test_invalid_number('container-progress(5, 0%, 8deg');
+test_invalid_number('container-progress(height, 0%, sign(10px)');
+test_invalid_number('container-progress(5%, 0px, 10px');
+test_invalid_length('calc(1px * container-progress(10deg, 0, 10))');
+test_invalid_length('calc(1px * container-progress(10, 0px, 10))');
 </script>

css/css-values/container-progress-serialize.tentative.html

@@ -36,13 +36,13 @@
 }
 
 test_serialization(
-    'calc(container-progress(width from 0px to 1px) / 1000)',
-    'calc(container-progress(width from 0px to 1px) / 1000)',
+    'calc(container-progress(width, 0px, 1px) / 1000)',
+    'calc(0.001 * container-progress(width, 0px, 1px))',
     '0.228',
 );
 test_serialization(
-    'calc(0.1 * container-progress(height of my-container from 0px to 10em))',
-    'calc(0.1 * container-progress(height of my-container from 0px to 10em))',
+    'calc(0.1 * container-progress(height of my-container, 0px, 10em))',
+    'calc(0.1 * container-progress(height of my-container, 0px, 10em))',
     '0.228',
 );
 </script>

css/css-values/media-progress-computed.tentative.html

@@ -24,19 +24,19 @@
 // NOTE(emilio): We provide custom messages so that the test name doesn't
 // depend on the viewport size (since in testharness.js files the viewport size is
 // not guaranteed to be fixed, unlike in reftests).
-test_math_used('media-progress(height from 0px to 1px)', height, { type:'number', 'msg': 'media-progress() identity check' });
+test_math_used('media-progress(height, 0px, 1px)', height, { type:'number', 'msg': 'media-progress() identity check' });
 
 // Nestings
-test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 1px to media-progress(height from 0px to 1px) * 1px)', '0', {type:'number'});
+test_math_used('media-progress(height, media-progress(height, 0px, 1px) * 1px, media-progress(height, 0px, 1px) * 1px)', '0', {type:'number'});
 
-test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 0.5px to media-progress(height from 0px to 1px) * 1px)', '1', {type:'number'});
+test_math_used('media-progress(height, media-progress(height, 0px, 1px) * 0.5px, media-progress(height, 0px, 1px) * 1px)', '1', {type:'number'});
 
 // General calculations.
-test_math_used('calc(media-progress(width from 0px to 50px) * 10px + 100px)', (width / 50 * 10 + 100) + 'px', { msg: 'media-progress() with length product' });
-test_math_used('calc(media-progress(height from 10px to sign(50px - 500em) * 10px))', (height - 10) / (-10 - 10), { type:'number', msg: 'media-progress with complex to calculation' });
+test_math_used('calc(media-progress(width, 0px, 50px) * 10px + 100px)', (width / 50 * 10 + 100) + 'px', { msg: 'media-progress() with length product' });
+test_math_used('calc(media-progress(height, 10px, sign(50px - 500em) * 10px))', (height - 10) / (-10 - 10), { type:'number', msg: 'media-progress with complex, calculation' });
 
 // Type checking
-test_math_used('calc(media-progress(width from 0px to 1px) * 1px)', width + 'px', { msg: 'media-progress() as length' });
-test_math_used('calc(media-progress(height from 0px to 1px) * 1s)', height + 's', { type:'time', msg: 'media-progress() as time' });
-test_math_used('calc(media-progress(width from 0px to 1px) * 1deg)', width + 'deg', { type:'angle', approx:0.001, msg: 'media-progress() as angle' });
+test_math_used('calc(media-progress(width, 0px, 1px) * 1px)', width + 'px', { msg: 'media-progress() as length' });
+test_math_used('calc(media-progress(height, 0px, 1px) * 1s)', height + 's', { type:'time', msg: 'media-progress() as time' });
+test_math_used('calc(media-progress(width, 0px, 1px) * 1deg)', width + 'deg', { type:'angle', approx:0.001, msg: 'media-progress() as angle' });
 </script>

css/css-values/media-progress-invalid.tentative.html

@@ -17,29 +17,28 @@
 test_invalid_number('media-progress()');
 test_invalid_number('media-progress( )');
 test_invalid_number('media-progress(,)');
-test_invalid_number('media-progress(1 from )');
+test_invalid_number('media-progress(1, )');
 test_invalid_number('media-progress(1)');
-test_invalid_number('media-progress(50% to 0)');
-test_invalid_number('media-progress(0 from 1 to)');
-test_invalid_number('media-progress(from to)');
-test_invalid_number('media-progress(from 1 to 0)');
-test_invalid_number('media-progress(from 1 to 0 1)');
-test_invalid_number('media-progress(from 1 0)');
-test_invalid_number('media-progress(0 from to 0)');
-test_invalid_number('media-progress(to to to to to)');
+test_invalid_number('media-progress(50%, 0)');
+test_invalid_number('media-progress(0, 1,)');
+test_invalid_number('media-progress(,,)');
+test_invalid_number('media-progress(, 1, 0)');
+test_invalid_number('media-progress(, 1, 0 1)');
+test_invalid_number('media-progress(, 1 0)');
+test_invalid_number('media-progress(0,, 0)');
+test_invalid_number('media-progress(,,,,)');
 test_invalid_number('media-progress(0, from, 10, to 200)');
 test_invalid_number('media-progress(0, from, 10, to, 200)');
-test_invalid_number('media-progress(0, from 10, to 200)');
 test_invalid_number('media-progress(0, 10, 200)');
 
 // General tests
-test_invalid_number('media-progress(height from 0 to 8');
-test_invalid_number('media-progress(depth from 0px to 8px');
-test_invalid_number('media-progress(width from 0deg to 8deg');
-test_invalid_number('media-progress(5 from 0deg to 8deg');
-test_invalid_number('media-progress(5 from 0% to 8deg');
-test_invalid_number('media-progress(height from 0% to sign(10px)');
-test_invalid_number('media-progress(5% from 0px to 10px');
-test_invalid_length('calc(1px * media-progress(10deg from 0 to 10))');
-test_invalid_length('calc(1px * media-progress(10 from 0px to 10))');
+test_invalid_number('media-progress(height, 0, 8');
+test_invalid_number('media-progress(depth, 0px, 8px');
+test_invalid_number('media-progress(width, 0deg, 8deg');
+test_invalid_number('media-progress(5, 0deg, 8deg');
+test_invalid_number('media-progress(5, 0%, 8deg');
+test_invalid_number('media-progress(height, 0%, sign(10px)');
+test_invalid_number('media-progress(5%, 0px, 10px');
+test_invalid_length('calc(1px * media-progress(10deg, 0, 10))');
+test_invalid_length('calc(1px * media-progress(10, 0px, 10))');
 </script>

css/css-values/media-progress-serialize.tentative.html

@@ -22,23 +22,23 @@
 }
 
 test_serialization(
-    'media-progress(width from 0px to 1000px)',
-    'media-progress(width from 0px to 1000px)',
+    'media-progress(width, 0px, 1000px)',
+    'media-progress(width, 0px, 1000px)',
     '0.8',
 );
 test_serialization(
-    'calc(0.1 * media-progress(height from 0px to 10em))',
-    'calc(0.1 * media-progress(height from 0px to 10em))',
+    'calc(0.1 * media-progress(height, 0px, 10em))',
+    'calc(0.1 * media-progress(height, 0px, 10em))',
     '0.6',
 );
 test_serialization(
-    'calc(media-progress(width from 0px to 100px) / 20)',
-    'calc(media-progress(width from 0px to 100px) / 20)',
+    'calc(media-progress(width, 0px, 100px) / 20)',
+    'calc(0.05 * media-progress(width, 0px, 100px))',
     '0.4'
 );
 test_computed_serialization(
     'width',
-    'calc(1px * media-progress(height from abs(11em - 10rem) to 110px / 10))',
+    'calc(1px * media-progress(height, abs(11em - 10rem), 110px / 10))',
     '590px',
 );
 </script>