| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Color-stops parsing</title> |
| <link rel="author" title="Florin Malita" href="mailto:fmalita@chromium.org"> |
| <link rel="help" href="http://www.w3.org/TR/css-images-4/#color-stop-syntax"> |
| <meta name="assert" content="General color stop parsing (applicable to all gradients) follows CSS Images 4 rules."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <script> |
| var tests = [ |
| // invalid stops |
| { stops: "" , parse: false }, |
| { stops: "black" , parse: false }, |
| { stops: "black 0%" , parse: false }, |
| { stops: "black, 25%" , parse: false }, |
| { stops: "black, invalid" , parse: false }, |
| { stops: "black, , white" , parse: false }, |
| { stops: "black, white, 75%" , parse: false }, |
| { stops: "black, 25% 50%, white" , parse: false }, |
| { stops: "black, 25%, 50%, white" , parse: false }, |
| { stops: "black 10% 25% 50%, white", parse: false }, |
| { stops: ",black, white" , parse: false }, |
| { stops: "0%, black, white" , parse: false }, |
| |
| // basic stops |
| { stops: "black, white" , parse: true }, |
| { stops: "black 0, white" , parse: true }, |
| { stops: "black 0%, white" , parse: true }, |
| { stops: "black 0%, white 100%" , parse: true }, |
| { stops: "black, green, white" , parse: true }, |
| { stops: "black 0%, green 50%, white 100%" , parse: true }, |
| { stops: "black 50%, green 10%, white 100%", parse: true }, |
| |
| // interpolation hints |
| { stops: "black, 25%, white" , parse: true }, |
| { stops: "black 0%, 25%, white 100%" , parse: true }, |
| { stops: "black 0%, 15%, green 50%, 60%, white 100%", parse: true }, |
| |
| // dual-positioning |
| { stops: "black 0% 50%, white" , parse: true }, |
| { stops: "black 0% 50%, white 50% 100%" , parse: true }, |
| { stops: "black 0% 50%, green 25% 75%, white 50% 100%", parse: true }, |
| |
| // kitchen sink |
| { stops: "black 0% calc(100% / 5), 25%, green 30% 60%, calc(100% * 3 / 4), white calc(100% - 20%) 100%", parse: true }, |
| ]; |
| |
| function check_gradient(gradient, stops, shouldParse) { |
| var div = document.createElement('div'); |
| div.setAttribute("style", "background-image: " + gradient + "(" + stops + ")"); |
| |
| var inline_style = div.style.getPropertyValue("background-image"); |
| assert_equals(inline_style.startsWith(gradient), shouldParse); |
| |
| document.body.appendChild(div); |
| var computed_style = getComputedStyle(div).getPropertyValue("background-image"); |
| assert_equals(computed_style.startsWith(gradient), shouldParse); |
| |
| div.remove(); |
| } |
| |
| [ "linear-gradient", |
| "repeating-linear-gradient", |
| "radial-gradient", |
| "repeating-radial-gradient", |
| "conic-gradient", |
| "repeating-conic-gradient" |
| ].forEach(function(gradient) { |
| tests.forEach(function(tst) { |
| test(function() { |
| check_gradient(gradient, tst.stops, tst.parse); |
| }, gradient + "(" + tst.stops + ") " + (tst.parse ? "[ parsable ]" : "[ unparsable ]")); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
