LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html - Issue 115253003: Layout support for new circle shape syntax

Side by Side Diff: LayoutTests/fast/shapes/shape-inside/shape-inside-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

« no previous file with comments | « LayoutTests/fast/shapes/parsing/parsing-test-utils.js ('k') | LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt » ('j') | Source/core/css/BasicShapeFunctions.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 display: inline-block;	10 display: inline-block;

(...skipping 15 matching lines...) Expand all Loading...
26 -webkit-animation: polygon-anim 2s linear	26 -webkit-animation: polygon-anim 2s linear

27 }	27 }

28	28

29	29

30 @-webkit-keyframes rectangle-anim {	30 @-webkit-keyframes rectangle-anim {

31 from { shape-inside: rectangle(0%, 0%, 100%, 100%); }	31 from { shape-inside: rectangle(0%, 0%, 100%, 100%); }

32 to { shape-inside: rectangle(20%, 20%, 60%, 60%); }	32 to { shape-inside: rectangle(20%, 20%, 60%, 60%); }

33 }	33 }

34	34

35 @-webkit-keyframes circle-anim {	35 @-webkit-keyframes circle-anim {

36 from { shape-inside: circle(50%, 50%, 50%); }	36 from { shape-inside: circle(50% at 50% 50%); }

37 to { shape-inside: circle(20%, 20%, 20%); }	37 to { shape-inside: circle(20% at 20% 20%); }

38 }	38 }

39	39

40 @-webkit-keyframes ellipse-anim {	40 @-webkit-keyframes ellipse-anim {

41 from { shape-inside: ellipse(50%, 50%, 50%, 40%); }	41 from { shape-inside: ellipse(50%, 50%, 50%, 40%); }

42 to { shape-inside: ellipse(20%, 20%, 20%, 20%); }	42 to { shape-inside: ellipse(20%, 20%, 20%, 20%); }

43 }	43 }

44	44

45 @-webkit-keyframes polygon-anim {	45 @-webkit-keyframes polygon-anim {

46 from { shape-inside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100% ); }	46 from { shape-inside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100% ); }

47 to { shape-inside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80% ); }	47 to { shape-inside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80% ); }

48 }	48 }

49	49

50 </style>	50 </style>

51 <script src="../../../animations/resources/animation-test-helpers.js"></script >	51 <script src="../../../animations/resources/animation-test-helpers.js"></script >

52 <script type="text/javascript">	52 <script type="text/javascript">

53 const expectedValues = [	53 const expectedValues = [

54 // [time, element-id, property, expected-value, tolerance]	54 // [time, element-id, property, expected-value, tolerance]

55 [1, "rectangle-box", "shapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0p x)", 0.05],	55 [1, "rectangle-box", "shapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0p x)", 0.05],

56 [1, "circle-box", "shapeInside", "circle(35%, 35%, 35%)", 0.05],	56 [1, "circle-box", "shapeInside", "circle(35% at 35% 35%)", 0.05],

57 [1, "ellipse-box", "shapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],	57 [1, "ellipse-box", "shapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],

58 [1, "polygon-box", "shapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],	58 [1, "polygon-box", "shapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],

59 ];	59 ];

60	60

61 runAnimationTest(expectedValues);	61 runAnimationTest(expectedValues);

62 </script>	62 </script>

63 </head>	63 </head>

64 <body>	64 <body>

65	65

66 <div class="box" id="rectangle-box">Moving Text</div>	66 <div class="box" id="rectangle-box">Moving Text</div>

67 <div class="box" id="circle-box">Moving Text</div>	67 <div class="box" id="circle-box">Moving Text</div>

68 <div class="box" id="ellipse-box">Moving Text</div>	68 <div class="box" id="ellipse-box">Moving Text</div>

69 <div class="box" id="polygon-box">Moving Text</div>	69 <div class="box" id="polygon-box">Moving Text</div>

70	70

71 <div id="result">	71 <div id="result">

72 </div>	72 </div>

73 </body>	73 </body>

74 </html>	74 </html>

OLD	NEW