Skip to content

Commit f96b61c

Browse files
TalbotGTalbotG
authored
Testing computed value of calc() with mixed units (#40425)
1 parent 9c15bb1 commit f96b61c

File tree

1 file changed

+222
-0
lines changed

1 file changed

+222
-0
lines changed

‎css/css-values/getComputedStyle-calc-mixed-units-002.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
3+
<meta charset="UTF-8">
4+
5+
<title>CSS Values Test: computed value of 8 calc() values that involve mixed units</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-4/#calc-computed-value">
9+
10+
<meta name="flags" content="">
11+
<meta content="This meta-test verifies that terms with a length value that can be resolved at computed-value time must be resolved and must be absolutized to 'px'. In this meta-test, we test percentage unit (%), three font-relative length units (em, rem, lh) and some absolute length units (pc, pt, px, cm, mm, Q, in). " name="assert">
12+
13+
<!--
14+
15+
NOT Tested in this test are:
16+
17+
Viewport-percentage Length units:
18+
vh, svh, lvh, dvh,
19+
vw, svw, lvw, dvw,
20+
vmin, svmin, lvmin, dvmin,
21+
vmax, svmax, lvmax, dvmax,
22+
vi, svi, lvi, dvi,
23+
vb, svb, lvb, dvb
24+
25+
and these of font-relative length units:
26+
ex, rex,
27+
cap, rcap,
28+
ch, rch,
29+
ic, ric,
30+
rlh
31+
32+
-->
33+
34+
<script src="/resources/testharness.js"></script>
35+
36+
<script src="/resources/testharnessreport.js"></script>
37+
38+
<style>
39+
html
40+
{
41+
font-size: 30px; /* for checking rem unit */
42+
}
43+
44+
body
45+
{
46+
font-size: 16px;
47+
line-height: 1.25; /* computed value: 20px; for checking lh unit */
48+
height: 500px;
49+
margin: 20px;
50+
width: 520px;
51+
}
52+
53+
div#target
54+
{
55+
height: 100px;
56+
width: 100px;
57+
}
58+
</style>
59+
60+
<div id="target"></div>
61+
62+
<script>
63+
function startTesting()
64+
{
65+
66+
var targetElement = document.getElementById("target");
67+
68+
function verifyComputedStyle(property_name, specified_value, expected_value, description)
69+
{
70+
71+
test(function()
72+
{
73+
74+
targetElement.style.setProperty(property_name, "initial");
75+
76+
targetElement.style.setProperty(property_name, specified_value);
77+
78+
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
79+
80+
}, description);
81+
}
82+
83+
verifyComputedStyle("width", "calc(10% + 2em)", "84px", "testing width: calc(10% + 2em)");
84+
85+
/*
86+
87+
520px mult 10% == 52px
88+
89+
+
90+
91+
16px mult 2 == 32px
92+
93+
=======
94+
95+
84px
96+
97+
*/
98+
99+
100+
verifyComputedStyle("width", "calc(5% + 4rem)", "146px", "testing width: calc(5% + 4rem)");
101+
102+
/*
103+
104+
520px mult 5% == 26px
105+
106+
+
107+
108+
30px mult 4 == 120px
109+
110+
=======
111+
112+
146px
113+
114+
*/
115+
116+
117+
verifyComputedStyle("width", "calc(8lh + 7px)", "167px", "testing width: calc(8lh + 7px)");
118+
119+
/*
120+
121+
8 mult 20px == 160px
122+
123+
+
124+
125+
7px
126+
127+
=======
128+
129+
167px
130+
131+
*/
132+
133+
134+
verifyComputedStyle("height", "calc(10% + 6pt)", "58px", "testing height: calc(10% + 6pt)");
135+
136+
/*
137+
138+
10% mult 500 == 50px
139+
140+
+
141+
142+
6pt == 8px
143+
144+
========
145+
146+
58px
147+
148+
*/
149+
150+
151+
verifyComputedStyle("width", "calc(4em + 2.6458333cm)", "164px", "testing width: calc(4em + 2.6458333cm)");
152+
153+
/*
154+
155+
4 mult 16px == 64px
156+
157+
+
158+
159+
2.6458333cm == 100px
160+
161+
========
162+
163+
164px
164+
165+
*/
166+
167+
168+
verifyComputedStyle("height", "calc(5em + 26.458333mm)", "180px", "testing height: calc(5em + 26.458333mm)");
169+
170+
/*
171+
172+
5 mult 16px == 80px
173+
174+
+
175+
176+
26.458333mm == 100px
177+
178+
========
179+
180+
180px
181+
182+
*/
183+
184+
185+
verifyComputedStyle("width", "calc(2in + 101.6Q)", "288px", "testing width: calc(2in + 101.6Q)");
186+
187+
/*
188+
189+
2 mult 96px == 192px
190+
191+
+
192+
193+
101.6Q == 96px
194+
195+
========
196+
197+
288px
198+
199+
*/
200+
201+
202+
verifyComputedStyle("height", "calc(1pc + 3pt)", "20px", "testing height: calc(1pc + 3pt)");
203+
204+
/*
205+
206+
1pc == 16px
207+
208+
+
209+
210+
3pt == 4px
211+
212+
=======
213+
214+
20px
215+
216+
*/
217+
218+
}
219+
220+
startTesting();
221+
222+
</script>

0 commit comments

Comments
 (0)