third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html - Issue 2775103002: Conic gradient parsing support

Side by Side 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, 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:

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script src="../../resources/testharness.js"></script>

	3 <script src="../../resources/testharnessreport.js"></script>

	4

	5 <body>

	6 <script>

	7

	8 function computedValue(css)
	fs 2017/03/28 15:59:20 LayoutTests/css-parser/resources/property-parsing- LayoutTests/css-parser/resources/property-parsing-test.js has some spiffy helpers for these type of things. Might be worth reusing if possible. (Tests a bit more things, although it actually doesn't test computed style. Doesn't look like all of these tests need computed style though. (And specified style is also interesting to check what it round-trips to.) We can do this as a follow-up though. f(malita) 2017/03/28 17:16:45 Thanks for the pointer. Updated to use that, simi Show quoted text On 2017/03/28 15:59:20, fs wrote: > LayoutTests/css-parser/resources/property-parsing-test.js has some spiffy > helpers for these type of things. Might be worth reusing if possible. (Tests a > bit more things, although it actually doesn't test computed style. Doesn't look > like all of these tests need computed style though. (And specified style is also > interesting to check what it round-trips to.) We can do this as a follow-up > though. Thanks for the pointer. Updated to use that, similar to https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/css3/filt...
	9 {

	10 var div = document.createElement('div');

	11 div.setAttribute('style', css);

	12 document.body.appendChild(div);

	13

	14 var result = getComputedStyle(div).backgroundImage;

	15 document.body.removeChild(div);

	16 return result;

	17 }

	18

	19 var tests = [

	20 { style: "conic-gradient(black)" , com puted: "none" },

	21 { style: "conic-gradient(black 0%)" , com puted: "none" },

	22 { style: "conic-gradient(black 0%, 25%)" , com puted: "none" },

	23 { style: "conic-gradient(black 0px, white)" , com puted: "none" },

	24 { style: "conic-gradient(black, , white)" , com puted: "none" },

	25 { style: "conic-gradient(0%, black, white)" , com puted: "none" },

	26 { style: "conic-gradient(center, black, white)" , com puted: "none" },

	27 { style: "conic-gradient(top left, black, white)" , com puted: "none" },

	28 { style: "conic-gradient(at bottom bottom, black, white)" , com puted: "none" },

	29 { style: "conic-gradient(at left left, black, white)" , com puted: "none" },

	30 { style: "conic-gradient(at top left black, white)" , com puted: "none" },

	31 { style: "conic-gradient(black 0%, 10%, 10%, green .5turn, 50%, white)", com puted: "none" },

	32 { style: "conic-gradient(from 0 black, white)" , com puted: "none" },

	33 { style: "conic-gradient(from 0 at top left black, white)" , com puted: "none" },

	34 { style: "conic-gradient(from 0, at top left, black, white)" , com puted: "none" },

	35 { style: "conic-gradient(at top left from 0, black, white)" , com puted: "none" },

	36

	37 { style: "conic-gradient(black, white)" , computed: "conic-gradien t(black, white)" },

	38 { style: "conic-gradient(black 0, white)" , computed: "conic-gradien t(black 0deg, white)" },

	39 { style: "conic-gradient(black 0%, white)" , computed: "conic-gradien t(black 0%, white)" },

	40 { style: "conic-gradient(black 0deg, white)" , computed: "conic-gradien t(black 0deg, white)" },

	41 { style: "conic-gradient(black 0grad, white)" , computed: "conic-gradien t(black 0grad, white)" },

	42 { style: "conic-gradient(black 0rad, white)" , computed: "conic-gradien t(black 0rad, white)" },

	43 { style: "conic-gradient(black 0turn, white)" , computed: "conic-gradien t(black 0turn, white)" },

	44 { style: "conic-gradient(black, white 50%)" , computed: "conic-gradien t(black, white 50%)" },

	45 { style: "conic-gradient(black 10%, white 50%)" , computed: "conic-gradien t(black 10%, white 50%)" },

	46 { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradien t(black 10%, white 180deg)" },

	47

	48 { style: "conic-gradient(at top left, black, white)" , computed: "conic- gradient(at left top, black, white)" },

	49 { style: "conic-gradient(at bottom right, black, white)" , computed: "conic- gradient(at right bottom, black, white)" },

	50 { style: "conic-gradient(at center, black, white)" , computed: "conic- gradient(at center center, black, white)" },

	51 { style: "conic-gradient(at center center, black, white)", computed: "conic- gradient(at center center, black, white)" },

	52

	53 { style: "conic-gradient(from 0, black, white)" , computed: "co nic-gradient(from 0deg, black, white)" },

	54 { style: "conic-gradient(from 10deg, black, white)" , computed: "co nic-gradient(from 10deg, black, white)" },

	55 { style: "conic-gradient(from 10deg at center, black, white)", computed: "co nic-gradient(from 10deg at center center, black, white)" },

	56

	57 { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed : "conic-gradient(black 0%, 10%, green 0.5turn, 50%, white)" },

	58 { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", c omputed: "conic-gradient(black 0deg, 0%, green 0.5turn, 50%, white 1turn)" },

	59

	60 // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examp les

	61 { style: "conic-gradient(#f06, gold)" , computed: "conic -gradient(rgb(255, 0, 102), gold)" },

	62 { style: "conic-gradient(at 50% 50%, #f06, gold)" , computed: "conic -gradient(at 50% 50%, rgb(255, 0, 102), gold)" },

	63 { style: "conic-gradient(from 0deg, #f06, gold)" , computed: "conic -gradient(from 0deg, rgb(255, 0, 102), gold)" },

	64 { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic -gradient(from 0deg at center center, rgb(255, 0, 102), gold)" },

	65 { style: "conic-gradient(#f06 0%, gold 100%)" , computed: "conic -gradient(rgb(255, 0, 102) 0%, gold 100%)" },

	66 { style: "conic-gradient(#f06 0deg, gold 1turn)" , computed: "conic -gradient(rgb(255, 0, 102) 0deg, gold 1turn)" },

	67

	68 { style: "conic-gradient(white -50%, black 150%)" , computed: "conic-gr adient(white -50%, black 150%)" },

	69 { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gr adient(white -180deg, black 540deg)" },

	70 { style: "conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", computed: "conic-gr adient(rgb(191, 191, 191), rgb(63, 63, 63))" },

	71

	72 { style: "conic-gradient(from 45deg, white, black, white)" , computed: "conic-gradient(from 45deg, white, black, white)" },

	73 { 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))" },

	74

	75 { style: "conic-gradient(white 45deg, black 225deg, white 405deg)", computed : "conic-gradient(white 45deg, black 225deg, white 405deg)" },

	76

	77 { style: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red", compu ted: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red)" },

	78 { style: "conic-gradient(gold, #f06 20deg)", computed: "conic-gradient(gold, rgb(255, 0, 102) 20deg)" },

	79 ];

	80

	81 test(function() {

	82 tests.forEach(function(test) {

	83 assert_equals(computedValue("background-image: " + test.style), test.compu ted);

	84 });

	85 }, "conic-gradient parsing");

	86

	87 test(function() {

	88 tests.forEach(function(test) {

	89 assert_equals(computedValue("background-image: repeating-" + test.style),

	90 test.computed == "none" ? test.computed : "repeating-" + test.computed);

	91 });

	92 }, "repeating-conic-gradient parsing");

	93 </script>

	94 </body>

OLD	NEW

« 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')