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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2775103002: Conic gradient parsing support (Closed)
Patch Set: from <angle> support Created 3 years, 9 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSGradientValue.h » ('j') | third_party/WebKit/Source/core/css/CSSGradientValue.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html
diff --git a/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html b/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html
new file mode 100644
index 0000000000000000000000000000000000000000..d2bb2539c80a4f1599a75b1fcb47c72a29465b52
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<body>
+<script>
+
+ function computedValue(css)
fs 2017/03/28 15:59:20 LayoutTests/css-parser/resources/property-parsing-
f(malita) 2017/03/28 17:16:45 Thanks for the pointer. Updated to use that, simi
+ {
+ var div = document.createElement('div');
+ div.setAttribute('style', css);
+ document.body.appendChild(div);
+
+ var result = getComputedStyle(div).backgroundImage;
+ document.body.removeChild(div);
+ return result;
+ }
+
+ var tests = [
+ { style: "conic-gradient(black)" , computed: "none" },
+ { style: "conic-gradient(black 0%)" , computed: "none" },
+ { style: "conic-gradient(black 0%, 25%)" , computed: "none" },
+ { style: "conic-gradient(black 0px, white)" , computed: "none" },
+ { style: "conic-gradient(black, , white)" , computed: "none" },
+ { style: "conic-gradient(0%, black, white)" , computed: "none" },
+ { style: "conic-gradient(center, black, white)" , computed: "none" },
+ { style: "conic-gradient(top left, black, white)" , computed: "none" },
+ { style: "conic-gradient(at bottom bottom, black, white)" , computed: "none" },
+ { style: "conic-gradient(at left left, black, white)" , computed: "none" },
+ { style: "conic-gradient(at top left black, white)" , computed: "none" },
+ { style: "conic-gradient(black 0%, 10%, 10%, green .5turn, 50%, white)", computed: "none" },
+ { style: "conic-gradient(from 0 black, white)" , computed: "none" },
+ { style: "conic-gradient(from 0 at top left black, white)" , computed: "none" },
+ { style: "conic-gradient(from 0, at top left, black, white)" , computed: "none" },
+ { style: "conic-gradient(at top left from 0, black, white)" , computed: "none" },
+
+ { style: "conic-gradient(black, white)" , computed: "conic-gradient(black, white)" },
+ { style: "conic-gradient(black 0, white)" , computed: "conic-gradient(black 0deg, white)" },
+ { style: "conic-gradient(black 0%, white)" , computed: "conic-gradient(black 0%, white)" },
+ { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradient(black 0deg, white)" },
+ { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradient(black 0grad, white)" },
+ { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradient(black 0rad, white)" },
+ { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradient(black 0turn, white)" },
+ { style: "conic-gradient(black, white 50%)" , computed: "conic-gradient(black, white 50%)" },
+ { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradient(black 10%, white 50%)" },
+ { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradient(black 10%, white 180deg)" },
+
+ { style: "conic-gradient(at top left, black, white)" , computed: "conic-gradient(at left top, black, white)" },
+ { style: "conic-gradient(at bottom right, black, white)" , computed: "conic-gradient(at right bottom, black, white)" },
+ { style: "conic-gradient(at center, black, white)" , computed: "conic-gradient(at center center, black, white)" },
+ { style: "conic-gradient(at center center, black, white)", computed: "conic-gradient(at center center, black, white)" },
+
+ { style: "conic-gradient(from 0, black, white)" , computed: "conic-gradient(from 0deg, black, white)" },
+ { style: "conic-gradient(from 10deg, black, white)" , computed: "conic-gradient(from 10deg, black, white)" },
+ { style: "conic-gradient(from 10deg at center, black, white)", computed: "conic-gradient(from 10deg at center center, black, white)" },
+
+ { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed: "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" },
+ { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", computed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" },
+
+ // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examples
+ { style: "conic-gradient(#f06, gold)" , computed: "conic-gradient(rgb(255, 0, 102), gold)" },
+ { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic-gradient(at 50% 50%, rgb(255, 0, 102), gold)" },
+ { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic-gradient(from 0deg, rgb(255, 0, 102), gold)" },
+ { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic-gradient(from 0deg at center center, rgb(255, 0, 102), gold)" },
+ { style: "conic-gradient(#f06 0%, gold 100%)" , computed: "conic-gradient(rgb(255, 0, 102) 0%, gold 100%)" },
+ { style: "conic-gradient(#f06 0deg, gold 1turn)" , computed: "conic-gradient(rgb(255, 0, 102) 0deg, gold 1turn)" },
+
+ { style: "conic-gradient(white -50%, black 150%)" , computed: "conic-gradient(white -50%, black 150%)" },
+ { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gradient(white -180deg, black 540deg)" },
+ { style: "conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", computed: "conic-gradient(rgb(191, 191, 191), rgb(63, 63, 63))" },
+
+ { style: "conic-gradient(from 45deg, white, black, white)" , computed: "conic-gradient(from 45deg, white, black, white)" },
+ { 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 225deg, rgb(223, 223, 223))" },
+
+ { style: "conic-gradient(white 45deg, black 225deg, white 405deg)", computed: "conic-gradient(white 45deg, black 225deg, white 405deg)" },
+
+ { style: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red", computed: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red)" },
+ { style: "conic-gradient(gold, #f06 20deg)", computed: "conic-gradient(gold, rgb(255, 0, 102) 20deg)" },
+ ];
+
+ test(function() {
+ tests.forEach(function(test) {
+ assert_equals(computedValue("background-image: " + test.style), test.computed);
+ });
+ }, "conic-gradient parsing");
+
+ test(function() {
+ tests.forEach(function(test) {
+ assert_equals(computedValue("background-image: repeating-" + test.style),
+ test.computed == "none" ? test.computed : "repeating-" + test.computed);
+ });
+ }, "repeating-conic-gradient parsing");
+</script>
+</body>
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/css/CSSGradientValue.h » ('j') | third_party/WebKit/Source/core/css/CSSGradientValue.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698