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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2814453002: Add CSS conic-gradient calc() support (Closed)
Patch Set: Created 3 years, 8 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 | « no previous file | third_party/WebKit/Source/core/css/CSSGradientValue.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 20 matching lines...) Expand all
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(from 0 black, white)" , com puted: "none" }, 35 { style: "conic-gradient(from 0 black, white)" , com puted: "none" },
36 { style: "conic-gradient(from 0 at top left black, white)" , com puted: "none" }, 36 { style: "conic-gradient(from 0 at top left black, white)" , com puted: "none" },
37 { style: "conic-gradient(from 0, at top left, black, white)" , com puted: "none" }, 37 { style: "conic-gradient(from 0, at top left, black, white)" , com puted: "none" },
38 { style: "conic-gradient(at top left from 0, black, white)" , com puted: "none" }, 38 { 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" }, 39 { style: "conic-gradient(black 10% 20% 30%, white)" , com puted: "none" },
40 { style: "conic-gradient(black, 30% 50%, white)" , com puted: "none" }, 40 { style: "conic-gradient(black, 30% 50%, white)" , com puted: "none" },
41 { style: "conic-gradient(from calc(10), black, white)" , com puted: "none" },
42 { style: "conic-gradient(from calc(10deg + 20%), black, white)" , com puted: "none" },
43 { style: "conic-gradient(black calc(10), white)" , com puted: "none" },
44 { style: "conic-gradient(black calc(10deg + 20%), white)" , com puted: "none" },
41 45
42 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" }, 46 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" },
43 { style: "conic-gradient(black 0, white)" , computed: "conic-gradien t(black 0deg, white)" }, 47 { style: "conic-gradient(black 0, white)" , computed: "conic-gradien t(black 0deg, white)" },
44 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" }, 48 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" },
45 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" }, 49 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" },
46 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" }, 50 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" },
47 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" }, 51 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" },
48 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" }, 52 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" },
49 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" }, 53 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" },
50 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" }, 54 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" },
(...skipping 11 matching lines...) Expand all
62 66
63 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" }, 67 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" },
64 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" }, 68 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" },
65 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" }, 69 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" },
66 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" }, 70 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" },
67 71
68 { style: "conic-gradient(from 0, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" }, 72 { style: "conic-gradient(from 0, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" },
69 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" }, 73 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" },
70 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" }, 74 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" },
71 75
72 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed : "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" }, 76 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)" , c omputed: "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" },
73 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" }, 77 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" },
74 78
79 { style: "conic-gradient(from calc(10deg), black, white)" , computed: "conic-gradient(from calc(10deg), black, white)" },
80 { style: "conic-gradient(from calc(10deg + 35deg), black, white)", computed: "conic-gradient(from calc(45deg), black, white)" },
81 { style: "conic-gradient(black calc(10deg), white)" , computed: "conic-gradient(black calc(10deg), white)" },
82 { style: "conic-gradient(black calc(10deg + 20deg), white)" , computed: "conic-gradient(black calc(30deg), white)" },
83 { style: "conic-gradient(black calc(10%), white)" , computed: "conic-gradient(black calc(10%), white)" },
84 { style: "conic-gradient(black calc(10% + 20%), white)" , computed: "conic-gradient(black calc(30%), white)" },
85
75 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les 86 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les
76 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" }, 87 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" },
77 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" }, 88 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" },
78 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" }, 89 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" },
79 { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic -gradient(from 0deg at center center, rgb(255, 0, 102), gold)" }, 90 { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic -gradient(from 0deg at center center, rgb(255, 0, 102), gold)" },
80 { style: "conic-gradient(#f06 0%, gold 100%)" , computed: "conic -gradient(rgb(255, 0, 102) 0%, gold 100%)" }, 91 { style: "conic-gradient(#f06 0%, gold 100%)" , computed: "conic -gradient(rgb(255, 0, 102) 0%, gold 100%)" },
81 { style: "conic-gradient(#f06 0deg, gold 1turn)" , computed: "conic -gradient(rgb(255, 0, 102) 0deg, gold 1turn)" }, 92 { style: "conic-gradient(#f06 0deg, gold 1turn)" , computed: "conic -gradient(rgb(255, 0, 102) 0deg, gold 1turn)" },
82 93
83 { style: "conic-gradient(white -50%, black 150%)" , computed: "conic-gr adient(white -50%, black 150%)" }, 94 { style: "conic-gradient(white -50%, black 150%)" , computed: "conic-gr adient(white -50%, black 150%)" },
84 { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gr adient(white -180deg, black 540deg)" }, 95 { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gr adient(white -180deg, black 540deg)" },
(...skipping 14 matching lines...) Expand all
99 }, "conic-gradient parsing"); 110 }, "conic-gradient parsing");
100 111
101 test(function() { 112 test(function() {
102 tests.forEach(function(test) { 113 tests.forEach(function(test) {
103 assert_computed_style('background-image', 'repeating-' + test.style, 114 assert_computed_style('background-image', 'repeating-' + test.style,
104 test.computed == 'none' ? test.computed : 'repeating-' + test.computed); 115 test.computed == 'none' ? test.computed : 'repeating-' + test.computed);
105 }); 116 });
106 }, "repeating-conic-gradient parsing"); 117 }, "repeating-conic-gradient parsing");
107 </script> 118 </script>
108 </body> 119 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSGradientValue.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698