LayoutTests/animations/interpolation/text-shadow-interpolation.html - Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes

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

Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Rebased Created 5 years, 4 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 | « LayoutTests/animations/interpolation/text-indent-interpolation.html ('k') | LayoutTests/animations/interpolation/top-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 {

	5 text-shadow: 30px 10px 30px orange;

	6 }

4 .target {	7 .target {

5 display: inline-block;	8 display: inline-block;

6 font-size: 60pt;	9 font-size: 60pt;

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

8 margin-bottom: 30px;	11 margin-bottom: 30px;

9 color: green;	12 color: green;

	13 text-shadow: 10px 30px 10px orange;

10 }	14 }

11 .expected {	15 .expected {

12 margin-right: 40px;	16 margin-right: 40px;

13 }	17 }

14 </style>	18 </style>

15 <body>	19 <body>

16 <template id="target-template">T</template>	20 <template id="target-template">T</template>

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

18 <script>	22 <script>

19 assertInterpolation({	23 assertInterpolation({

20 property: 'text-shadow',	24 property: 'text-shadow',

	25 from: '',

	26 to: '20px 20px 20px green',

	27 }, [

	28 {at: -0.3, is: 'rgb(255, 176, 0) 7px 33px 7px'},

	29 {at: 0, is: 'rgb(255, 165, 0) 10px 30px 10px'},

	30 {at: 0.3, is: 'rgb(179, 154, 0) 13px 27px 13px'},

	31 {at: 0.6, is: 'rgb(102, 143, 0) 16px 24px 16px'},

	32 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},

	33 {at: 1.5, is: 'rgb(0, 110, 0) 25px 15px 25px'},

	34 ]);

	35

	36 assertInterpolation({

	37 property: 'text-shadow',

	38 from: 'initial',

	39 to: '20px 20px 20px green',

	40 }, [

	41 {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px'},

	42 {at: 0, is: 'none'},

	43 {at: 0.3, is: 'rgba(0, 125, 0, 0.3) 6px 6px 6px'},

	44 {at: 0.6, is: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'},

	45 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},

	46 {at: 1.5, is: 'rgb(0, 192, 0) 30px 30px 30px'},

	47 ]);

	48

	49 assertInterpolation({

	50 property: 'text-shadow',

	51 from: 'inherit',

	52 to: '20px 20px 20px green',

	53 }, [

	54 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},

	55 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},

	56 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},

	57 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},

	58 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},

	59 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},

	60 ]);

	61

	62 assertInterpolation({

	63 property: 'text-shadow',

	64 from: 'unset',

	65 to: '20px 20px 20px green',

	66 }, [

	67 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},

	68 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},

	69 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},

	70 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},

	71 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},

	72 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},

	73 ]);

	74

	75 assertInterpolation({

	76 property: 'text-shadow',

21 from: '15px 10px 5px black',	77 from: '15px 10px 5px black',

22 to: '-15px -10px 25px orange'	78 to: '-15px -10px 25px orange'

23 }, [	79 }, [

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

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

26 {at: 0.3, is: '6px 4px 11px rgb(77, 50, 0)'},	82 {at: 0.3, is: '6px 4px 11px rgb(77, 50, 0)'},

27 {at: 0.6, is: '-3px -2px 17px rgb(153, 99, 0)'},	83 {at: 0.6, is: '-3px -2px 17px rgb(153, 99, 0)'},

28 {at: 1, is: '-15px -10px 25px orange'},	84 {at: 1, is: '-15px -10px 25px orange'},

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

30 ]);	86 ]);

31	87

32 assertInterpolation({	88 assertInterpolation({

33 property: 'text-shadow',	89 property: 'text-shadow',

34 from: '10px 10px 10px black',	90 from: '10px 10px 10px black',

35 to: '10px 10px 10px currentColor'	91 to: '10px 10px 10px currentColor'

36 }, [	92 }, [

37 {at: -0.3, is: '10px 10px 10px black'},	93 {at: -0.3, is: '10px 10px 10px black'},

38 {at: 0, is: '10px 10px 10px black'},	94 {at: 0, is: '10px 10px 10px black'},

39 {at: 0.3, is: '10px 10px 10px rgb(0, 38, 0)'},	95 {at: 0.3, is: '10px 10px 10px rgb(0, 38, 0)'},

40 {at: 0.6, is: '10px 10px 10px rgb(0, 77, 0)'},	96 {at: 0.6, is: '10px 10px 10px rgb(0, 77, 0)'},

41 {at: 1, is: '10px 10px 10px green'},	97 {at: 1, is: '10px 10px 10px green'},

42 {at: 1.5, is: '10px 10px 10px rgb(0, 192, 0)'},	98 {at: 1.5, is: '10px 10px 10px rgb(0, 192, 0)'},

43 ]);	99 ]);

44 </script>	100 </script>

45 </body>	101 </body>

OLD	NEW