LayoutTests/css3/masking/clip-path-animation.html - Issue 115253003: Layout support for new circle shape syntax

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

« no previous file with comments | « LayoutTests/animations/interpolation/shape-outside-expected.txt ('k') | LayoutTests/css3/masking/clip-path-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 background-color: blue;	10 background-color: blue;

(...skipping 16 matching lines...) Expand all Loading...
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>

OLD	NEW