| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <script> |
| |
| function roundTrip(css) |
| { |
| var div = document.createElement('div'); |
| div.setAttribute('style', css); |
| document.body.appendChild(div); |
| |
| var result = getComputedStyle(div).backgroundImage; |
| document.body.removeChild(div); |
| return result; |
| } |
| |
| function testGradient(actual, expected) |
| { |
| if (expected === undefined) |
| expected = actual; |
| |
| assert_equals(roundTrip("background-image:" + actual), expected, "Testing round trip of " + actual); |
| } |
| |
| // FIXME Test invalid parameters. |
| // FIXME Test double position syntax for color stops. |
| |
| test(function() { |
| testGradient("conic-gradient(red, gold)") |
| testGradient("conic-gradient(from 0deg, red, gold)") |
| testGradient("conic-gradient(at center, red, gold)", "conic-gradient(at center center, red, gold)") |
| testGradient("conic-gradient(at 25% 75%, red, gold)") |
| testGradient("conic-gradient(from 0deg at 50% 50%, red, gold)") |
| testGradient("conic-gradient(red 0%, gold 100%)") |
| testGradient("conic-gradient(red 0deg, gold 1turn)"); |
| testGradient("conic-gradient(white -50%, black 150%)"); |
| testGradient("conic-gradient(white -180deg, black 540deg)"); |
| testGradient("conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", "conic-gradient(rgb(191, 191, 191), rgb(63, 63, 63))"); |
| testGradient("conic-gradient(from 45deg, white, black, white)"); |
| testGradient("conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%))", "conic-gradient(rgb(223, 223, 223), white 45deg, black 225deg, rgb(223, 223, 223))"); |
| |
| var s = "conic-gradient("; |
| for (var x = 0; x < 500; x++) |
| s += `white ${x/500}%, ${(2 * x + 1) / 1000}%, `; |
| s += "black)"; |
| testGradient(s); |
| }, "Test conic-gradient parsing"); |
| |
| test(function() { |
| testGradient("repeating-conic-gradient(red, gold)"); |
| testGradient("repeating-conic-gradient(from 0deg at center, red, gold)", "repeating-conic-gradient(from 0deg at center center, red, gold)"); |
| }, "Test repeating-conic-gradient parsing"); |
| |
| </script> |
| </body> |
| </html> |
