LayoutTests/animations/interpolation/background-position-interpolation.html - Issue 26247003: Web Animations CSS: Support animation of background-position and background-image

Side by Side Diff: LayoutTests/animations/interpolation/background-position-interpolation.html

Issue 26247003: Web Animations CSS: Support animation of background-position and background-image (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 2 months 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 | Annotate | Revision Log

« no previous file with comments | « no previous file | LayoutTests/animations/interpolation/background-position-interpolation-expected.txt » ('j') | LayoutTests/animations/interpolation/background-position-interpolation-expected.txt » ('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 width: 120px;

	6 height: 120px;

	7 display: inline-block;

	8 border: 2px solid black;

	9 background-repeat: no-repeat;

	10 background-image: radial-gradient(circle 20px at 20px 20px, red 0px, red 18px, transparent 20px), radial-gradient(circle 20px at 20px 20px, yellow 0px, yellow 18px, transparent 20px), radial-gradient(circle 20px at 20px 20px, lime 0px, li me 18px, transparent 20px), radial-gradient(circle 20px at 20px 20px, blue 0px, blue 18px, transparent 20px);
	Steve Block 2013/10/08 23:21:49 Does each of the radial-gradient()s need to be so Does each of the radial-gradient()s need to be so complex? It adds unnecessary complexity to the test. alancutter (OOO until 2018) 2013/10/09 07:20:55 Simplified the syntax a little and put them on ind Show quoted text On 2013/10/08 23:21:49, Steve Block wrote: > Does each of the radial-gradient()s need to be so complex? It adds unnecessary > complexity to the test. Simplified the syntax a little and put them on individual lines.
	11 }

	12 .replica {

	13 margin-right: 10px;

	14 }

	15 </style>

	16 <body>

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

	18 <script>

	19 assertInterpolation({

	20 property: 'background-position',

	21 from: '0px 0px, 80px 0px',

	22 to: '40px 40px, 80px 80px, 0px 80px'
	Steve Block 2013/10/08 23:21:49 It looks like you have 4 backgrounds and test anim It looks like you have 4 backgrounds and test animating from 2 positions to 2 positions. It would be good to test equal numbers of positions, as well as numbers of positions that are equal to and greater than the number of images - http://dev.w3.org/csswg/css-backgrounds/#layering Also, we should test the 4 value syntax - http://dev.w3.org/csswg/css-backgrounds/#background-position alancutter (OOO until 2018) 2013/10/09 07:20:55 It's actually testing from 2 positions to 3 positi Show quoted text On 2013/10/08 23:21:49, Steve Block wrote: > It looks like you have 4 backgrounds and test animating from 2 positions to 2 positions. It's actually testing from 2 positions to 3 positions which should invoke a 6 length interpolation, more than the number of background-images. Show quoted text > It would be good to test equal numbers of positions, as well as > numbers of positions that are equal to and greater than the number of images - > http://dev.w3.org/csswg/css-backgrounds/#layering I think testing fewer than the number of images is also a good idea in retrospect to ensure the values are repeated over the image layers correctly. Added test interpolating one background-position value. Show quoted text > Also, we should test the 4 value syntax - > http://dev.w3.org/csswg/css-backgrounds/#background-position The 4 value syntax is reduced to a canonical 2 value form in the CSS parsing stage, this won't affect the interpolation coverage but it couldn't hurt to do so. Steve Block 2013/10/09 23:19:05 Sorry, that was a typo. I meant 2 to 3. Sorry, that was a typo. I meant 2 to 3.
	23 }, [

	24 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},

	25 {at: 0, is: '0px 0px, 80px 0px, 0px 0px, 80px 0px'},

	26 {at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'},

	27 {at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'},

	28 {at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'},

	29 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'},

	30 {at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
	Steve Block 2013/10/08 23:21:49 It might not be 'correct' style, but this would be It might not be 'correct' style, but this would be much easier to read if you vertically aligned the values - https://codereview.chromium.org/26292004/diff/28001/LayoutTests/animations/in... alancutter (OOO until 2018) 2013/10/09 07:20:55 Done. Show quoted text On 2013/10/08 23:21:49, Steve Block wrote: > It might not be 'correct' style, but this would be much easier to read if you > vertically aligned the values - > https://codereview.chromium.org/26292004/diff/28001/LayoutTests/animations/in... Done.
	31 ]);

	32 </script>

	33 </body>

OLD	NEW