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

Side by Side Diff: LayoutTests/css3/masking/clip-path-animation.html

Issue 115253003: Layout support for new circle shape syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Use FloatSize/FloatPoint's more Created 6 years, 11 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <html> 3 <html>
4 <head> 4 <head>
5 <style> 5 <style>
6 .box { 6 .box {
7 height: 100px; 7 height: 100px;
8 width: 100px; 8 width: 100px;
9 margin: 10px; 9 margin: 10px;
10 background-color: blue; 10 background-color: blue;
(...skipping 16 matching lines...) Expand all
27 -webkit-animation: polygon-anim 2s linear 27 -webkit-animation: polygon-anim 2s linear
28 } 28 }
29 29
30 30
31 @-webkit-keyframes rectangle-anim { 31 @-webkit-keyframes rectangle-anim {
32 from { -webkit-clip-path: rectangle(0%, 0%, 100%, 100%); } 32 from { -webkit-clip-path: rectangle(0%, 0%, 100%, 100%); }
33 to { -webkit-clip-path: rectangle(20%, 20%, 60%, 60%); } 33 to { -webkit-clip-path: rectangle(20%, 20%, 60%, 60%); }
34 } 34 }
35 35
36 @-webkit-keyframes circle-anim { 36 @-webkit-keyframes circle-anim {
37 from { -webkit-clip-path: circle(50%, 50%, 50%); } 37 from { -webkit-clip-path: circle(50% at 50% 50%); }
38 to { -webkit-clip-path: circle(20%, 20%, 20%); } 38 to { -webkit-clip-path: circle(20% at 20% 20%); }
39 } 39 }
40 40
41 @-webkit-keyframes ellipse-anim { 41 @-webkit-keyframes ellipse-anim {
42 from { -webkit-clip-path: ellipse(50%, 50%, 50%, 40%); } 42 from { -webkit-clip-path: ellipse(50%, 50%, 50%, 40%); }
43 to { -webkit-clip-path: ellipse(20%, 20%, 20%, 20%); } 43 to { -webkit-clip-path: ellipse(20%, 20%, 20%, 20%); }
44 } 44 }
45 45
46 @-webkit-keyframes polygon-anim { 46 @-webkit-keyframes polygon-anim {
47 from { -webkit-clip-path: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); } 47 from { -webkit-clip-path: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
48 to { -webkit-clip-path: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20 % 80%); } 48 to { -webkit-clip-path: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20 % 80%); }
49 } 49 }
50 50
51 </style> 51 </style>
52 <script src="../../animations/resources/animation-test-helpers.js"></script> 52 <script src="../../animations/resources/animation-test-helpers.js"></script>
53 <script type="text/javascript"> 53 <script type="text/javascript">
54 const expectedValues = [ 54 const expectedValues = [
55 // [time, element-id, property, expected-value, tolerance] 55 // [time, element-id, property, expected-value, tolerance]
56 [1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05], 56 [1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
57 [1, "circle-box", "webkitClipPath", "circle(35%, 35%, 35%)", 0.05], 57 [1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
58 [1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05], 58 [1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
59 [1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 9 0% 90%, 10% 90%)", 0.05], 59 [1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 9 0% 90%, 10% 90%)", 0.05],
60 ]; 60 ];
61 61
62 runAnimationTest(expectedValues); 62 runAnimationTest(expectedValues);
63 </script> 63 </script>
64 </head> 64 </head>
65 <body> 65 <body>
66 66
67 <div class="box" id="rectangle-box"></div> 67 <div class="box" id="rectangle-box"></div>
68 <div class="box" id="circle-box"></div> 68 <div class="box" id="circle-box"></div>
69 <div class="box" id="ellipse-box"></div> 69 <div class="box" id="ellipse-box"></div>
70 <div class="box" id="polygon-box"></div> 70 <div class="box" id="polygon-box"></div>
71 71
72 <div id="result"> 72 <div id="result">
73 </div> 73 </div>
74 </body> 74 </body>
75 </html> 75 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698