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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2775103002: Conic gradient parsing support (Closed)
Patch Set: review 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.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src="../../resources/testharness.js"></script>
3 <script src="../../resources/testharnessreport.js"></script>
4 <script src="../../css-parser/resources/property-parsing-test.js"></script>
5
6 <body>
7 <script>
8 function assert_computed_style(property, value, expectedValue) {
9 if (expectedValue === undefined)
10 expectedValue = value;
11
12 test(function() {
13 var div = document.createElement('div');
14 div.setAttribute("style", property + ": " + value);
15 document.head.appendChild(div);
16 var computedStyleValue = getComputedStyle(div)[property];
17 div.remove();
18 assert_equals(computedStyleValue, expectedValue);
19 }, "Computed style after parsing style='" + property + ": " + value + "'");
20 }
21
22 var tests = [
23 { style: "conic-gradient(black)" , com puted: "none" },
24 { style: "conic-gradient(black 0%)" , com puted: "none" },
25 { style: "conic-gradient(black 0%, 25%)" , com puted: "none" },
26 { style: "conic-gradient(black 0px, white)" , com puted: "none" },
27 { style: "conic-gradient(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" },
30 { style: "conic-gradient(top left, 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" },
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" },
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" },
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" },
39
40 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" },
41 { style: "conic-gradient(black 0, white)" , computed: "conic-gradien t(black 0deg, white)" },
42 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" },
43 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" },
44 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" },
45 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" },
46 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" },
47 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" },
48 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" },
49 { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradien t(black 10%, white 180deg)" },
50
51 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" },
52 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" },
53 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" },
54 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" },
55
56 { style: "conic-gradient(from 0, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" },
57 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" },
58 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" },
59
60 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed : "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" },
61 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" },
62
63 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les
64 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" },
65 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" },
66 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" },
67 { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic -gradient(from 0deg at center center, rgb(255, 0, 102), gold)" },
68 { style: "conic-gradient(#f06 0%, gold 100%)" , computed: "conic -gradient(rgb(255, 0, 102) 0%, gold 100%)" },
69 { style: "conic-gradient(#f06 0deg, gold 1turn)" , computed: "conic -gradient(rgb(255, 0, 102) 0deg, gold 1turn)" },
70
71 { style: "conic-gradient(white -50%, black 150%)" , computed: "conic-gr adient(white -50%, black 150%)" },
72 { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gr adient(white -180deg, black 540deg)" },
73 { style: "conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", computed: "conic-gr adient(rgb(191, 191, 191), rgb(63, 63, 63))" },
74
75 { style: "conic-gradient(from 45deg, white, black, white)" , computed: "conic-gradient(from 45deg, white, black, white)" },
76 { style: "conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0 %,87.5%))", computed: "conic-gradient(rgb(223, 223, 223), white 45deg, black 225 deg, rgb(223, 223, 223))" },
77
78 { style: "conic-gradient(white 45deg, black 225deg, white 405deg)" , compu ted: "conic-gradient(white 45deg, black 225deg, white 405deg)" },
79 { style: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red", compu ted: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red)" },
80 { style: "conic-gradient(gold, #f06 20deg)" , compu ted: "conic-gradient(gold, rgb(255, 0, 102) 20deg)" },
81 ];
82
83 test(function() {
84 tests.forEach(function(test) {
85 assert_computed_style('background-image', test.style, test.computed);
86 });
87 }, "conic-gradient parsing");
88
89 test(function() {
90 tests.forEach(function(test) {
91 assert_computed_style('background-image', 'repeating-' + test.style,
92 test.computed == 'none' ? test.computed : 'repeating-' + test.computed);
93 });
94 }, "repeating-conic-gradient parsing");
95 </script>
96 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSGradientValue.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698