diff --git a/css/css-masking/clip-path/interpolation.html b/css/css-masking/clip-path/interpolation.html index f580de9c76951a..e52d9e895916b3 100644 --- a/css/css-masking/clip-path/interpolation.html +++ b/css/css-masking/clip-path/interpolation.html @@ -56,5 +56,23 @@ 'The radius of inset is clamped to zero at 61%'); }, 'Test inset with negative easing on clip-path'); +// All s compute to the equivalent inset() function, so +// they are interpolatable. +// https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values +// https://github.com/w3c/csswg-drafts/issues/9053 +test(function(t) { + var div = createDiv(t); + div.style.clipPath = 'inset(10px round 20px)'; + div.style.transition = 'all 100s linear -50s'; + getComputedStyle(div).clipPath; + + // The equivalent function is + // "inset(10px calc(100% - 220px) calc(100% - 110px) 20px)". + div.style.clipPath = 'xywh(20px 10px 200px 100px)'; + assert_equals(getComputedStyle(div).clipPath, + 'inset(10px calc(50% - 105px) calc(50% - 50px) 15px round 10px)', + 'The equivalent inset at 50%'); +}, 'Test inset and xywh on clip-path'); + diff --git a/css/motion/animation/offset-path-interpolation-006.html b/css/motion/animation/offset-path-interpolation-006.html index 27bdd3d0c0e70e..7ea118cb64b63a 100644 --- a/css/motion/animation/offset-path-interpolation-006.html +++ b/css/motion/animation/offset-path-interpolation-006.html @@ -110,6 +110,25 @@ {at: 2, expect: 'xywh(15px 15px 50% 50%)'}, ]); + // All s compute to the equivalent inset() function, so + // they are interpolatable. + // https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values + // https://github.com/w3c/csswg-drafts/issues/9053 + test_interpolation({ + property: 'offset-path', + // The equivalent function is + // "inset(5px calc(100% - 210px) calc(100% - 105px) 10px)". + from: 'xywh(10px 10px 200px 100px)', + to: 'inset(50px)' + }, [ + {at: -1, expect: 'inset(-30px calc(200% - 470px) calc(200% - 270px) -30px)'}, + {at: 0, expect: 'inset(10px calc(100% - 210px) calc(100% - 110px) 10px)'}, + {at: 0.125, expect: 'inset(15px calc(87.5% - 177.5px) calc(87.5% - 90px) 15px)'}, + {at: 0.875, expect: 'inset(45px calc(12.5% + 17.5px) calc(12.5% + 30px) 45px)'}, + {at: 1, expect: 'inset(50px calc(0% + 50px) calc(0% + 50px) 50px)'}, + {at: 2, expect: 'inset(90px calc(-100% + 310px) calc(-100% + 210px) 90px)'}, + ]); + // No interpolation between different radius keywords. test_no_interpolation({ property: 'offset-path',