123 lines
3.8 KiB
HTML
123 lines
3.8 KiB
HTML
<!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>
|