LayoutTests/animations/interpolation/box-shadow-interpolation.html - Issue 38823002: Web Animations CSS: Support animation of {text,box,-webkit-box}-shadow and fix blur clamping

Side by Side Diff: LayoutTests/animations/interpolation/box-shadow-interpolation.html

Issue 38823002: Web Animations CSS: Support animation of {text,box,-webkit-box}-shadow and fix blur clamping (Closed) Base URL: https://chromium.googlesource.com/chromium/blink@master

Patch Set: Created 7 years, 1 month ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « no previous file | LayoutTests/animations/interpolation/box-shadow-interpolation-expected.txt » ('j') | LayoutTests/animations/interpolation/webkit-box-shadow-interpolation.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <meta charset="UTF-8">

	3 <style>

	4 .target {

	5 display: inline-block;

	6 width: 60px;

	7 height: 60px;

	8 border: 2px solid;

	9 margin-right: 20px;

	10 margin-bottom: 30px;

	11 }

	12 .replica {

	13 margin-right: 40px;

	14 }

	15 </style>

	16 <body>

	17 <script src="resources/interpolation-test.js"></script>

	18 <script>

	19 // Test basic functionality, and clipping blur at 0

	20 assertInterpolation({

	21 property: 'box-shadow',

	22 from: '15px 10px 5px 5px black',

	23 to: '-15px -10px 25px -5px orange'

	24 }, [

	25 {at: -0.3, is: '24px 16px 0px 8px black'},

	26 {at: 0, is: '15px 10px 5px 5px black'},

	27 {at: 0.3, is: '6px 4px 11px 2px rgb(77, 50, 0)'},
	mithro-old 2013/10/24 01:04:16 Please test #aabbcc, rgb and rgba in the in the an Please test #aabbcc, rgb and rgba in the in the animate too/from (dunno if it's work testing hsl/hsla too?). Probably just good enough to change the color specifiers in the next couple of tests. Timothy Loh 2013/10/24 03:04:54 Tweaked tests as per in-person discussion. Show quoted text On 2013/10/24 01:04:16, mithro wrote: > Please test #aabbcc, rgb and rgba in the in the animate too/from (dunno if it's > work testing hsl/hsla too?). > > Probably just good enough to change the color specifiers in the next couple of > tests. Tweaked tests as per in-person discussion.
	28 {at: 0.6, is: '-3px -2px 17px -1px rgb(153, 99, 0)'},

	29 {at: 1, is: '-15px -10px 25px -5px orange'},

	30 {at: 1.5, is: '-30px -20px 35px -10px rgb(255, 248, 0)'},

	31 ]);
	mithro-old 2013/10/24 01:04:16 Is it worth testing hsl? Is it worth testing hsl?
	32

	33 // Test padding shorter lists

	34 assertInterpolation({

	35 property: 'box-shadow',

	36 from: '10px 20px yellow, inset 5px 10px green',
	mithro-old 2013/10/24 01:04:16 Can these 10px be calc expressions, ems or percent Can these 10px be calc expressions, ems or percentages? The spec seems to just say they are a "length". http://dev.w3.org/csswg/css-backgrounds/#box-shadow Timothy Loh 2013/10/24 03:04:54 I've added a test with ems. Percentages aren't all Show quoted text On 2013/10/24 01:04:16, mithro wrote: > Can these 10px be calc expressions, ems or percentages? The spec seems to just > say they are a "length". > http://dev.w3.org/csswg/css-backgrounds/#box-shadow I've added a test with ems. Percentages aren't allowed in shadows.
	37 to: 'none'

	38 }, [

	39 {at: -0.3, is: '13px 26px yellow, inset 6.5px 13px rgb(0, 166, 0)'},

	40 {at: 0, is: '10px 20px yellow, inset 5px 10px green'},

	41 {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.7), inset 3.5px 7px rgba(0, 128, 0 , 0.7)'},

	42 {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.4), inset 2px 4px rgba(0, 128, 0, 0 .4)'},

	43 {at: 1, is: 'none'},

	44 {at: 1.5, is: '-5px -10px transparent, inset -2.5px -5px transparent'},

	45 ]);

	46

	47 // Test unmatched inset

	48 assertInterpolation({

	49 property: 'box-shadow',

	50 from: '10px 20px yellow, 5px 10px green',

	51 to: 'inset 5px 10px green, 15px 20px blue'

	52 }, [

	53 {at: -0.3, is: '10px 20px yellow, 5px 10px green'},

	54 {at: 0, is: '10px 20px yellow, 5px 10px green'},

	55 {at: 0.3, is: '10px 20px yellow, 5px 10px green'},

	56 {at: 0.6, is: 'inset 5px 10px green, 15px 20px blue'},

	57 {at: 1, is: 'inset 5px 10px green, 15px 20px blue'},

	58 {at: 1.5, is: 'inset 5px 10px green, 15px 20px blue'},

	59 ]);

	60 </script>

	61 </body>

OLD	NEW