Skip to content

Commit 971926f

Browse files
marco-cmarco-c
committed
Bug 1575417 [wpt PR 18574] - Support percentage comparison resolution against negative reference values, a=testonly
Automatic update from web-platform-tests Support percentage comparison resolution against negative reference values It's a very edge case that a percentage may be resolved against a negative value, which is allowed only in 'background-position' property. To support this without massively changing existing code, this patch adds an indicator flag to |CSSMathFunctionValue|, so that when the flag is set, the resolution of calculated percentage values is delayed to when a reference value is available. When the flag is not set, we still use the existing code path where a calculated percentage value can be resolved immediately. Together with this patch is a test suite on parsing and evaluation of comparisons on percentages. Bug: 825895, 978682 Change-Id: I2a6aabd48313ccda82b50f6dc00fd62c4548bc84 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1762970 Commit-Queue: Xiaocheng Hu <xiaochenghchromium.org> Reviewed-by: Rune Lillesveen <futharkchromium.org> Reviewed-by: Emil A Eklund <eaechromium.org> Cr-Commit-Position: refs/heads/master{#689198} -- wpt-commits: 8f929221b0664b735209dd1b44594dd21d643520 wpt-pr: 18574 UltraBlame original commit: e5e59e33b55fdcdbf3eed414a6a70ee9b2cdae4a
1 parent 7331949 commit 971926f

File tree

4 files changed

+136
-0
lines changed

4 files changed

+136
-0
lines changed

‎testing/web-platform/tests/css/css-backgrounds/background-position-negative-percentage-comparison.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<link rel="author" title="Xiaocheng Hu" href="mailto:[email protected]">
3+
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position">
4+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
5+
<link rel="match" href="reference/background-position-negative-percentage-comparison-ref.html">
6+
<style>
7+
.target {
8+
margin: 50px;
9+
width: 50px;
10+
height: 50px;
11+
border: 1px solid black;
12+
background-image: url("support/100x100-blue-and-orange.png");
13+
background-position: min(0%, 100%) max(0%, 100%);
14+
}
15+
</style>
16+
<div class="target"></div>

‎testing/web-platform/tests/css/css-backgrounds/reference/background-position-negative-percentage-comparison-ref.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<style>
3+
.target {
4+
margin: 50px;
5+
width: 50px;
6+
height: 50px;
7+
border: 1px solid black;
8+
background-image: url("../support/100x100-blue-and-orange.png");
9+
background-position: right top;
10+
}
11+
</style>
12+
<div class="target"></div>

‎testing/web-platform/tests/css/css-values/minmax-percentage-computed.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
3+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#percentages">
4+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking">
5+
<link rel="author" title="Xiaocheng Hu" href="mailto:[email protected]">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="../support/computed-testcommon.js"></script>
9+
<div id="container" style="width: 400px">
10+
<div id="target"></div>
11+
<div id="reference"></div>
12+
</div>
13+
<script>
14+
const property = 'margin-left';
15+
16+
function test_percentage_equals(value, expected) {
17+
const reference = document.getElementById('reference');
18+
reference.style[property] = '';
19+
reference.style[property] = expected;
20+
const computed = getComputedStyle(reference)[property];
21+
test_computed_value(property, value, computed);
22+
}
23+
24+
// Identity tests
25+
test_percentage_equals('min(1%)', '1%');
26+
test_percentage_equals('max(1%)', '1%');
27+
28+
// Nestings
29+
test_percentage_equals('min(20%, max(10%, 15%))', '15%');
30+
test_percentage_equals('max(10%, min(20%, 15%))', '15%');
31+
32+
// General calculations
33+
test_percentage_equals('calc(min(10%, 20%) + 5%)', '15%');
34+
test_percentage_equals('calc(min(10%, 20%) - 5%)', '5%');
35+
test_percentage_equals('calc(min(10%, 20%) * 2)', '20%');
36+
test_percentage_equals('calc(min(10%, 20%) / 2)', '5%');
37+
test_percentage_equals('calc(max(10%, 20%) + 5%)', '25%');
38+
test_percentage_equals('calc(max(10%, 20%) - 5%)', '15%');
39+
test_percentage_equals('calc(max(10%, 20%) * 2)', '40%');
40+
test_percentage_equals('calc(max(10%, 20%) / 2)', '10%');
41+
test_percentage_equals('calc(min(10%, 20%) + max(10%, 5%))', '20%');
42+
test_percentage_equals('calc(min(10%, 20%) - max(10%, 5%))', '0%');
43+
</script>

‎testing/web-platform/tests/css/css-values/minmax-percentage-invalid.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
3+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#percentages">
4+
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking">
5+
<link rel="author" title="Xiaocheng Hu" href="mailto:[email protected]">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="../support/parsing-testcommon.js"></script>
9+
<script>
10+
function test_invalid_percentage(value) {
11+
test_invalid_value('margin-left', value);
12+
}
13+
14+
// Syntax checking
15+
test_invalid_percentage('min()');
16+
test_invalid_percentage('min( )');
17+
test_invalid_percentage('min(,)');
18+
test_invalid_percentage('min(1#)');
19+
test_invalid_percentage('min(%1)');
20+
test_invalid_percentage('min(1%, )');
21+
test_invalid_percentage('min(, 1%)');
22+
test_invalid_percentage('min(1% + )');
23+
test_invalid_percentage('min(1% - )');
24+
test_invalid_percentage('min(1% * )');
25+
test_invalid_percentage('min(1% / )');
26+
test_invalid_percentage('min(1% 2%)');
27+
test_invalid_percentage('min(1%, , 2%)');
28+
test_invalid_percentage('max()');
29+
test_invalid_percentage('max( )');
30+
test_invalid_percentage('max(,)');
31+
test_invalid_percentage('max(1#)');
32+
test_invalid_percentage('max(%1)');
33+
test_invalid_percentage('max(1%, )');
34+
test_invalid_percentage('max(, 1%)');
35+
test_invalid_percentage('max(1% + )');
36+
test_invalid_percentage('max(1% - )');
37+
test_invalid_percentage('max(1% * )');
38+
test_invalid_percentage('max(1% / )');
39+
test_invalid_percentage('max(1% 2%)');
40+
test_invalid_percentage('max(1%, , 2%)');
41+
42+
// Type checking
43+
test_invalid_percentage('min(0s)');
44+
test_invalid_percentage('min(0deg)');
45+
test_invalid_percentage('min(0Hz)');
46+
test_invalid_percentage('min(0dpi)');
47+
test_invalid_percentage('min(0fr)');
48+
test_invalid_percentage('min(1%, 0)');
49+
test_invalid_percentage('min(1%, 0s)');
50+
test_invalid_percentage('min(1%, 0deg)');
51+
test_invalid_percentage('min(1%, 0Hz)');
52+
test_invalid_percentage('min(1%, 0dpi)');
53+
test_invalid_percentage('min(1%, 0fr)');
54+
test_invalid_percentage('max(0s)');
55+
test_invalid_percentage('max(0deg)');
56+
test_invalid_percentage('max(0Hz)');
57+
test_invalid_percentage('max(0dpi)');
58+
test_invalid_percentage('max(0fr)');
59+
test_invalid_percentage('max(1%, 0)');
60+
test_invalid_percentage('max(1%, 0s)');
61+
test_invalid_percentage('max(1%, 0deg)');
62+
test_invalid_percentage('max(1%, 0Hz)');
63+
test_invalid_percentage('max(1%, 0dpi)');
64+
test_invalid_percentage('max(1%, 0fr)');
65+
</script>

0 commit comments

Comments
 (0)