Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-images/gradient-specified-values.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Specified values of gradients</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<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>