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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/masking/parsing-clip-path-shape.html

Issue 103413006: Implement parsing of the new ellipse shape syntax. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 7 years 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 | « no previous file | LayoutTests/fast/masking/parsing-clip-path-shape-expected.txt » ('j') | Source/core/css/CSSBasicShapes.h » ('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 <html> 2 <html>
3 <style> 3 <style>
4 * { font-size: 16px; } 4 * { font-size: 16px; }
5 div { font-size: 8px; } 5 div { font-size: 8px; }
6 </style> 6 </style>
7 <body> 7 <body>
8 <script src="../../resources/js-test.js"></script> 8 <script src="../../resources/js-test.js"></script>
9 <script> 9 <script>
10 description('Test that clip-path shapes accept different length units'); 10 description('Test that clip-path shapes accept different length units');
(...skipping 28 matching lines...) Expand all
39 testInner(property, value, null); 39 testInner(property, value, null);
40 testComputed(property, value, 'none'); 40 testComputed(property, value, 'none');
41 } 41 }
42 42
43 // absolute lengths - number serialization, units 43 // absolute lengths - number serialization, units
44 testInner("-webkit-clip-path", "circle(0, 0, 0)", "circle(0px, 0px, 0px)"); 44 testInner("-webkit-clip-path", "circle(0, 0, 0)", "circle(0px, 0px, 0px)");
45 testInner("-webkit-clip-path", "circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px )"); 45 testInner("-webkit-clip-path", "circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px )");
46 testInner("-webkit-clip-path", "circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)"); 46 testInner("-webkit-clip-path", "circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)");
47 testInner("-webkit-clip-path", "circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5 px, 0.5px)"); 47 testInner("-webkit-clip-path", "circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5 px, 0.5px)");
48 48
49 testInner("-webkit-clip-path", "circle(0 at 0 0)", "circle(0px at 0px 0px)");
50 testInner("-webkit-clip-path", "circle(1px at -1px +1px)", "circle(1px at -1px 1 px)");
51 testInner("-webkit-clip-path", "circle(1.5px at -1.5px +1.5px)", "circle(1.5px a t -1.5px 1.5px)");
52 testInner("-webkit-clip-path", "circle(.5px at -.5px +.5px)", "circle(0.5px at - 0.5px 0.5px)");
53
49 testInner("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "recta ngle(1cm, 1mm, 1in, 1px, 1pt, 1pc)"); 54 testInner("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "recta ngle(1cm, 1mm, 1in, 1px, 1pt, 1pc)");
50 55
51 // font-relative lengths - number serialization, units, resolution 56 // font-relative lengths - number serialization, units, resolution
52 testInner("-webkit-clip-path", "circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em )"); 57 testInner("-webkit-clip-path", "circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em )");
53 testInner("-webkit-clip-path", "circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)"); 58 testInner("-webkit-clip-path", "circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)");
54 testInner("-webkit-clip-path", "circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5 em, 0.5em)"); 59 testInner("-webkit-clip-path", "circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5 em, 0.5em)");
55 60
56 testInner("-webkit-clip-path", "circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)") ; 61 testInner("-webkit-clip-path", "circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)") ;
57 // FIXME: Add ch test when it is supported 62 // FIXME: Add ch test when it is supported
58 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1 rem)"); 63 testInner("-webkit-clip-path", "circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1 rem)");
59 64
60 testComputed("-webkit-clip-path", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)"); 65 testComputed("-webkit-clip-path", "circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)");
61 testComputed("-webkit-clip-path", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16 px, 24px)"); 66 testComputed("-webkit-clip-path", "circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16 px, 24px)");
62 67
68 testInner("-webkit-clip-path", "circle(1em at -1em +1em)", "circle(1em at -1em 1 em)");
69 testInner("-webkit-clip-path", "circle(1.5em at -1.5em +1.5em)", "circle(1.5em a t -1.5em 1.5em)");
70 testInner("-webkit-clip-path", "circle(.5em at -.5em +.5em)", "circle(0.5em at - 0.5em 0.5em)");
71
72 testInner("-webkit-clip-path", "circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex) ");
73 // FIXME: Add ch test when it is supported
74 testInner("-webkit-clip-path", "circle(1rem at 1rem 1rem)", "circle(1rem at 1rem 1rem)");
75
76 testComputed("-webkit-clip-path", "circle(1.5em at .5em 1em)", "circle(12px at 4 px 8px)");
77 testComputed("-webkit-clip-path", "circle(1.5rem at .5rem 1rem)", "circle(24px a t 8px 16px)");
78
63 // viewport-percentage lengths - units, resolution 79 // viewport-percentage lengths - units, resolution
64 testInner("-webkit-clip-path", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)") ; 80 testInner("-webkit-clip-path", "circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)") ;
65 testInner("-webkit-clip-path", "circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)") ; 81 testInner("-webkit-clip-path", "circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)") ;
66 testInner("-webkit-clip-path", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vm in, 1vmin)"); 82 testInner("-webkit-clip-path", "circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vm in, 1vmin)");
67 83
68 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw , 1.5vw)"); 84 testComputed("-webkit-clip-path", "circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw , 1.5vw)");
69 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh , 1.5vh)"); 85 testComputed("-webkit-clip-path", "circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh , 1.5vh)");
70 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5v min, 1vmin, 1.5vmin)"); 86 testComputed("-webkit-clip-path", "circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5v min, 1vmin, 1.5vmin)");
71 87
88 testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw) ");
89 testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh) ");
90 testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at 1vmin 1vmin)");
91
92 testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(1.5vw at 0.5vw 1vw)");
93 testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(1.5vh at 0.5vh 1vh)");
94 testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(1.5 vmin at 0.5vmin 1vmin)");
95
72 // percentage lengths - units 96 // percentage lengths - units
73 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1 00%)"); 97 testInner("-webkit-clip-path", "circle(100%, 100%, 100%)", "circle(100%, 100%, 1 00%)");
98 testInner("-webkit-clip-path", "circle(100% at 100% 100%)", "circle(100% at 100% 100%)");
74 testInner("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "recta ngle(45%, 45%, 90%, 60%, 25%, 10%)"); 99 testInner("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "recta ngle(45%, 45%, 90%, 60%, 25%, 10%)");
75 testInner("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)"); 100 testInner("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
bemjb 2013/12/07 00:05:32 You should have some tests for clip-path with the
76 testInner("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(no nzero, 10% 20%, 30% 40%, 40% 50%)"); 101 testInner("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(no nzero, 10% 20%, 30% 40%, 40% 50%)");
77 102
78 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)"); 103 testComputed("-webkit-clip-path", "circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)");
104 testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50 % 100%)");
79 testComputed("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "re ctangle(45%, 45%, 90%, 60%, 25%, 10%)"); 105 testComputed("-webkit-clip-path", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "re ctangle(45%, 45%, 90%, 60%, 25%, 10%)");
80 testComputed("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(10 0%, 100%, 100%, 100%)"); 106 testComputed("-webkit-clip-path", "ellipse(100%, 100%, 100%, 100%)", "ellipse(10 0%, 100%, 100%, 100%)");
81 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon (nonzero, 10% 20%, 30% 40%, 40% 50%)"); 107 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon (nonzero, 10% 20%, 30% 40%, 40% 50%)");
82 108
83 // reject non-lengths 109 // reject non-lengths
84 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1)"); 110 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1)");
85 negativeTest("-webkit-clip-path", "circle(1px, 1px, px)"); 111 negativeTest("-webkit-clip-path", "circle(1px, 1px, px)");
86 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1p)"); 112 negativeTest("-webkit-clip-path", "circle(1px, 1px, 1p)");
87 negativeTest("-webkit-clip-path", "circle(1px, 1px, calc())"); 113 negativeTest("-webkit-clip-path", "circle(1px, 1px, calc())");
88 114
115 negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)");
116 negativeTest("-webkit-clip-path", "circle(px at 1px 1px)");
117 negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)");
118 negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)");
119
89 // reject negative radiuses 120 // reject negative radiuses
90 negativeTest("-webkit-clip-path", "circle(-1.5px, +1.5px, -1.5px)"); 121 negativeTest("-webkit-clip-path", "circle(-1.5px, +1.5px, -1.5px)");
122 negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)");
91 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)"); 123 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)");
92 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)"); 124 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)");
93 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, -1em, 1em)"); 125 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, -1em, 1em)");
94 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, 1em, -1em)"); 126 negativeTest("-webkit-clip-path", "ellipse(1em, 1em, 1em, -1em)");
95 127
96 // reject negative height and width 128 // reject negative height and width
97 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)"); 129 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)");
98 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)"); 130 negativeTest("-webkit-clip-path", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)");
99 131
100 // general negative tests 132 // general negative tests
101 negativeTest("-webkit-clip-path", "circle(0, 0)"); 133 negativeTest("-webkit-clip-path", "circle(0, 0)");
102 negativeTest("-webkit-clip-path", "circle(0)");
103 negativeTest("-webkit-clip-path", "circle()");
104 negativeTest("-webkit-clip-path", "polygon(0, 0)"); 134 negativeTest("-webkit-clip-path", "polygon(0, 0)");
105 negativeTest("-webkit-clip-path", "polygon(0 0, 0)"); 135 negativeTest("-webkit-clip-path", "polygon(0 0, 0)");
106 negativeTest("-webkit-clip-path", "polygon(0)"); 136 negativeTest("-webkit-clip-path", "polygon(0)");
107 negativeTest("-webkit-clip-path", "polygon()"); 137 negativeTest("-webkit-clip-path", "polygon()");
108 negativeTest("-webkit-clip-path", "polygon(evenodd)"); 138 negativeTest("-webkit-clip-path", "polygon(evenodd)");
109 negativeTest("-webkit-clip-path", "polygon(nonzero)"); 139 negativeTest("-webkit-clip-path", "polygon(nonzero)");
110 140
111 </script> 141 </script>
112 </body> 142 </body>
113 </html> 143 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/masking/parsing-clip-path-shape-expected.txt » ('j') | Source/core/css/CSSBasicShapes.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698