| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Specified values of gradients</title> |
| <link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <!-- Regression test for https://github.com/jsdom/cssstyle/pull/232 --> |
| |
| <div id="div">Test</div> |
| |
| <script> |
| "use strict"; |
| |
| const div = document.getElementById("div"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(blue, green)"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(blue, green)"); |
| }, "Named colors"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(rgb(0 0 255), rgb(0 128 0))"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))"); |
| }, "RGB colors"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(#0000ff, #008000)"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))"); |
| }, "Hex colors"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(hsl(240 100% 50%), hsl(120 100% 25%))"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))"); |
| }, "HSL colors"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(hwb(240 0 0), hwb(120 0 50))"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))"); |
| }, "HWB colors"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "linear-gradient(to bottom, blue, green)"; |
| assert_equals(div.style.backgroundImage, "linear-gradient(blue, green)"); |
| }, "Gradient line of linear-gradient()"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "radial-gradient(ellipse farthest-corner at center, blue, green)"; |
| assert_equals(div.style.backgroundImage, "radial-gradient(blue, green)"); |
| }, "Gradient line of radial-gradient()"); |
| |
| test(t => { |
| t.add_cleanup(() => { |
| div.style.backgroundImage = null; |
| }); |
| div.style.backgroundImage = "conic-gradient(at center, blue, green)"; |
| assert_equals(div.style.backgroundImage, "conic-gradient(blue, green)"); |
| }, "Gradient line of conic-gradient()"); |
| </script> |
