Skip to content

Commit 9c15bb1

Browse files
TalbotGTalbotG
authored
Meta-test on computed value of calc functions inside *-gradient functions (#40419)
1 parent 3564071 commit 9c15bb1

File tree

1 file changed

+131
-0
lines changed

1 file changed

+131
-0
lines changed

‎css/css-values/calc-linear-radial-conic-gradient-001.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
3+
<meta charset="UTF-8">
4+
5+
<title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title>
6+
7+
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8+
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value">
9+
10+
<meta name="flags" content="">
11+
<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">
12+
13+
<!--
14+
15+
Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle
16+
https://bugs.chromium.org/p/chromium/issues/detail?id=947377
17+
18+
WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect
19+
https://bugs.webkit.org/show_bug.cgi?id=196389
20+
21+
-->
22+
23+
<style>
24+
div#target
25+
{
26+
background-image: linear-gradient(yellow, red);
27+
height: 100px;
28+
}
29+
</style>
30+
31+
<script src="/resources/testharness.js"></script>
32+
33+
<script src="/resources/testharnessreport.js"></script>
34+
35+
<div id="target"></div>
36+
37+
<script>
38+
function startTesting()
39+
{
40+
41+
var targetElement = document.getElementById("target");
42+
43+
function verifyComputedStyle(property_name, specified_value, expected_value, description)
44+
{
45+
46+
test(function()
47+
{
48+
49+
targetElement.style.setProperty(property_name, "initial");
50+
51+
/*
52+
The purpose of setting to the initial is to act as a fallback
53+
value in case the calc() function in the specified value
54+
fails or in case it generates an invalid value. Since we
55+
are running 6 consecutive tests on the same element,
56+
then it is necessary to 'reset' its property to the
57+
initial value.
58+
*/
59+
60+
targetElement.style.setProperty(property_name, specified_value);
61+
62+
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
63+
64+
}, description);
65+
}
66+
67+
/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
68+
69+
/* LINEAR */
70+
71+
verifyComputedStyle(
72+
"background-image",
73+
"linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
74+
"linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))",
75+
"testing background-image: linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))");
76+
77+
verifyComputedStyle(
78+
"background-image",
79+
"linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
80+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
81+
"testing background-image: linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))");
82+
83+
verifyComputedStyle(
84+
"background-image",
85+
"linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
86+
"linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))",
87+
"testing background-position: linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))");
88+
89+
verifyComputedStyle(
90+
"background-image",
91+
"linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))",
92+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
93+
"testing background-image: linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))");
94+
95+
verifyComputedStyle(
96+
"background-image",
97+
"linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))",
98+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
99+
"testing background-image: linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))");
100+
101+
verifyComputedStyle(
102+
"background-image",
103+
"linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
104+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))",
105+
"testing background-image: linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))");
106+
107+
108+
/* RADIAL */
109+
110+
verifyComputedStyle(
111+
"background-image",
112+
"radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))",
113+
"radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)",
114+
"testing background-image: radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))");
115+
116+
117+
/* CONIC */
118+
119+
verifyComputedStyle(
120+
"background-image",
121+
"conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))",
122+
"conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)",
123+
"testing background-image: conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))");
124+
125+
/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
126+
127+
}
128+
129+
startTesting();
130+
131+
</script>

0 commit comments

Comments
 (0)