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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html

Issue 2908053002: CSS Conic Gradients: do not support unitless 0 angles (Closed)
Patch Set: Created 3 years, 6 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 <script src="../../resources/testharness.js"></script> 2 <script src="../../resources/testharness.js"></script>
3 <script src="../../resources/testharnessreport.js"></script> 3 <script src="../../resources/testharnessreport.js"></script>
4 <script src="../../css-parser/resources/property-parsing-test.js"></script> 4 <script src="../../css-parser/resources/property-parsing-test.js"></script>
5 5
6 <body> 6 <body>
7 <script> 7 <script>
8 function assert_computed_style(property, value, expectedValue) { 8 function assert_computed_style(property, value, expectedValue) {
9 if (expectedValue === undefined) 9 if (expectedValue === undefined)
10 expectedValue = value; 10 expectedValue = value;
(...skipping 14 matching lines...) Expand all
25 { style: "conic-gradient(black 0%, 25%)" , com puted: "none" }, 25 { style: "conic-gradient(black 0%, 25%)" , com puted: "none" },
26 { style: "conic-gradient(black 0px, white)" , com puted: "none" }, 26 { style: "conic-gradient(black 0px, white)" , com puted: "none" },
27 { style: "conic-gradient(black, , white)" , com puted: "none" }, 27 { style: "conic-gradient(black, , white)" , com puted: "none" },
28 { style: "conic-gradient(0%, black, white)" , com puted: "none" }, 28 { style: "conic-gradient(0%, black, white)" , com puted: "none" },
29 { style: "conic-gradient(center, black, white)" , com puted: "none" }, 29 { style: "conic-gradient(center, black, white)" , com puted: "none" },
30 { style: "conic-gradient(top left, black, white)" , com puted: "none" }, 30 { style: "conic-gradient(top left, black, white)" , com puted: "none" },
31 { style: "conic-gradient(at bottom bottom, black, white)" , com puted: "none" }, 31 { style: "conic-gradient(at bottom bottom, black, white)" , com puted: "none" },
32 { style: "conic-gradient(at left left, black, white)" , com puted: "none" }, 32 { style: "conic-gradient(at left left, black, white)" , com puted: "none" },
33 { style: "conic-gradient(at top left black, white)" , com puted: "none" }, 33 { style: "conic-gradient(at top left black, white)" , com puted: "none" },
34 { style: "conic-gradient(black 0%, 10%, 10%, green .5turn, 50%, white)", com puted: "none" }, 34 { style: "conic-gradient(black 0%, 10%, 10%, green .5turn, 50%, white)", com puted: "none" },
35 { style: "conic-gradient(black 0, white)" , com puted: "none" },
36 { style: "conic-gradient(black 10%, white 0)" , com puted: "none" },
37 { style: "conic-gradient(from 0, black, white)" , com puted: "none" },
35 { style: "conic-gradient(from 0 black, white)" , com puted: "none" }, 38 { style: "conic-gradient(from 0 black, white)" , com puted: "none" },
39 { style: "conic-gradient(from 0deg black, white)" , com puted: "none" },
36 { style: "conic-gradient(from 0 at top left black, white)" , com puted: "none" }, 40 { style: "conic-gradient(from 0 at top left black, white)" , com puted: "none" },
41 { style: "conic-gradient(from 0deg at top left black, white)" , com puted: "none" },
37 { style: "conic-gradient(from 0, at top left, black, white)" , com puted: "none" }, 42 { style: "conic-gradient(from 0, at top left, black, white)" , com puted: "none" },
43 { style: "conic-gradient(from 0deg, at top left, black, white)" , com puted: "none" },
38 { style: "conic-gradient(at top left from 0, black, white)" , com puted: "none" }, 44 { style: "conic-gradient(at top left from 0, black, white)" , com puted: "none" },
39 { style: "conic-gradient(black 10% 20% 30%, white)" , com puted: "none" }, 45 { style: "conic-gradient(black 10% 20% 30%, white)" , com puted: "none" },
40 { style: "conic-gradient(black, 30% 50%, white)" , com puted: "none" }, 46 { style: "conic-gradient(black, 30% 50%, white)" , com puted: "none" },
41 { style: "conic-gradient(black, white calc(360deg / 10 + 50%)" , com puted: "none" }, 47 { style: "conic-gradient(black, white calc(360deg / 10 + 50%)" , com puted: "none" },
42 48
43 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" }, 49 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" },
44 { style: "conic-gradient(black 0, white)" , computed: "conic-gradien t(black 0deg, white)" },
45 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" }, 50 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" },
46 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" }, 51 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" },
47 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" }, 52 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" },
48 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" }, 53 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" },
49 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" }, 54 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" },
50 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" }, 55 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" },
51 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" }, 56 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" },
52 { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradien t(black 10%, white 180deg)" }, 57 { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradien t(black 10%, white 180deg)" },
53 58
54 { style: "conic-gradient(black 10% 20%, white)" , c omputed: "conic-gradient(black 10% 20%, white)" }, 59 { style: "conic-gradient(black 10% 20%, white)" , c omputed: "conic-gradient(black 10% 20%, white)" },
55 { style: "conic-gradient(black, white 270deg 360deg)" , c omputed: "conic-gradient(black, white 270deg 360deg)" }, 60 { style: "conic-gradient(black, white 270deg 360deg)" , c omputed: "conic-gradient(black, white 270deg 360deg)" },
56 { style: "conic-gradient(black 10% 20%, white 270deg 360deg)" , c omputed: "conic-gradient(black 10% 20%, white 270deg 360deg)" }, 61 { style: "conic-gradient(black 10% 20%, white 270deg 360deg)" , c omputed: "conic-gradient(black 10% 20%, white 270deg 360deg)" },
57 { style: "conic-gradient(blue 10%, blue 20%, white)" , c omputed: "conic-gradient(blue 10% 20%, white)" }, 62 { style: "conic-gradient(blue 10%, blue 20%, white)" , c omputed: "conic-gradient(blue 10% 20%, white)" },
58 { style: "conic-gradient(blue 10%, blue 20%, blue 30%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30%, white)" }, 63 { style: "conic-gradient(blue 10%, blue 20%, blue 30%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30%, white)" },
59 { style: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30% 40%, white)" }, 64 { style: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30% 40%, white)" },
60 { style: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)", c omputed: "conic-gradient(blue 10% 20%, white 270deg 360deg)" }, 65 { style: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)", c omputed: "conic-gradient(blue 10% 20%, white 270deg 360deg)" },
61 { style: "conic-gradient(blue 10%, blue 20% 30%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30%, white)" }, 66 { style: "conic-gradient(blue 10%, blue 20% 30%, white)" , c omputed: "conic-gradient(blue 10% 20%, blue 30%, white)" },
62 { style: "conic-gradient(blue, blue, blue, white)" , c omputed: "conic-gradient(blue, blue, blue, white)" }, 67 { style: "conic-gradient(blue, blue, blue, white)" , c omputed: "conic-gradient(blue, blue, blue, white)" },
63 68
64 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" }, 69 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" },
65 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" }, 70 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" },
66 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" }, 71 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" },
67 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" }, 72 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" },
68 73
69 { style: "conic-gradient(from 0, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" }, 74 { style: "conic-gradient(from 0deg, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" },
70 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" }, 75 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" },
71 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" }, 76 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" },
72 77
73 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed : "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" }, 78 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed : "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" },
74 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" }, 79 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" },
75 80
76 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les 81 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les
77 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" }, 82 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" },
78 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" }, 83 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" },
79 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" }, 84 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" },
(...skipping 21 matching lines...) Expand all
101 }, "conic-gradient parsing"); 106 }, "conic-gradient parsing");
102 107
103 test(function() { 108 test(function() {
104 tests.forEach(function(test) { 109 tests.forEach(function(test) {
105 assert_computed_style('background-image', 'repeating-' + test.style, 110 assert_computed_style('background-image', 'repeating-' + test.style,
106 test.computed == 'none' ? test.computed : 'repeating-' + test.computed); 111 test.computed == 'none' ? test.computed : 'repeating-' + test.computed);
107 }); 112 });
108 }, "repeating-conic-gradient parsing"); 113 }, "repeating-conic-gradient parsing");
109 </script> 114 </script>
110 </body> 115 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698