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

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html

Issue 209443007: Remove shape-inside support (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove now unused segmentIsEmpty Created 6 years, 9 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
(Empty)
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <style>
6 .box {
7 height: 100px;
8 width: 100px;
9 margin: 10px;
10 display: inline-block;
11 }
12
13 #circle-box {
14 -webkit-animation: circle-anim 2s linear
15 }
16
17 #ellipse-box {
18 -webkit-animation: ellipse-anim 2s linear
19 }
20
21 #polygon-box {
22 -webkit-animation: polygon-anim 2s linear
23 }
24
25
26 @-webkit-keyframes circle-anim {
27 from { shape-inside: circle(50% at 50% 50%); }
28 to { shape-inside: circle(20% at 20% 20%); }
29 }
30
31 @-webkit-keyframes ellipse-anim {
32 from { shape-inside: ellipse(50% 40% at 50% 50%); }
33 to { shape-inside: ellipse(20% 20% at 20% 20%); }
34 }
35
36 @-webkit-keyframes polygon-anim {
37 from { shape-inside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100% ); }
38 to { shape-inside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80% ); }
39 }
40
41 </style>
42 <script src="../../../animations/resources/animation-test-helpers.js"></script >
43 <script type="text/javascript">
44 const expectedValues = [
45 // [time, element-id, property, expected-value, tolerance]
46 // FIXME: BasicShapeInset::blend is not implemented, when it is add an inset test.
47 // [1, "inset-box", "shapeInside", "inset(10% 10% 10% 10% round 0px 0px 0px 0px / 0px 0px 0px 0px)", 0.05],
48 [1, "circle-box", "shapeInside", "circle(35% at 35% 35%)", 0.05],
49 [1, "ellipse-box", "shapeInside", "ellipse(35% 30% at 35% 35%)", 0.05],
50 [1, "polygon-box", "shapeInside", "polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
51 ];
52
53 runAnimationTest(expectedValues);
54 </script>
55 </head>
56 <body>
57
58 <div class="box" id="circle-box">Moving Text</div>
59 <div class="box" id="ellipse-box">Moving Text</div>
60 <div class="box" id="polygon-box">Moving Text</div>
61
62 <div id="result">
63 </div>
64 </body>
65 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698