| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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> |
| OLD | NEW |