third_party/WebKit/LayoutTests/animations/interpolation/background-position-interpolation.html - Issue 1881333002: Use neutralKeyframe sentinal instead of '' for interpolation-test.js tests

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

Issue 1881333002: Use neutralKeyframe sentinal instead of '' for interpolation-test.js tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix composition test code Created 4 years, 8 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

« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/background-image-interpolation.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta charset="UTF-8">	2 <meta charset="UTF-8">

3 <style>	3 <style>

4 .parent {	4 .parent {

5 background-position: 60px 60px;	5 background-position: 60px 60px;

6 }	6 }

7 .target {	7 .target {

8 width: 120px;	8 width: 120px;

9 height: 120px;	9 height: 120px;

10 display: inline-block;	10 display: inline-block;

11 border: 2px solid black;	11 border: 2px solid black;

12 background-repeat: no-repeat;	12 background-repeat: no-repeat;

13 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transpar ent),	13 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transpar ent),

14 radial-gradient(20px circle at 20px 20px, yellow 18px, trans parent),	14 radial-gradient(20px circle at 20px 20px, yellow 18px, trans parent),

15 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent),	15 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent),

16 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent);	16 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent);

17 background-position: 40px 40px;	17 background-position: 40px 40px;

18 }	18 }

19 .expected {	19 .expected {

20 margin-right: 10px;	20 margin-right: 10px;

21 }	21 }

22 </style>	22 </style>

23 <body>	23 <body>

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

25 <script>	25 <script>

26 assertInterpolation({	26 assertInterpolation({

27 property: 'background-position',	27 property: 'background-position',

28 from: '',	28 from: neutralKeyframe,

29 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',	29 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',

30 }, [	30 }, [

31 {at: -0.25, is: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},	31 {at: -0.25, is: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},

32 {at: 0, is: '40px 40px, 40px 40px, 40px 40px, 40px 40px'},	32 {at: 0, is: '40px 40px, 40px 40px, 40px 40px, 40px 40px'},

33 {at: 0.25, is: '50px 50px, 50px 50px, 50px 50px, 50px 50px'},	33 {at: 0.25, is: '50px 50px, 50px 50px, 50px 50px, 50px 50px'},

34 {at: 0.5, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},	34 {at: 0.5, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},

35 {at: 0.75, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},	35 {at: 0.75, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},

36 {at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},	36 {at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},

37 {at: 1.25, is: '90px 90px, 90px 90px, 90px 90px, 90px 90px'},	37 {at: 1.25, is: '90px 90px, 90px 90px, 90px 90px, 90px 90px'},

38 ]);	38 ]);

(...skipping 79 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
118 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},	118 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},

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

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

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

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

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

124 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},	124 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},

125 ]);	125 ]);

126 </script>	126 </script>

127 </body>	127 </body>

OLD	NEW