diff options
Diffstat (limited to 'testing/web-platform/tests/css/motion')
7 files changed, 479 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html new file mode 100644 index 0000000000..30d789f4eb --- /dev/null +++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-008.html @@ -0,0 +1,264 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>offset-path interpolation with allow-discrete</title> + <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape"> + <meta name="assert" content="offset-path:shape() supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + </head> + <style> + html { + font-size: 16px; + } + .parent { + offset-path: shape(from -5px 5px, move to 5% 1px); + } + .target { + offset-path: shape(from 5px 5px, line to 10px 10%); + } + </style> + <body> + <script> + 'use strict'; + + test_interpolation({ + property: 'offset-path', + from: neutralKeyframe, + to: 'shape(from -5px 5px, line to 20px 20%)', + }, [ + {at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'}, + {at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'}, + {at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'}, + {at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'}, + {at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'initial', + to: 'shape(from 8px 5px, line to 7px 7%)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'inherit', + to: 'shape(from 15% 15px, move to 20% -10px)', + }, [ + {at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'}, + {at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'}, + {at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'}, + {at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'unset', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'none', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'shape(from 10px 10px, close)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', + to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px via -3% 86px, curve to 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px via 5% 70px, curve to 25% 25px via 25% 45px 10% 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px via 10% 60px, curve to 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px via 15% 50px, curve to 15% 35px via 35% 35px -20% 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px via -3% 86px, curve by 33% 17px via 17% 53px 34% 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px via 0% 80px, curve by 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px via 5% 70px, curve by 25% 25px via 25% 45px 10% 85px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px via 15% 50px, curve by 15% 35px via 35% 35px -20% 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'shape(from 15% 15px, smooth to 20% 0px via 10% 60px, smooth to 20% 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px via -3% 86px, smooth to 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px via 5% 70px, smooth to 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px via 15% 50px, smooth to 15% 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)', + to: 'shape(from 15% 15px, smooth by 20% 0px via 10% 60px, smooth by 20% 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px via -3% 86px, smooth by 33% 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px via 0% 80px, smooth by 30% 20px)'}, + {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px via 5% 70px, smooth by 25% 25px)'}, + {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px via 15% 50px, smooth by 15% 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)' + }, [ + {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px ccw small, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px ccw small, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px ccw small, arc by 20% -10px of 25px rotate 150deg cw large, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px rotate 270deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px ccw small, arc by 30% -20px of 15px rotate 390deg cw small, arc to 25% 20px of 10px 5px cw small)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, close, vline by 3pt)', + to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)', + }, [ + {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'}, + {at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'}, + {at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'}, + {at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'}, + {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'}, + ]); + + test_no_interpolation({ + property: 'offset-path', + from: 'shape(from 10px 10px, move to 10% 10%)', + to: 'path("M10 10 z")', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'path("M10 10 M10 10")', + to: 'shape(from 10px 10px, close)', + }); + + test_no_interpolation({ + property: 'offset-path', + from: 'path("M10 10 h 5")', + to: 'shape(from 10px 10px, hline to 5px)', + }); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)', + to: 'path("M 15 15 H 25 V -15 Z")', + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'}, + {at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'}, + {at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'}, + {at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'}, + {at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, vline to -20px, close)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)', + to: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px via calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px via calc(26% - 9px) 53px calc(32.5% + 1.5px) 61px)'}, + {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px via 0% 80px, curve to 30% 20px via 20% 50px 25% 70px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px via calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px via calc(10% + 15px) 45px calc(12.5% - 2.5px) 85px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px via calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px via calc(0% + 30px) 40px calc(0% - 5px) 100px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px via calc(-10% + 45px) 35px calc(-12.5% - 7.5px) 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")', + to: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)', + }, [ + {at: -0.3, expect: 'shape(from calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px via -3% 86px, curve by calc(-6% + 39px) 17px via calc(-9% + 26px) 53px calc(1.5% + 32.5px) 61px)'}, + {at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px via 0% 80px, curve by calc(0% + 30px) 20px via calc(0% + 20px) 50px calc(0% + 25px) 70px)'}, + {at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px via 5% 70px, curve by calc(10% + 15px) 25px via calc(15% + 10px) 45px calc(-2.5% + 12.5px) 85px)'}, + {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px via 10% 60px, curve by 20% 30px via 30% 40px -5% 100px)'}, + {at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px via 15% 50px, curve by calc(30% - 15px) 35px via calc(45% - 10px) 35px calc(-7.5% - 12.5px) 115px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)', + to: 'path("M 15 15 S 10 60 20 0 T 20 30")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px via calc(0% - 3px) 86px, smooth to calc(39% - 6px) 17px)'}, + {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px via 0% 80px, smooth to 30% 20px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px via calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px via calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px via calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 s 0 80 10 10 t 30 20")', + to: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)', + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px via -3px 86px, smooth by 33px 17px)'}, + {at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px via 0px 80px, smooth by 30px 20px)'}, + {at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px via 5px 70px, smooth by 25px 25px)'}, + {at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px via 10px 60px, smooth by 20px 30px)'}, + {at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px via 15px 50px, smooth by 15px 35px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', + to: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")', + }, [ + {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'}, + {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'}, + {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'}, + {at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'}, + {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'}, + ]); + + test_interpolation({ + property: 'offset-path', + from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")', + to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)' + }, [ + {at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px ccw small, arc by 12px -2px of 33px 33px rotate -42deg cw large , arc to 25px 20px of 10px 5px ccw small)'}, + {at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px small)'}, + {at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px ccw small, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px ccw small )'}, + {at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px ccw small, arc by 20px -10px of 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px rotate 270deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + {at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px ccw small, arc by 30px -20px of 15px rotate 390deg cw small, arc to 25px 20px of 10px 5px cw small)'}, + ]); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html new file mode 100644 index 0000000000..b1737a27df --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Motion Path test reference: <basic-shape> shape() path</title> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + background-color: green; + transform: translate(550px, 150px) rotate(90deg); + width: 100px; + height: 100px; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html new file mode 100644 index 0000000000..4cca1744d0 --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + top: 100px; + left: 100px; + position: relative; + width: 600px; + height: 400px; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 0px 0%, + hline by 100%, + vline to 400px, + hline by -100%, + close); + offset-distance: 40%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html new file mode 100644 index 0000000000..51030cab14 --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function with padding-box</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + top: 50px; + left: 50px; + position: relative; + width: 600px; + height: 400px; + padding: 50px; + box-sizing: content-box; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 50px 10%, + hline by calc(100% - 100px), + vline to calc(100% - 50px), + hline to 50px, + close) + padding-box; + offset-distance: 40%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html new file mode 100644 index 0000000000..2b83f89cdc --- /dev/null +++ b/testing/web-platform/tests/css/motion/offset-path-shape-shape-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Motion Path test: <basic-shape> shape() function with content-box</title> +<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<link rel="match" href="offset-path-shape-shape-001-ref.html"> +<meta name="assert" content="This tests that shape() generates a rotation and translation."> + +<style> +#outer { + width: 600px; + height: 400px; + border: 50px solid transparent; +} +#box { + width: 100px; + height: 100px; + background-color: green; + offset-path: shape(from 50px calc(-10% + 90px), + hline by 100%, + vline to calc(100% + 50px)) + content-box; + offset-distance: 80%; + border-radius: 50% 50% 0 0; +} +</style> + +<div id="outer"> + <div id="box"></div> +</div> diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html new file mode 100644 index 0000000000..8904eaf16a --- /dev/null +++ b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Motion Path Module Level 1: getComputedStyle for offset-path with shape()</title> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<meta name="assert" content="offset-path has absolute shape commands."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> +html { + font-size: 16px; +} +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("offset-path", "shape(from 0px 0px, line to 10px 10px)"); +test_computed_value("offset-path", "shape(from 1em 50px, line to 10rem 10%)", "shape(from 16px 50px, line to 160px 10%)"); +test_computed_value("offset-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); +test_computed_value("offset-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)", "shape(from 10px 10px, hline by 10px, vline to 80px)"); +test_computed_value("offset-path", "shape(from 10px 10px, vline by 5%, hline to 1px)"); +test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)", "shape(from 10px 10px, curve to 50px 20px via 160px 1%)"); +test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1px 20% 1em)", "shape(from 10px 10px, curve to 50px 20px via 160px 1px 20% 16px)"); +test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)", "shape(from 10px 10px, smooth to 50px 20px via 160px 1%)"); +test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 3pt)", "shape(from 10px 10px, smooth to 50px 4px)"); +test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 4px of 10px)"); +test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 4px of 10px)"); +test_computed_value("offset-path", "shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg)", "shape(from 10% 16px, arc to 50px 4px of 20% cw large rotate 25deg)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html new file mode 100644 index 0000000000..6ca288b660 --- /dev/null +++ b/testing/web-platform/tests/css/motion/parsing/offset-path-shape-parsing.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Motion Path Module Level 1: parsing offset-path with shape()</title> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> +<meta name="assert" content="offset-path supports the full shape() grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// basic +test_valid_value("offset-path", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("offset-path", "shape( from 0px 0px, line to 10px 10px )", "shape(from 0px 0px, line to 10px 10px)"); +test_valid_value("offset-path", "shape(from 1em 50%, line to 10px 10px)"); +test_valid_value("offset-path", "shape(from 1ch 50px, line to 10rem 10vh)"); +test_valid_value("offset-path", "shape(from 1ch -50px, line to -10% 12px)"); + +// segment types +test_valid_value("offset-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); +test_valid_value("offset-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)"); +test_valid_value("offset-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1%)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("offset-path", "shape(from 10px 10px, curve by 50px 20px via 10rem 1px 20vh 1ch)"); +test_valid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 1%)"); +test_valid_value("offset-path", "shape(from 10px 10px, smooth to 50px 1pt)"); +test_valid_value("offset-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("offset-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px)"); +test_valid_value("offset-path", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)"); + +// nonsense +test_invalid_value("offset-path", "shape(evenodd from 0px 0px, line to 10px 10px)"); +test_invalid_value("offset-path", "shape(nonzero from 0px 0px, line to 10px 10px)"); +test_invalid_value("offset-path", "shape(evenodd from 0px 0px, close)"); +test_invalid_value("offset-path", "shape(from 0px 0px, close path)"); +test_invalid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)"); +test_invalid_value("offset-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, vline by 5% hline by 1vw"); +test_invalid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)"); +test_invalid_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)"); +test_invalid_value("offset-path", "shape()"); +test_invalid_value("offset-path", "shape(from)"); +test_invalid_value("offset-path", "shape(from 0px)"); +test_invalid_value("offset-path", "shape(from 0px 20px,)"); +test_invalid_value("offset-path", "shape(close)"); +test_invalid_value("offset-path", "shape(nonzero close)"); +test_invalid_value("offset-path", "shape(from 0px 10px)"); +test_invalid_value("offset-path", "shape(allkindsofnonsense)"); +test_invalid_value("offset-path", "shape(arc)"); +</script> +</body> +</html> |