<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value">
<meta name="flags" content="">
<meta content="This test verifies how calc() functions inside 6 linear-gradient(), 1 radial-gradient() and 1 conic-gradient() are computed for 'background-image'." name="assert">
<!--
Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle
https://bugs.chromium.org/p/chromium/issues/detail?id=947377
WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect
https://bugs.webkit.org/show_bug.cgi?id=196389
-->
<style>
div#target
{
background-image: linear-gradient(yellow, red);
height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
function startTesting()
{
var targetElement = document.getElementById("target");
function verifyComputedStyle(property_name, specified_value, expected_value)
{
test(function()
{
targetElement.style.setProperty(property_name, "initial");
/*
The purpose of setting to the initial is to act as a fallback
value in case the calc() function in the specified value
fails or in case it generates an invalid value. Since we
are running 6 consecutive tests on the same element,
then it is necessary to 'reset' its property to the
initial value.
*/
targetElement.style.setProperty(property_name, specified_value);
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
}, `testing ${property_name}: ${specified_value}`);
}
/* verifyComputedStyle(property_name, specified_value, expected_value) */
/* LINEAR */
verifyComputedStyle(
"background-image",
"linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
"linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))");
verifyComputedStyle(
"background-image",
"linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
verifyComputedStyle(
"background-image",
"linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))");
verifyComputedStyle(
"background-image",
"linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
verifyComputedStyle(
"background-image",
"linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
verifyComputedStyle(
"background-image",
"linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
/* RADIAL */
verifyComputedStyle(
"background-image",
"radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))",
"radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)");
/* CONIC */
verifyComputedStyle(
"background-image",
"conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))",
"conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)");
/* verifyComputedStyle(property_name, specified_value, expected_value) */
}
startTesting();
</script>
Codebase Browser
chromium