Skip to content

Commit 47d5fbd

Browse files
brandonmcconnellbrandonmcconnell
authored
Add additional tests for multiplication/division of mixed units (#42517)
This PR adds tests for testing multiplication/division of mixed units, both in simple expressions as well as calc() inside @media query expressions. This is done in support of Interop 2024 ticket: web-platform-tests/interop#513
1 parent 3aaf532 commit 47d5fbd

23 files changed

+305
-165
lines changed

‎css/css-text/tab-size/tab-size-computed-value-001.html

+23-23
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
var targetElement = document.getElementById("target");
4242

43-
function verifyComputedStyle(property_name, specified_value, expected_value, description)
43+
function verifyComputedStyle(property_name, specified_value, expected_value)
4444
{
4545

4646
test(function()
@@ -60,10 +60,10 @@
6060

6161
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
6262

63-
}, description);
63+
}, `testing ${property_name}: ${specified_value}`);
6464
}
6565

66-
function compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description)
66+
function compareValueCloseTo(property_name, specified_value, epsilon, expected_value)
6767
{
6868

6969
test(function()
@@ -83,60 +83,60 @@
8383

8484
assert_array_approx_equals(computedSpecifiedValue, computedExpectedValue, epsilon);
8585

86-
} , description);
86+
}, `testing ${property_name}: ${specified_value}`);
8787

8888
}
8989

90-
verifyComputedStyle("tab-size", "4", "4", "testing tab-size: 4");
90+
verifyComputedStyle("tab-size", "4", "4");
9191

92-
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
92+
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
9393

9494
/* absolute length units: in, cm, mm, pt, pc, Q, px */
9595

96-
verifyComputedStyle("tab-size", "0.5in", "48px", "testing tab-size: 0.5in");
96+
verifyComputedStyle("tab-size", "0.5in", "48px");
9797

98-
verifyComputedStyle("tab-size", "2.54cm", "96px", "testing tab-size: 2.54cm");
98+
verifyComputedStyle("tab-size", "2.54cm", "96px");
9999

100-
verifyComputedStyle("tab-size", "25.4mm", "96px", "testing tab-size: 25.4mm");
100+
verifyComputedStyle("tab-size", "25.4mm", "96px");
101101

102-
verifyComputedStyle("tab-size", "18pt", "24px", "testing tab-size: 18pt");
102+
verifyComputedStyle("tab-size", "18pt", "24px");
103103

104-
verifyComputedStyle("tab-size", "5pc", "80px", "testing tab-size: 5pc");
104+
verifyComputedStyle("tab-size", "5pc", "80px");
105105

106-
verifyComputedStyle("tab-size", "101.6Q", "96px", "testing tab-size: 101.6Q");
106+
verifyComputedStyle("tab-size", "101.6Q", "96px");
107107

108-
verifyComputedStyle("tab-size", "7px", "7px", "testing tab-size: 7px");
108+
verifyComputedStyle("tab-size", "7px", "7px");
109109

110-
/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
110+
/* verifyComputedStyle(property_name, specified_value, expected_value) */
111111

112112
/* relative length units: em, ex, rem */
113113

114-
verifyComputedStyle("tab-size", "1em", "20px", "testing tab-size: 1em");
114+
verifyComputedStyle("tab-size", "1em", "20px");
115115

116-
/* compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description) */
116+
/* compareValueCloseTo(property_name, specified_value, epsilon, expected_value) */
117117

118-
compareValueCloseTo("tab-size", "2ex", 0.001, "32px", "testing tab-size: 2ex");
118+
compareValueCloseTo("tab-size", "2ex", 0.001, "32px");
119119

120120
/*
121121
For this sub-test, we set the tolerance precision (epsilon)
122122
to (0.001 === 1 thousandth).
123123
*/
124124

125-
verifyComputedStyle("tab-size", "3rem", "48px", "testing tab-size: 3rem");
125+
verifyComputedStyle("tab-size", "3rem", "48px");
126126

127127
/*
128128
129129
NOT tested are: vw, vh, vmin, vmax and ch units
130130
131-
verifyComputedStyle("tab-size", "4vw", "?px", "testing tab-size: 4vw");
131+
verifyComputedStyle("tab-size", "4vw", "?px");
132132
133-
verifyComputedStyle("tab-size", "5vh", "?px", "testing tab-size: 5vh");
133+
verifyComputedStyle("tab-size", "5vh", "?px");
134134
135-
verifyComputedStyle("tab-size", "6vmin", "?px", "testing tab-size: 6vmin");
135+
verifyComputedStyle("tab-size", "6vmin", "?px");
136136
137-
verifyComputedStyle("tab-size", "7vmax", "?px", "testing tab-size: 7vmax");
137+
verifyComputedStyle("tab-size", "7vmax", "?px");
138138
139-
verifyComputedStyle("tab-size", "8ch", "?px", "testing tab-size: 8ch");
139+
verifyComputedStyle("tab-size", "8ch", "?px");
140140
141141
*/
142142

‎css/css-text/word-spacing/word-spacing-computed-001.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
var targetElement = document.getElementById("target");
3232

33-
function verifyComputedStyle(property_name, specified_value, expected_value, description)
33+
function verifyComputedStyle(property_name, specified_value, expected_value)
3434
{
3535

3636
test(function()
@@ -50,32 +50,32 @@
5050

5151
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
5252

53-
}, description);
53+
}, `testing ${property_name}: ${specified_value}`);
5454
}
5555

56-
verifyComputedStyle("word-spacing", "normal", "0px", "testing word-spacing: normal");
56+
verifyComputedStyle("word-spacing", "normal", "0px");
5757

58-
verifyComputedStyle("word-spacing", "0", "0px", "testing word-spacing: 0");
58+
verifyComputedStyle("word-spacing", "0", "0px");
5959

60-
verifyComputedStyle("word-spacing", "1.27cm", "48px", "testing word-spacing: 1.27cm");
60+
verifyComputedStyle("word-spacing", "1.27cm", "48px");
6161

62-
verifyComputedStyle("word-spacing", "1em", "20px", "testing word-spacing: 1em");
62+
verifyComputedStyle("word-spacing", "1em", "20px");
6363

64-
verifyComputedStyle("word-spacing", "0.5in", "48px", "testing word-spacing: 0.5in");
64+
verifyComputedStyle("word-spacing", "0.5in", "48px");
6565

66-
verifyComputedStyle("word-spacing", "25.4mm", "96px", "testing word-spacing: 25.4mm");
66+
verifyComputedStyle("word-spacing", "25.4mm", "96px");
6767

68-
verifyComputedStyle("word-spacing", "5pc", "80px", "testing word-spacing: 5pc");
68+
verifyComputedStyle("word-spacing", "5pc", "80px");
6969

70-
verifyComputedStyle("word-spacing", "18pt", "24px", "testing word-spacing: 18pt");
70+
verifyComputedStyle("word-spacing", "18pt", "24px");
7171

72-
verifyComputedStyle("word-spacing", "7px", "7px", "testing word-spacing: 7px");
72+
verifyComputedStyle("word-spacing", "7px", "7px");
7373

74-
verifyComputedStyle("word-spacing", "101.6Q", "96px", "testing word-spacing: 101.6Q");
74+
verifyComputedStyle("word-spacing", "101.6Q", "96px");
7575

76-
verifyComputedStyle("word-spacing", "3rem", "48px", "testing word-spacing: 3rem");
76+
verifyComputedStyle("word-spacing", "3rem", "48px");
7777

78-
verifyComputedStyle("word-spacing", "0ch", "0px", "testing word-spacing: 0ch");
78+
verifyComputedStyle("word-spacing", "0ch", "0px");
7979

8080
}
8181

‎css/css-values/calc-background-position-002.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
var targetElement = document.getElementById("target");
2323

24-
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
24+
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value)
2525
{
2626

2727
test(function()
@@ -42,20 +42,20 @@
4242

4343
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
4444

45-
}, description);
45+
}, `testing ${property_name}: ${specified_value}`);
4646
}
4747

48-
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
48+
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
4949

50-
verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px", "testing background-position: calc(2px + 3px) calc(4px + 5px)");
50+
verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px");
5151

52-
verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px", "testing background-position: calc(18px - 7px) calc(19px - 7px)");
52+
verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px");
5353

54-
verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px", "testing background-position: calc(4 * 5px) calc(6px * 4)");
54+
verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px");
5555

56-
verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px", "testing background-position: calc(100px / 4) calc(119px / 7)");
56+
verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px");
5757

58-
verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)", "testing background-position: calc(6px + 21%) calc(7em + 22%)");
58+
verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)");
5959

6060
/*
6161
"
@@ -67,9 +67,9 @@
6767
https://www.w3.org/TR/css-values-3/#calc-computed-value
6868
*/
6969

70-
verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)", "testing background-position: calc(-8px + 23%) calc(-9em + 24%)");
70+
verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)");
7171

72-
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
72+
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
7373
}
7474

7575
startTesting();

‎css/css-values/calc-in-media-queries-with-mixed-units.html

+14-8
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,24 @@
77
<link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value">
88
</head>
99
<body>
10-
<iframe src="./support/mixed-units-01.html" title="px/em" frameborder="0" height="10" width="100"></iframe>
11-
<iframe src="./support/mixed-units-02.html" title="vh/em" frameborder="0" height="10" width="100"></iframe>
12-
<iframe src="./support/mixed-units-03.html" title="vw/em" frameborder="0" height="10" width="100"></iframe>
13-
<iframe src="./support/mixed-units-04.html" title="vw/vh" frameborder="0" height="10" width="100"></iframe>
14-
<iframe src="./support/mixed-units-05.html" title="vh/px" frameborder="0" height="10" width="100"></iframe>
15-
<iframe src="./support/mixed-units-06.html" title="vw/px" frameborder="0" height="10" width="100"></iframe>
10+
<iframe src="./support/mixed-units-01.html" title="px-em" frameborder="0" height="10" width="100"></iframe>
11+
<iframe src="./support/mixed-units-02.html" title="vh+em" frameborder="0" height="10" width="100"></iframe>
12+
<iframe src="./support/mixed-units-03.html" title="vw-em" frameborder="0" height="10" width="100"></iframe>
13+
<iframe src="./support/mixed-units-04.html" title="vw+vh" frameborder="0" height="10" width="100"></iframe>
14+
<iframe src="./support/mixed-units-05.html" title="vh+px" frameborder="0" height="10" width="100"></iframe>
15+
<iframe src="./support/mixed-units-06.html" title="vw+px" frameborder="0" height="10" width="100"></iframe>
16+
<iframe src="./support/mixed-units-07.html" title="px/em*em" frameborder="0" height="10" width="100"></iframe>
17+
<iframe src="./support/mixed-units-08.html" title="vh*em" frameborder="0" height="10" width="100"></iframe>
18+
<iframe src="./support/mixed-units-09.html" title="vh*vw/em*px/vh" frameborder="0" height="10" width="100"></iframe>
19+
<iframe src="./support/mixed-units-10.html" title="vw/px*vh" frameborder="0" height="10" width="100"></iframe>
20+
<iframe src="./support/mixed-units-11.html" title="vh*vw/em*px" frameborder="0" height="10" width="100"></iframe>
21+
<iframe src="./support/mixed-units-12.html" title="vw*vh*px*em/px/px/px" frameborder="0" height="10" width="100"></iframe>
1622
<script>
1723
for (const frame of document.querySelectorAll("iframe")) {
1824
async_test((t) => {
1925
frame.addEventListener("load", t.step_func(() => {
20-
const box = frame.contentWindow.document.querySelector(".box");
21-
const actual = frame.contentWindow.getComputedStyle(box).getPropertyValue("background-color");
26+
const body = frame.contentWindow.document.body;
27+
const actual = frame.contentWindow.getComputedStyle(body).getPropertyValue("background-color");
2228
assert_equals(actual, "rgb(255, 165, 0)");
2329
t.done();
2430
}));

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

+12-20
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
var targetElement = document.getElementById("target");
4242

43-
function verifyComputedStyle(property_name, specified_value, expected_value, description)
43+
function verifyComputedStyle(property_name, specified_value, expected_value)
4444
{
4545

4646
test(function()
@@ -61,68 +61,60 @@
6161

6262
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
6363

64-
}, description);
64+
}, `testing ${property_name}: ${specified_value}`);
6565
}
6666

67-
/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
67+
/* verifyComputedStyle(property_name, specified_value, expected_value) */
6868

6969
/* LINEAR */
7070

7171
verifyComputedStyle(
7272
"background-image",
7373
"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))");
74+
"linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))");
7675

7776
verifyComputedStyle(
7877
"background-image",
7978
"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))");
79+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
8280

8381
verifyComputedStyle(
8482
"background-image",
8583
"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))");
84+
"linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))");
8885

8986
verifyComputedStyle(
9087
"background-image",
9188
"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))");
89+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
9490

9591
verifyComputedStyle(
9692
"background-image",
9793
"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))");
94+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
10095

10196
verifyComputedStyle(
10297
"background-image",
10398
"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))");
99+
"linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");
106100

107101

108102
/* RADIAL */
109103

110104
verifyComputedStyle(
111105
"background-image",
112106
"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%))");
107+
"radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)");
115108

116109

117110
/* CONIC */
118111

119112
verifyComputedStyle(
120113
"background-image",
121114
"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%))");
115+
"conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)");
124116

125-
/* verifyComputedStyle(property_name, specified_value, expected_value, description) */
117+
/* verifyComputedStyle(property_name, specified_value, expected_value) */
126118

127119
}
128120

‎css/css-values/calc-z-index-fractions-001.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
var targetElement = document.getElementById("target");
2323

24-
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
24+
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value)
2525
{
2626

2727
test(function()
@@ -42,16 +42,16 @@
4242

4343
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
4444

45-
}, description);
45+
}, `testing ${property_name}: ${specified_value}`);
4646
}
4747

48-
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
49-
verifyComputedStyle("z-index", "auto", "calc(2.5 / 2)", "1", "testing z-index: calc(2.5 / 2)");
50-
verifyComputedStyle("z-index", "auto", "calc(3 / 2)", "2", "testing z-index: calc(3 / 2)");
51-
verifyComputedStyle("z-index", "auto", "calc(3.5 / 2)", "2", "testing z-index: calc(3.5 / 2)");
52-
verifyComputedStyle("z-index", "auto", "calc(-2.5 / 2)", "-1", "testing z-index: calc(-2.5 / 2)");
53-
verifyComputedStyle("z-index", "auto", "calc(-3 / 2)", "-1", "testing z-index: calc(-3 / 2)");
54-
verifyComputedStyle("z-index", "auto", "calc(-3.5 / 2)", "-2", "testing z-index: calc(-3.5 / 2)");
48+
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
49+
verifyComputedStyle("z-index", "auto", "calc(2.5 / 2)", "1");
50+
verifyComputedStyle("z-index", "auto", "calc(3 / 2)", "2");
51+
verifyComputedStyle("z-index", "auto", "calc(3.5 / 2)", "2");
52+
verifyComputedStyle("z-index", "auto", "calc(-2.5 / 2)", "-1");
53+
verifyComputedStyle("z-index", "auto", "calc(-3 / 2)", "-1");
54+
verifyComputedStyle("z-index", "auto", "calc(-3.5 / 2)", "-2");
5555
}
5656

5757
startTesting();

‎css/css-values/getComputedStyle-border-radius-001.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -46,28 +46,28 @@
4646

4747
var targetElement = document.getElementById("target");
4848

49-
function verifyComputedStyle(property_name, expected_value, description)
49+
function verifyComputedStyle(property_name, expected_value)
5050
{
5151

5252
test(function()
5353
{
5454

5555
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
5656

57-
}, description);
57+
}, `testing ${property_name}: ${expected_value}`);
5858
}
5959

60-
/* verifyComputedStyle(property_name, expected_value, description) */
60+
/* verifyComputedStyle(property_name, expected_value) */
6161

62-
verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)", "testing border-top-left-radius: calc(10px + 25%) calc(20px + 25%)");
62+
verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)");
6363

64-
verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)", "testing border-top-right-radius: calc(1em + 25%)");
64+
verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)");
6565

66-
verifyComputedStyle("border-bottom-right-radius", "25%", "testing border-bottom-right-radius: calc(25%)");
66+
verifyComputedStyle("border-bottom-right-radius", "25%");
6767

68-
verifyComputedStyle("border-bottom-left-radius", "25px", "testing border-bottom-left-radius: calc(25px);");
68+
verifyComputedStyle("border-bottom-left-radius", "25px");
6969

70-
verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px", "testing border-radius shorthand");
70+
verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px");
7171

7272
/*
7373

0 commit comments

Comments
 (0)