Skip to content

Commit

Permalink
Meta-test on computed value of calc functions inside *-gradient funct…
Browse files Browse the repository at this point in the history
…ions (#40419)
  • Loading branch information
TalbotG authored Jun 8, 2023
1 parent 3564071 commit 9c15bb1
Showing 1 changed file with 131 additions and 0 deletions.
131 changes: 131 additions & 0 deletions css/css-values/calc-linear-radial-conic-gradient-001.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!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, description)
{

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);

}, description);
}

/* verifyComputedStyle(property_name, specified_value, expected_value, description) */

/* 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))",
"testing background-image: linear-gradient(rgb(0, 128, 0) calc(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))",
"testing background-image: linear-gradient(calc(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))",
"testing background-position: linear-gradient(calc(90deg), rgb(0, 128, 0) calc(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))",
"testing background-image: linear-gradient(calc(0.1turn + 0.15turn), 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))",
"testing background-image: linear-gradient(calc(150grad - 50grad), 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))",
"testing background-image: linear-gradient(calc(200grad - 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%)",
"testing background-image: radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))");


/* 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%)",
"testing background-image: conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))");

/* verifyComputedStyle(property_name, specified_value, expected_value, description) */

}

startTesting();

</script>

0 comments on commit 9c15bb1

Please sign in to comment.