Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(14)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/border-image-width-interpolation.html

Issue 54123007: Web Animations CSS: Fix clamping to non-negative values for BorderImageLength (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased after addition of BorderImageLengthBox 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/animations/interpolation/border-image-outset-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt » ('j') | LayoutTests/virtual/web-animations-css/animations/interpolation/border-image-outset-interpolation-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style> 3 <style>
4 .target { 4 .target {
5 width: 100px; 5 width: 100px;
6 height: 100px; 6 height: 100px;
7 background-color: black; 7 background-color: black;
8 display: inline-block; 8 display: inline-block;
9 border: 10px; 9 border: 10px;
10 border-image-source: linear-gradient(45deg, red, blue, green); 10 border-image-source: linear-gradient(45deg, red, blue, green);
11 } 11 }
12 .replica { 12 .replica {
13 background-color: green; 13 background-color: green;
14 margin-right: 2px; 14 margin-right: 2px;
15 } 15 }
16 </style> 16 </style>
17 <body> 17 <body>
18 <script src="resources/interpolation-test.js"></script> 18 <script src="resources/interpolation-test.js"></script>
19 <script> 19 <script>
20 assertInterpolation({ 20 assertInterpolation({
21 property: 'border-image-width', 21 property: 'border-image-width',
22 from: '0px', 22 from: '0px',
23 to: '20px' 23 to: '20px'
24 }, [ 24 }, [
25 {at: -0.3, is: '0px'}, // CSS border-image-width can't be negative. 25 {at: -0.3, is: '0px'}, // CSS border-image-width can't be negative.
26 {at: 0, is: '0px'}, 26 {at: 0, is: '0px'},
27 {at: 0.3, is: '6px'}, 27 {at: 0.3, is: '6px'},
28 {at: 0.6, is: '12px'}, 28 {at: 0.6, is: '12px'},
29 {at: 1, is: '20px'}, 29 {at: 1, is: '20px'},
30 {at: 1.5, is: '30px'}, 30 {at: 1.5, is: '30px'},
31 {at: 5, is: '100px'}, 31 {at: 5, is: '100px'},
32 {at: 10, is: '200px'} 32 {at: 10, is: '200px'}
33 ]);
34 assertInterpolation({
35 property: 'border-image-width',
36 from: '0%',
37 to: '20%'
38 }, [
39 {at: -0.3, is: '0%'}, // CSS border-image-width can't be negative.
40 {at: 0, is: '0%'},
41 {at: 0.3, is: '6%'},
42 {at: 0.6, is: '12%'},
43 {at: 1, is: '20%'},
44 {at: 1.5, is: '30%'},
45 {at: 5, is: '100%'},
46 {at: 10, is: '200%'}
47 ]);
48 assertInterpolation({
49 property: 'border-image-width',
50 from: '0',
51 to: '20'
52 }, [
53 {at: -0.3, is: '0'}, // CSS border-image-width can't be negative.
54 {at: 0, is: '0'},
55 {at: 0.3, is: '6'},
56 {at: 0.6, is: '12'},
57 {at: 1, is: '20'},
58 {at: 1.5, is: '30'},
59 {at: 5, is: '100'},
60 {at: 10, is: '200'}
61 ]);
62 assertInterpolation({
63 property: 'border-image-width',
64 from: '10px 20% 30 40px',
65 to: '80px 70% 60 50px'
66 }, [
67 {at: -0.3, is: '0px 5% 21 37px'}, // CSS border-image-width can't be neg ative.
68 {at: 0, is: '10px 20% 30 40px'},
69 {at: 0.3, is: '31px 35% 39 43px'},
70 {at: 0.6, is: '52px 50% 48 46px'},
71 {at: 1, is: '80px 70% 60 50px'},
72 {at: 1.5, is: '115px 95% 75 55px'},
73 {at: 5, is: '360px 270% 180 90px'},
74 {at: 10, is: '710px 520% 330 140px'}
75 ]);
76 assertInterpolation({
77 property: 'border-image-width',
78 from: '10%',
79 to: '20px'
80 }, [
81 {at: -0.3, is: 'calc(13% + -6px)'},
82 {at: 0, is: '10%'},
83 {at: 0.3, is: 'calc(7% + 6px)'},
84 {at: 0.6, is: 'calc(4% + 12px)'},
85 {at: 1, is: '20px'},
86 {at: 1.5, is: 'calc(-5% + 30px)'},
87 ]);
88 assertInterpolation({
89 property: 'border-image-width',
90 from: '10px',
91 to: '20%'
92 }, [
93 {at: -0.3, is: 'calc(13px + -6%)'},
94 {at: 0, is: '10px'},
95 {at: 0.3, is: 'calc(7px + 6%)'},
96 {at: 0.6, is: 'calc(4px + 12%)'},
97 {at: 1, is: '20%'},
98 {at: 1.5, is: 'calc(-5px + 30%)'},
99 ]);
100
101 assertInterpolation({
102 property: 'border-image-width',
103 from: '10px',
104 to: '20'
105 }, [
106 {at: -0.3, is: '10px'},
107 {at: 0, is: '10px'},
108 {at: 0.3, is: '10px'},
109 {at: 0.6, is: '20'},
110 {at: 1, is: '20'},
111 {at: 1.5, is: '20'},
112 ]);
113 assertInterpolation({
114 property: 'border-image-width',
115 from: '10',
116 to: '20px'
117 }, [
118 {at: -0.3, is: '10'},
119 {at: 0, is: '10'},
120 {at: 0.3, is: '10'},
121 {at: 0.6, is: '20px'},
122 {at: 1, is: '20px'},
123 {at: 1.5, is: '20px'},
124 ]);
125 assertInterpolation({
126 property: 'border-image-width',
127 from: '10%',
128 to: '20'
129 }, [
130 {at: -0.3, is: '10%'},
131 {at: 0, is: '10%'},
132 {at: 0.3, is: '10%'},
133 {at: 0.6, is: '20'},
134 {at: 1, is: '20'},
135 {at: 1.5, is: '20'},
136 ]);
137 assertInterpolation({
138 property: 'border-image-width',
139 from: '10',
140 to: '20%'
141 }, [
142 {at: -0.3, is: '10'},
143 {at: 0, is: '10'},
144 {at: 0.3, is: '10'},
145 {at: 0.6, is: '20%'},
146 {at: 1, is: '20%'},
147 {at: 1.5, is: '20%'},
33 ]); 148 ]);
34 </script> 149 </script>
35 </body> 150 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/border-image-outset-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt » ('j') | LayoutTests/virtual/web-animations-css/animations/interpolation/border-image-outset-interpolation-expected.txt » ('J')

Powered by Google App Engine
This is Rietveld 408576698