Update web-platform-tests to revision 53876e32d827db82f4b7af38053529302c243d40

This commit is contained in:
WPT Sync Bot 2020-03-07 08:19:40 +00:00
parent a0f14ceb7b
commit 02d2f1860a
87 changed files with 2931 additions and 515 deletions

View file

@ -12,7 +12,15 @@ html, body { margin: 0px; padding: 0px; }
height: 200px;
background: green;
}
#fail {
width: 200px;
height: 200px;
position: absolute;
z-index: -1;
background: red;
}
</style>
<div id=parent>
<div id=fail></div>
<div id=target></div>
</div>

View file

@ -12,7 +12,15 @@ html, body { margin: 0px; padding: 0px; }
height: 200px;
background: green;
}
#fail {
width: 200px;
height: 200px;
position: absolute;
z-index: -1;
background: red;
}
</style>
<div id=parent>
<div id=fail></div>
<div id=target></div>
</div>

View file

@ -17,8 +17,17 @@
.test {
background-color: green;
animation: anim 2000000s linear;
animation-delay: -1000000s;
animation: anim 1s linear;
animation-delay: -.5s;
animation-play-state: paused;
}
.fail {
background: red;
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
}
.container {
@ -29,5 +38,6 @@
</style>
<p>Test passes if there is a filled green square.</p>
<div class="container">
<div class="fail"></div>
<div class="test"></div>
</div>

View file

@ -5,16 +5,14 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="target"></div>
<div id="reference"></div>
<script>
function test_angle_equals(value, expected) {
const reference = document.getElementById('reference');
reference.style.transform = '';
reference.style.transform = `rotate(${expected})`;
const computed = getComputedStyle(reference).transform;
test_computed_value('transform', `rotate(${value})`, computed);
test_math_used(`rotate(${value})`, `rotate(${expected})`,
{prop:'transform', base:'none',
msg: `${value} should be used-value-equivalent to ${expected}`});
}
// Identity tests

View file

@ -3,37 +3,109 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#angles">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div id=target></div>
<script>
function test_valid_angle(value, expected) {
test_valid_value('transform', `rotate(${value})`, `rotate(${expected})`);
function test_serialization(t,s,c,u, {prop="transform"}={}) {
t = `rotate(${t})`;
test_specified_serialization(prop, t, `rotate(${s})`);
test_computed_serialization(prop, t, c);
if(u) test_used_serialization(prop, t, u);
}
test_valid_angle('min(1deg)', 'min(1deg)');
test_valid_angle('min(1rad)', 'min(1rad)');
test_valid_angle('min(1turn)', 'min(1turn)');
test_valid_angle('min(1grad)', 'min(1grad)');
test_valid_angle('max(1deg)', 'max(1deg)');
test_valid_angle('max(1rad)', 'max(1rad)');
test_valid_angle('max(1turn)', 'max(1turn)');
test_valid_angle('max(1grad)', 'max(1grad)');
// Browsers aren't perfectly interoperable about how a 90deg rotation is serialized,
// but that's not the focus of this test,
// so just capture *whatever* the browser does and expect that.
const rotateMatrix = (()=>{
const el = document.querySelector("#target");
el.style.transform = "rotate(90deg)";
const ret = getComputedStyle(el).transform;
el.removeAttribute('style');
return ret;
})();
test_valid_angle('min(1deg, 2deg, 3deg)', 'min(1deg, 2deg, 3deg)');
test_valid_angle('min(3deg, 2deg, 1deg)', 'min(3deg, 2deg, 1deg)');
test_valid_angle('min(90deg, 1.57rad, 0.25turn)', 'min(90deg, 1.57rad, 0.25turn)');
test_valid_angle('min(0.25turn, 1.57rad, 90deg)', 'min(0.25turn, 1.57rad, 90deg)');
test_valid_angle('max(1deg, 2deg, 3deg)', 'max(1deg, 2deg, 3deg)');
test_valid_angle('max(3deg, 2deg, 1deg)', 'max(3deg, 2deg, 1deg)');
test_valid_angle('max(90deg, 1.57rad, 0.25turn)', 'max(90deg, 1.57rad, 0.25turn)');
test_valid_angle('max(0.25turn, 1.57rad, 90deg)', 'max(0.25turn, 1.57rad, 90deg)');
test_serialization(
'min(90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'min(.25turn)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'min(100grad)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(.25turn)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(100grad)',
'calc(90deg)',
rotateMatrix);
// No way to test 'rad' serialization without depending heavily on numeric serialization
// and the precision used for radians...
test_valid_angle('calc(min(1deg) + min(2deg))', 'calc(min(1deg) + min(2deg))');
test_valid_angle('calc(max(1deg) + max(2deg))', 'calc(max(1deg) + max(2deg))');
test_valid_angle('calc(1rad + min(1deg))', 'calc(1rad + min(1deg))');
test_valid_angle('calc(min(1deg) + 1rad)', 'calc(1rad + min(1deg))');
test_valid_angle('calc(1rad + max(1deg))', 'calc(1rad + max(1deg))');
test_valid_angle('calc(max(1deg) + 1rad)', 'calc(1rad + max(1deg))');
test_serialization(
'min(90deg, 92deg, 93deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'min(93deg, 92deg, 90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'min(90deg, 1.58rad, 0.25turn)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'min(0.25turn, 1.58rad, 90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(81deg, 82deg, 90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(83deg, 82deg, 90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(90deg, 1.57rad, 0.25turn)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'max(0.25turn, 1.57rad, 90deg)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(min(30deg) + max(60deg))',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(50grad + min(45deg))',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(min(45deg) + 50grad)',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(50grad + max(45deg))',
'calc(90deg)',
rotateMatrix);
test_serialization(
'calc(max(45deg) + 50grad)',
'calc(90deg)',
rotateMatrix);
</script>

View file

@ -5,18 +5,14 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="target"></div>
<div id="reference"></div>
<script>
const property = 'z-index';
function test_integer_equals(value, expected) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed);
test_math_used(value, expected,
{base: '123',
prop: 'z-index'}
);
}
// Identity tests

View file

@ -5,20 +5,15 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="container" style="font-size: 20px">
<div id="target"></div>
<div id="reference"></div>
</div>
<script>
const property = 'letter-spacing';
function test_length_equals(value, expected, titleExtra) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed, titleExtra);
function test_length_equals(value, expected, msgExtra) {
test_math_used(value, expected, {msgExtra});
}
// Identity tests

View file

@ -5,80 +5,70 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="container" style="font-size: 20px; width: 400px">
<div id="target"></div>
<div id="reference"></div>
</div>
<script>
const property = 'margin-left';
function test_length_percent_equals(value, expected, titleExtra) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed, titleExtra);
}
// Identity tests
test_length_percent_equals('min(1px + 1%)', 'calc(1px + 1%)');
test_length_percent_equals('min(1cm + 1%)', 'calc(1cm + 1%)');
test_length_percent_equals('min(1mm + 1%)', 'calc(1mm + 1%)');
test_length_percent_equals('min(1Q + 1%)', 'calc(1Q + 1%)');
test_length_percent_equals('min(1in + 1%)', 'calc(1in + 1%)');
test_length_percent_equals('min(1pc + 1%)', 'calc(1pc + 1%)');
test_length_percent_equals('min(1pt + 1%)', 'calc(1pt + 1%)');
test_length_percent_equals('min(1em + 1%)', 'calc(1em + 1%)');
test_length_percent_equals('min(1ex + 1%)', 'calc(1ex + 1%)');
test_length_percent_equals('min(1ch + 1%)', 'calc(1ch + 1%)');
test_length_percent_equals('min(1rem + 1%)', 'calc(1rem + 1%)');
test_length_percent_equals('min(1vh + 1%)', 'calc(1vh + 1%)');
test_length_percent_equals('min(1vw + 1%)', 'calc(1vw + 1%)');
test_length_percent_equals('min(1vmin + 1%)', 'calc(1vmin + 1%)');
test_length_percent_equals('min(1vmax + 1%)', 'calc(1vmax + 1%)');
test_length_percent_equals('max(1px + 1%)', 'calc(1px + 1%)');
test_length_percent_equals('max(1cm + 1%)', 'calc(1cm + 1%)');
test_length_percent_equals('max(1mm + 1%)', 'calc(1mm + 1%)');
test_length_percent_equals('max(1Q + 1%)', 'calc(1Q + 1%)');
test_length_percent_equals('max(1in + 1%)', 'calc(1in + 1%)');
test_length_percent_equals('max(1pc + 1%)', 'calc(1pc + 1%)');
test_length_percent_equals('max(1pt + 1%)', 'calc(1pt + 1%)');
test_length_percent_equals('max(1em + 1%)', 'calc(1em + 1%)');
test_length_percent_equals('max(1ex + 1%)', 'calc(1ex + 1%)');
test_length_percent_equals('max(1ch + 1%)', 'calc(1ch + 1%)');
test_length_percent_equals('max(1rem + 1%)', 'calc(1rem + 1%)');
test_length_percent_equals('max(1vh + 1%)', 'calc(1vh + 1%)');
test_length_percent_equals('max(1vw + 1%)', 'calc(1vw + 1%)');
test_length_percent_equals('max(1vmin + 1%)', 'calc(1vmin + 1%)');
test_length_percent_equals('max(1vmax + 1%)', 'calc(1vmax + 1%)');
test_math_used('min(1px + 1%)', 'calc(1px + 1%)', {prop:'margin-left'});
test_math_used('min(1cm + 1%)', 'calc(1cm + 1%)');
test_math_used('min(1mm + 1%)', 'calc(1mm + 1%)');
test_math_used('min(1Q + 1%)', 'calc(1Q + 1%)');
test_math_used('min(1in + 1%)', 'calc(1in + 1%)');
test_math_used('min(1pc + 1%)', 'calc(1pc + 1%)');
test_math_used('min(1pt + 1%)', 'calc(1pt + 1%)');
test_math_used('min(1em + 1%)', 'calc(1em + 1%)');
test_math_used('min(1ex + 1%)', 'calc(1ex + 1%)');
test_math_used('min(1ch + 1%)', 'calc(1ch + 1%)');
test_math_used('min(1rem + 1%)', 'calc(1rem + 1%)');
test_math_used('min(1vh + 1%)', 'calc(1vh + 1%)');
test_math_used('min(1vw + 1%)', 'calc(1vw + 1%)');
test_math_used('min(1vmin + 1%)', 'calc(1vmin + 1%)');
test_math_used('min(1vmax + 1%)', 'calc(1vmax + 1%)');
test_math_used('max(1px + 1%)', 'calc(1px + 1%)');
test_math_used('max(1cm + 1%)', 'calc(1cm + 1%)');
test_math_used('max(1mm + 1%)', 'calc(1mm + 1%)');
test_math_used('max(1Q + 1%)', 'calc(1Q + 1%)');
test_math_used('max(1in + 1%)', 'calc(1in + 1%)');
test_math_used('max(1pc + 1%)', 'calc(1pc + 1%)');
test_math_used('max(1pt + 1%)', 'calc(1pt + 1%)');
test_math_used('max(1em + 1%)', 'calc(1em + 1%)');
test_math_used('max(1ex + 1%)', 'calc(1ex + 1%)');
test_math_used('max(1ch + 1%)', 'calc(1ch + 1%)');
test_math_used('max(1rem + 1%)', 'calc(1rem + 1%)');
test_math_used('max(1vh + 1%)', 'calc(1vh + 1%)');
test_math_used('max(1vw + 1%)', 'calc(1vw + 1%)');
test_math_used('max(1vmin + 1%)', 'calc(1vmin + 1%)');
test_math_used('max(1vmax + 1%)', 'calc(1vmax + 1%)');
// Comparisons between lengths and percentages
test_length_percent_equals('min(20px, 10%)', '20px');
test_length_percent_equals('min(1em, 10%)', '20px');
test_length_percent_equals('max(20px, 10%)', '40px');
test_length_percent_equals('max(1em, 10%)', '40px');
test_math_used('min(20px, 10%)', '20px');
test_math_used('min(1em, 10%)', '20px');
test_math_used('max(20px, 10%)', '40px');
test_math_used('max(1em, 10%)', '40px');
document.getElementById('container').style.width = '100px';
test_length_percent_equals('min(20px, 10%)', '10px', 'width=100px');
test_length_percent_equals('min(1em, 10%)', '10px', 'width=100px');
test_length_percent_equals('max(20px, 10%)', '20px', 'width=100px');
test_length_percent_equals('max(1em, 10%)', '20px', 'width=100px');
test_math_used('min(20px, 10%)', '10px', {msgExtra:'width=100px'});
test_math_used('min(1em, 10%)', '10px', {msgExtra:'width=100px'});
test_math_used('max(20px, 10%)', '20px', {msgExtra:'width=100px'});
test_math_used('max(1em, 10%)', '20px', {msgExtra:'width=100px'});
document.getElementById('container').style.width = '400px';
// Comparisons between different mixings
test_length_percent_equals('min(30px + 10%, 60px + 5%)', '70px');
test_length_percent_equals('max(2em + 10%, 1em + 20%)', '100px');
test_math_used('min(30px + 10%, 60px + 5%)', '70px');
test_math_used('max(2em + 10%, 1em + 20%)', '100px');
// General calculations
test_length_percent_equals('calc(min(1.5em, 10%) + 10px)', '40px');
test_length_percent_equals('calc(min(1.5em, 10%) - 10px)', '20px');
test_length_percent_equals('calc(min(1.5em, 10%) * 2)', '60px');
test_length_percent_equals('calc(min(1.5em, 10%) / 2)', '15px');
test_length_percent_equals('calc(max(1em, 15%) + 10px)', '70px');
test_length_percent_equals('calc(max(1em, 15%) - 10px)', '50px');
test_length_percent_equals('calc(max(1em, 15%) * 2)', '120px');
test_length_percent_equals('calc(max(1em, 15%) / 2)', '30px');
test_length_percent_equals('calc(min(1.5em, 10%) + max(1em, 15%))', '90px');
test_length_percent_equals('calc(min(1.5em, 10%) - max(1em, 15%))', '-30px');
test_math_used('calc(min(1.5em, 10%) + 10px)', '40px');
test_math_used('calc(min(1.5em, 10%) - 10px)', '20px');
test_math_used('calc(min(1.5em, 10%) * 2)', '60px');
test_math_used('calc(min(1.5em, 10%) / 2)', '15px');
test_math_used('calc(max(1em, 15%) + 10px)', '70px');
test_math_used('calc(max(1em, 15%) - 10px)', '50px');
test_math_used('calc(max(1em, 15%) * 2)', '120px');
test_math_used('calc(max(1em, 15%) / 2)', '30px');
test_math_used('calc(min(1.5em, 10%) + max(1em, 15%))', '90px');
test_math_used('calc(min(1.5em, 10%) - max(1em, 15%))', '-30px');
</script>

View file

@ -3,79 +3,117 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#mixed-percentages">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div style="width: 100px;">
<div id=target></div>
</div>
<script>
const property = 'margin-left';
function test_valid_length_percent(value, expected) {
test_valid_value(property, value, expected);
function test_serialization(t,s,c,u, {prop}={}) {
test_specified_serialization(prop || 'text-indent', t, s);
test_computed_serialization(prop || 'text-indent', t, c);
if(u) test_used_serialization(prop || 'margin-left', t, u);
}
test_valid_length_percent('min(1px + 1%)', 'min(1% + 1px)');
test_valid_length_percent('min(1cm + 1%)', 'min(1% + 1cm)');
test_valid_length_percent('min(1mm + 1%)', 'min(1% + 1mm)');
test_valid_length_percent('min(1Q + 1%)', 'min(1% + 1q)');
test_valid_length_percent('min(1in + 1%)', 'min(1% + 1in)');
test_valid_length_percent('min(1pc + 1%)', 'min(1% + 1pc)');
test_valid_length_percent('min(1pt + 1%)', 'min(1% + 1pt)');
test_valid_length_percent('min(1em + 1%)', 'min(1% + 1em)');
test_valid_length_percent('min(1ex + 1%)', 'min(1% + 1ex)');
test_valid_length_percent('min(1ch + 1%)', 'min(1% + 1ch)');
test_valid_length_percent('min(1rem + 1%)', 'min(1% + 1rem)');
test_valid_length_percent('min(1vh + 1%)', 'min(1% + 1vh)');
test_valid_length_percent('min(1vw + 1%)', 'min(1% + 1vw)');
test_valid_length_percent('min(1vmin + 1%)', 'min(1% + 1vmin)');
test_valid_length_percent('min(1vmax + 1%)', 'min(1% + 1vmax)');
test_valid_length_percent('max(1px + 1%)', 'max(1% + 1px)');
test_valid_length_percent('max(1cm + 1%)', 'max(1% + 1cm)');
test_valid_length_percent('max(1mm + 1%)', 'max(1% + 1mm)');
test_valid_length_percent('max(1Q + 1%)', 'max(1% + 1q)');
test_valid_length_percent('max(1in + 1%)', 'max(1% + 1in)');
test_valid_length_percent('max(1pc + 1%)', 'max(1% + 1pc)');
test_valid_length_percent('max(1pt + 1%)', 'max(1% + 1pt)');
test_valid_length_percent('max(1em + 1%)', 'max(1% + 1em)');
test_valid_length_percent('max(1ex + 1%)', 'max(1% + 1ex)');
test_valid_length_percent('max(1ch + 1%)', 'max(1% + 1ch)');
test_valid_length_percent('max(1rem + 1%)', 'max(1% + 1rem)');
test_valid_length_percent('max(1vh + 1%)', 'max(1% + 1vh)');
test_valid_length_percent('max(1vw + 1%)', 'max(1% + 1vw)');
test_valid_length_percent('max(1vmin + 1%)', 'max(1% + 1vmin)');
test_valid_length_percent('max(1vmax + 1%)', 'max(1% + 1vmax)');
// If fully resolvable to a number, serialize to a calc() or all the way to a number.
test_serialization(
'min(1px)',
'calc(1px)',
'1px',
'1px');
test_serialization(
'max(1px)',
'calc(1px)',
'1px',
'1px');
test_valid_length_percent('min(20px, 10%)', 'min(20px, 10%)');
test_valid_length_percent('min(1em, 10%)', 'min(1em, 10%)');
test_valid_length_percent('max(20px, 10%)', 'max(20px, 10%)');
test_valid_length_percent('max(1em, 10%)', 'max(1em, 10%)');
test_valid_length_percent('min(10%, 20px)', 'min(10%, 20px)');
test_valid_length_percent('min(10%, 1em)', 'min(10%, 1em)');
test_valid_length_percent('max(10%, 20px)', 'max(10%, 20px)');
test_valid_length_percent('max(10%, 1em)', 'max(10%, 1em)');
// If not, keep as the function.
test_serialization(
'min(1% + 1px)',
'min(1% + 1px)',
'min(1% + 1px)',
'2px');
test_serialization(
'min(1px + 1%)',
'min(1% + 1px)',
'min(1% + 1px)',
'2px');
test_serialization(
'max(1px + 1%)',
'max(1% + 1px)',
'max(1% + 1px)',
'2px');
test_valid_length_percent('min(10% + 30px, 5% + 60px)', 'min(10% + 30px, 5% + 60px)')
test_valid_length_percent('max(10% + 2em, 5% + 1em)', 'max(10% + 2em, 5% + 1em)')
// Arguments are simplified, but not reordered.
test_serialization(
'min(20px, 10%)',
'min(20px, 10%)',
'min(20px, 10%)',
'10px');
test_serialization(
'min(1em, 10%)',
'min(1em, 10%)',
'min(16px, 10%)',
'10px');
test_serialization(
'min(10%, 20px)',
'min(10%, 20px)',
'min(10%, 20px)',
'10px');
test_serialization(
'min(10%, 1em)',
'min(10%, 1em)',
'min(10%, 16px)',
'10px');
test_serialization(
'max(20px, 10%)',
'max(20px, 10%)',
'max(20px, 10%)',
'20px');
test_serialization(
'max(1em, 10%)',
'max(1em, 10%)',
'max(16px, 10%)',
'16px');
test_serialization(
'max(10%, 20px)',
'max(10%, 20px)',
'max(10%, 20px)',
'20px');
test_serialization(
'max(10%, 1em)',
'max(10%, 1em)',
'max(10%, 16px)',
'16px');
test_valid_length_percent('calc(min(10%) + max(1em) + min(20px))', 'calc(min(10%) + max(1em) + min(20px))');
test_valid_length_percent('calc(max(20px) + min(1em) + max(10%))', 'calc(max(20px) + min(1em) + max(10%))');
test_valid_length_percent('calc(max(10%) + min(1em) + max(20px))', 'calc(max(10%) + min(1em) + max(20px))');
test_valid_length_percent('calc(min(20px) + max(1em) + min(10%))', 'calc(min(20px) + max(1em) + min(10%))');
// Within an argument, normal sorting occurs
test_serialization(
'min(10% + 30px, 5em + 5%)',
'min(10% + 30px, 5% + 5em)',
'min(10% + 30px, 5% + 80px)',
'40px');
test_serialization(
'max(10% + 30px, 5em + 5%)',
'max(10% + 30px, 5% + 5em)',
'max(10% + 30px, 5% + 80px)',
'85px');
test_valid_length_percent('calc(20px + min(10%))', 'calc(20px + min(10%))');
test_valid_length_percent('calc(10% + min(20px))', 'calc(10% + min(20px))');
test_valid_length_percent('calc(1em + min(10%))', 'calc(1em + min(10%))');
test_valid_length_percent('calc(10% + min(1em))', 'calc(10% + min(1em))');
test_valid_length_percent('calc(min(10%) + 20px)', 'calc(20px + min(10%))');
test_valid_length_percent('calc(min(20px) + 10%)', 'calc(10% + min(20px))');
test_valid_length_percent('calc(min(10%) + 1em)', 'calc(1em + min(10%))');
test_valid_length_percent('calc(min(1em) + 10%)', 'calc(10% + min(1em))');
test_valid_length_percent('calc(20px + max(10%))', 'calc(20px + max(10%))');
test_valid_length_percent('calc(10% + max(20px))', 'calc(10% + max(20px))');
test_valid_length_percent('calc(1em + max(10%))', 'calc(1em + max(10%))');
test_valid_length_percent('calc(10% + max(1em))', 'calc(10% + max(1em))');
test_valid_length_percent('calc(max(10%) + 20px)', 'calc(20px + max(10%))');
test_valid_length_percent('calc(max(20px) + 10%)', 'calc(10% + max(20px))');
test_valid_length_percent('calc(max(10%) + 1em)', 'calc(1em + max(10%))');
test_valid_length_percent('calc(max(1em) + 10%)', 'calc(10% + max(1em))');
// min()/max() are valid inside a calc(),
// and retain their relative order
test_serialization(
'calc(min(10% + 1px) + max(1em + 10%) + min(10% + 20px))',
'calc(min(10% + 1px) + max(10% + 1em) + min(10% + 20px))',
'calc(min(10% + 1px) + max(10% + 16px) + min(10% + 20px))',
'67px');
// min()/max() can be combined with plain units as well.
// While min()/max() maintain their own ordering,
// ordinary units will re-sort around them.
test_serialization(
'calc(1em + max(10% + 20px) + 5% + min(1em + 10%) + 10px)',
'calc(5% + 1em + 10px + max(10% + 20px) + min(10% + 1em))',
'calc(5% + 26px + max(10% + 20px) + min(10% + 16px))',
'87px');
</script>

View file

@ -5,61 +5,71 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div style="width: 100px;">
<div id=target></div>
</div>
<script>
const property = 'letter-spacing';
function test_valid_length(value, expected) {
test_valid_value(property, value, expected);
function test_serialization(t,s,c,u, {prop}={}) {
test_specified_serialization(prop || 'text-indent', t, s);
test_computed_serialization(prop || 'text-indent', t, c);
if(u) test_used_serialization(prop || 'margin-left', t, u);
}
test_valid_length('min(1px)', 'min(1px)');
test_valid_length('min(1cm)', 'min(1cm)');
test_valid_length('min(1mm)', 'min(1mm)');
test_serialization(
'min(1px)',
'calc(1px)',
'1px');
test_serialization(
'min(1in)',
'calc(96px)',
'96px');
test_serialization(
'max(1px)',
'calc(1px)',
'1px');
test_serialization(
'max(1in)',
'calc(96px)',
'96px');
// Values are case-insensitive and serialize as lower case, for example 1Q
// serializes as 1q.
test_valid_length('min(1Q)', 'min(1q)');
test_valid_length('min(1in)', 'min(1in)');
test_valid_length('min(1pc)', 'min(1pc)');
test_valid_length('min(1pt)', 'min(1pt)');
test_valid_length('min(1em)', 'min(1em)');
test_valid_length('min(1ex)', 'min(1ex)');
test_valid_length('min(1ch)', 'min(1ch)');
test_valid_length('min(1rem)', 'min(1rem)');
test_valid_length('min(1vh)', 'min(1vh)');
test_valid_length('min(1vw)', 'min(1vw)');
test_valid_length('min(1vmin)', 'min(1vmin)');
test_valid_length('min(1vmax)', 'min(1vmax)');
test_valid_length('max(1px)', 'max(1px)');
test_valid_length('max(1cm)', 'max(1cm)');
test_valid_length('max(1mm)', 'max(1mm)');
test_valid_length('max(1Q)', 'max(1q)');
test_valid_length('max(1in)', 'max(1in)');
test_valid_length('max(1pc)', 'max(1pc)');
test_valid_length('max(1pt)', 'max(1pt)');
test_valid_length('max(1em)', 'max(1em)');
test_valid_length('max(1ex)', 'max(1ex)');
test_valid_length('max(1ch)', 'max(1ch)');
test_valid_length('max(1rem)', 'max(1rem)');
test_valid_length('max(1vh)', 'max(1vh)');
test_valid_length('max(1vw)', 'max(1vw)');
test_valid_length('max(1vmin)', 'max(1vmin)');
test_valid_length('max(1vmax)', 'max(1vmax)');
test_serialization(
'min(1PX)',
'calc(1px)',
'1px');
test_valid_length('min(10px, 20px, 30px)', 'min(10px, 20px, 30px)');
test_valid_length('min(30px, 20px, 10px)', 'min(30px, 20px, 10px)');
test_valid_length('min(20px, 1em, 10vw)', 'min(20px, 1em, 10vw)');
test_valid_length('min(10vw, 1em, 20px)', 'min(10vw, 1em, 20px)');
test_valid_length('max(10px, 20px, 30px)', 'max(10px, 20px, 30px)');
test_valid_length('max(30px, 20px, 10px)', 'max(30px, 20px, 10px)');
test_valid_length('max(20px, 1em, 10vw)', 'max(20px, 1em, 10vw)');
test_valid_length('max(10vw, 1em, 20px)', 'max(10vw, 1em, 20px)');
// Arguments simplify down eagerly
test_serialization(
'min(50px, 1in + 1px)',
'calc(50px)',
'50px');
test_serialization(
'max(50px, 1in + 1px)',
'calc(97px)',
'97px');
test_valid_length('calc(min(10px) + max(1em) + min(10vw))', 'calc(min(10px) + max(1em) + min(10vw))');
test_valid_length('calc(max(1em) + min(10vw) + max(10px))', 'calc(max(1em) + min(10vw) + max(10px))');
test_valid_length('calc(10px + min(1em))', 'calc(10px + min(1em))');
test_valid_length('calc(min(1em) + 10px)', 'calc(10px + min(1em))');
test_valid_length('calc(10px + max(1em))', 'calc(10px + max(1em))');
test_valid_length('calc(max(1em) + 10px)', 'calc(10px + max(1em))');
// And the entire function simplifies eagerly if possible
test_serialization(
'calc(1px + min(1in, 100px))',
'calc(97px)',
'97px');
test_serialization(
'calc(1px + max(1in, 100px))',
'calc(101px)',
'101px');
// Computed-value units preserve min()/max() in specified values
test_serialization(
'min(1px, 1em)',
'min(1px, 1em)',
'1px');
test_serialization(
'calc(min(1px, 1in) + max(100px + 1em, 10px + 1in) + 1px)',
'calc(2px + max(1em + 100px, 106px))',
'118px');
// Can't test that min()/max() are preserved in computed values with just lengths;
// see minmax-length-percentage-serialize for tests of that.
</script>

View file

@ -5,41 +5,26 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="target"></div>
<div id="reference"></div>
<script>
const property = 'opacity';
function test_number_equals(value, expected) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed);
}
// Identity tests
test_number_equals('min(1)', '1');
test_number_equals('max(1)', '1');
test_math_used('min(1)', '1', {type:'number'});
test_math_used('max(1)', '1', {type:'number'});
// Nestings
test_number_equals('min(0.2, max(0.1, 0.15))', '0.15');
test_number_equals('max(0.1, min(0.2, 0.15))', '0.15');
test_math_used('min(0.2, max(0.1, 0.15))', '0.15', {type:'number'});
test_math_used('max(0.1, min(0.2, 0.15))', '0.15', {type:'number'});
// General calculations
test_number_equals('calc(min(0.1, 0.2) + 0.05)', '0.15');
test_number_equals('calc(min(0.1, 0.2) - 0.05)', '0.05');
test_number_equals('calc(min(0.1, 0.2) * 2)', '0.2');
test_number_equals('calc(min(0.1, 0.2) / 2)', '0.05');
test_number_equals('calc(max(0.1, 0.2) + 0.05)', '0.25');
test_number_equals('calc(max(0.1, 0.2) - 0.05)', '0.15');
test_number_equals('calc(max(0.1, 0.2) * 2)', '0.4');
test_number_equals('calc(max(0.1, 0.2) / 2)', '0.1');
test_number_equals('calc(min(0.1, 0.2) + max(0.1, 0.05))', '0.2');
test_number_equals('calc(min(0.1, 0.2) - max(0.1, 0.05))', '0');
// Mixing floats and integers
test_number_equals('min(0, 0.5)', '0');
test_number_equals('max(0, 0.5)', '0.5');
test_math_used('calc(min(0.1, 0.2) + 0.05)', '0.15', {type:'number'});
test_math_used('calc(min(0.1, 0.2) - 0.05)', '0.05', {type:'number'});
test_math_used('calc(min(0.1, 0.2) * 2)', '0.2', {type:'number'});
test_math_used('calc(min(0.1, 0.2) / 2)', '0.05', {type:'number'});
test_math_used('calc(max(0.1, 0.2) + 0.05)', '0.25', {type:'number'});
test_math_used('calc(max(0.1, 0.2) - 0.05)', '0.15', {type:'number'});
test_math_used('calc(max(0.1, 0.2) * 2)', '0.4', {type:'number'});
test_math_used('calc(max(0.1, 0.2) / 2)', '0.1', {type:'number'});
test_math_used('calc(min(0.1, 0.2) + max(0.1, 0.05))', '0.2', {type:'number'});
test_math_used('calc(min(0.1, 0.2) - max(0.1, 0.05))', '0', {type:'number'});
</script>

View file

@ -3,27 +3,61 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#numbers">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div id=target></div>
<script>
function test_valid_number(value, expected) {
test_valid_value('opacity', value, expected);
function test_serialization(t,s,c) {
test_specified_serialization('opacity', t, s);
test_specified_serialization('transform', `scale(${t})`, `scale(calc(${c}))`);
test_computed_serialization('opacity', t, c);
test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`);
}
test_valid_number('min(1)', 'min(1)');
test_valid_number('max(1)', 'max(1)');
test_serialization(
'min(.1)',
'calc(0.1)',
'0.1');
test_serialization(
'max(.1)',
'calc(0.1)',
'0.1');
test_valid_number('min(1, 2, 3)', 'min(1, 2, 3)');
test_valid_number('min(3, 2, 1)', 'min(3, 2, 1)');
test_valid_number('max(1, 2, 3)', 'max(1, 2, 3)');
test_valid_number('max(3, 2, 1)', 'max(3, 2, 1)');
test_serialization(
'min(.1, .2, .3)',
'calc(0.1)',
'0.1');
test_serialization(
'max(.1, .2, .3)',
'calc(0.3)',
'0.3');
test_valid_number('calc(min(1) + min(2))', 'calc(min(1) + min(2))');
test_valid_number('calc(max(1) + max(2))', 'calc(max(1) + max(2))');
test_valid_number('calc(1 + min(1))', 'calc(1 + min(1))');
test_valid_number('calc(min(1) + 1)', 'calc(1 + min(1))');
test_valid_number('calc(1 + max(1))', 'calc(1 + max(1))');
test_valid_number('calc(max(1) + 1)', 'calc(1 + max(1))');
test_serialization(
'min(.3, .2, .1)',
'calc(0.1)',
'0.1');
test_serialization(
'max(.3, .2, .1)',
'calc(0.3)',
'0.3');
test_serialization(
'calc(min(.1) + min(.2))',
'calc(0.3)',
'0.3');
test_serialization(
'calc(max(.1) + max(.2))',
'calc(0.3)',
'0.3');
test_serialization(
'calc(.1 + min(.1))',
'calc(0.2)',
'0.2');
test_serialization(
'calc(max(.1) + .1)',
'calc(0.2)',
'0.2');
</script>

View file

@ -5,39 +5,29 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="container" style="width: 400px">
<div id="target"></div>
<div id="reference"></div>
</div>
<script>
const property = 'margin-left';
function test_percentage_equals(value, expected) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed);
}
// Identity tests
test_percentage_equals('min(1%)', '1%');
test_percentage_equals('max(1%)', '1%');
test_math_used('min(1%)', '1%');
test_math_used('max(1%)', '1%');
// Nestings
test_percentage_equals('min(20%, max(10%, 15%))', '15%');
test_percentage_equals('max(10%, min(20%, 15%))', '15%');
test_math_used('min(20%, max(10%, 15%))', '15%');
test_math_used('max(10%, min(20%, 15%))', '15%');
// General calculations
test_percentage_equals('calc(min(10%, 20%) + 5%)', '15%');
test_percentage_equals('calc(min(10%, 20%) - 5%)', '5%');
test_percentage_equals('calc(min(10%, 20%) * 2)', '20%');
test_percentage_equals('calc(min(10%, 20%) / 2)', '5%');
test_percentage_equals('calc(max(10%, 20%) + 5%)', '25%');
test_percentage_equals('calc(max(10%, 20%) - 5%)', '15%');
test_percentage_equals('calc(max(10%, 20%) * 2)', '40%');
test_percentage_equals('calc(max(10%, 20%) / 2)', '10%');
test_percentage_equals('calc(min(10%, 20%) + max(10%, 5%))', '20%');
test_percentage_equals('calc(min(10%, 20%) - max(10%, 5%))', '0%');
test_math_used('calc(min(10%, 20%) + 5%)', '15%');
test_math_used('calc(min(10%, 20%) - 5%)', '5%');
test_math_used('calc(min(10%, 20%) * 2)', '20%');
test_math_used('calc(min(10%, 20%) / 2)', '5%');
test_math_used('calc(max(10%, 20%) + 5%)', '25%');
test_math_used('calc(max(10%, 20%) - 5%)', '15%');
test_math_used('calc(max(10%, 20%) * 2)', '40%');
test_math_used('calc(max(10%, 20%) / 2)', '10%');
test_math_used('calc(min(10%, 20%) + max(10%, 5%))', '20%');
test_math_used('calc(min(10%, 20%) - max(10%, 5%))', '0%');
</script>

View file

@ -3,27 +3,70 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#percentages">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div style="width: 100px;">
<div id=target></div>
</div>
<script>
function test_valid_percentage(value, expected) {
test_valid_value('margin-left', value, expected);
function test_serialization(t,s,c,u, {prop}={}) {
test_specified_serialization(prop || 'text-indent', t,s);
test_computed_serialization(prop || 'text-indent', t,c);
if(u) test_used_serialization(prop || 'margin-left', t,u);
}
test_valid_percentage('min(1%)', 'min(1%)');
test_valid_percentage('max(1%)', 'max(1%)');
test_serialization(
'min(1%)',
'calc(1%)',
'1%',
'1px');
test_serialization(
'max(1%)',
'calc(1%)',
'1%',
'1px');
test_valid_percentage('min(1%, 2%, 3%)', 'min(1%, 2%, 3%)');
test_valid_percentage('min(3%, 2%, 1%)', 'min(3%, 2%, 1%)');
test_valid_percentage('max(1%, 2%, 3%)', 'max(1%, 2%, 3%)');
test_valid_percentage('max(3%, 2%, 1%)', 'max(3%, 2%, 1%)');
test_valid_percentage('calc(min(1%) + min(2%))', 'calc(min(1%) + min(2%))');
test_valid_percentage('calc(max(1%) + max(2%))', 'calc(max(1%) + max(2%))');
test_valid_percentage('calc(1% + min(1%))', 'calc(1% + min(1%))');
test_valid_percentage('calc(min(1%) + 1%)', 'calc(1% + min(1%))');
test_valid_percentage('calc(1% + max(1%))', 'calc(1% + max(1%))');
test_valid_percentage('calc(max(1%) + 1%)', 'calc(1% + max(1%))');
// %s can't be simplified until we resolve them,
// since in some cases they can resolve against a negative value
// (so that 20% is less than 10%),
// and we don't want to try and distinguish between the properties
// where the resolving value is possibly-negative or always non-negative.
test_serialization(
'min(1%, 2%, 3%)',
'min(1%, 2%, 3%)',
'min(1%, 2%, 3%)',
'1px');
test_serialization(
'min(3%, 2%, 1%)',
'min(3%, 2%, 1%)',
'min(3%, 2%, 1%)',
'1px');
test_serialization(
'max(1%, 2%, 3%)',
'max(1%, 2%, 3%)',
'max(1%, 2%, 3%)',
'3px');
test_serialization(
'max(3%, 2%, 1%)',
'max(3%, 2%, 1%)',
'max(3%, 2%, 1%)',
'3px');
// Also ensure that this works against a possibly-negative resolving value...
test_serialization(
'min(1%, 2%, 3%) 0px',
'min(1%, 2%, 3%) 0px',
'min(1%, 2%, 3%) 0px',
'',
{prop:'background-position'});
test_serialization(
'calc(min(1%, 2%) + max(3%, 4%) + 10%)',
'calc(15%)',
'15%',
'15px');
</script>

View file

@ -5,18 +5,11 @@
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/computed-testcommon.js"></script>
<script src="../support/numeric-testcommon.js"></script>
<div id="target"></div>
<div id="reference"></div>
<script>
const property = 'transition-delay';
function test_time_equals(value, expected) {
const reference = document.getElementById('reference');
reference.style[property] = '';
reference.style[property] = expected;
const computed = getComputedStyle(reference)[property];
test_computed_value(property, value, computed);
function test_time_equals(t,e) {
test_math_used(t, e, {type:"time"});
}
// Identity tests
@ -50,4 +43,6 @@ test_time_equals('calc(max(0.5s, 400ms) * 2)', '1s');
test_time_equals('calc(max(0.5s, 400ms) / 2)', '0.25s');
test_time_equals('calc(min(0.5s, 600ms) + max(500ms, 0.4s))', '1s');
test_time_equals('calc(min(0.5s, 600ms) - max(500ms, 0.4s))', '0s');
test_time_equals('min(1s + 100ms, 500ms * 3)', '1.1s');
test_time_equals('calc(min(1s, 2s) + max(3s, 4s) + 10s)', '15s');
</script>

View file

@ -3,36 +3,62 @@
<link rel="help" href="https://drafts.csswg.org/css-values-4/#time">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<script src="../support/serialize-testcommon.js"></script>
<div id=target></div>
<script>
function test_valid_time(value, expected) {
test_valid_value('transition-delay', value, expected);
function test_serialization(t,s,c,u, {prop="transition-delay"}={}) {
test_specified_serialization(prop, t, s);
test_computed_serialization(prop, t, c);
if(u) test_used_serialization(prop, t, u);
}
test_valid_time('min(1ms)', 'min(1ms)');
test_valid_time('min(1s)', 'min(1s)');
test_valid_time('max(1ms)', 'max(1ms)');
test_valid_time('max(1s)', 'max(1s)');
test_serialization(
'min(1ms)',
'calc(0.001s)',
'0.001s');
test_serialization(
'min(1s)',
'calc(1s)',
'1s');
test_serialization(
'max(1ms)',
'calc(0.001s)',
'0.001s');
test_serialization(
'max(1s)',
'calc(1s)',
'1s');
test_valid_time('min(1ms, 2ms, 3ms)', 'min(1ms, 2ms, 3ms)');
test_valid_time('min(3ms, 2ms, 1ms)', 'min(3ms, 2ms, 1ms)');
test_valid_time('max(1ms, 2ms, 3ms)', 'max(1ms, 2ms, 3ms)');
test_valid_time('max(3ms, 2ms, 1ms)', 'max(3ms, 2ms, 1ms)');
test_valid_time('min(1000ms, 1s)', 'min(1000ms, 1s)');
test_valid_time('min(1s, 1000ms)', 'min(1s, 1000ms)');
test_valid_time('max(1000ms, 1s)', 'max(1000ms, 1s)');
test_valid_time('max(1s, 1000ms)', 'max(1s, 1000ms)');
test_valid_time('calc(min(1s) + min(2s))', 'calc(min(1s) + min(2s))');
test_valid_time('calc(min(2s) + min(1s))', 'calc(min(2s) + min(1s))');
test_valid_time('calc(max(1s) + max(2s))', 'calc(max(1s) + max(2s))');
test_valid_time('calc(max(2s) + max(1s))', 'calc(max(2s) + max(1s))');
test_valid_time('calc(1s + min(2s))', 'calc(1s + min(2s))');
test_valid_time('calc(min(2s) + 1s)', 'calc(1s + min(2s))');
test_valid_time('calc(1s + max(2s))', 'calc(1s + max(2s))');
test_valid_time('calc(max(2s) + 1s)', 'calc(1s + max(2s))');
test_serialization(
'min(1s, 2s, 3s)',
'calc(1s)',
'1s');
test_serialization(
'min(3s, 2s, 1s)',
'calc(1s)',
'1s');
test_serialization(
'max(1s, 2s, 3s)',
'calc(3s)',
'3s');
test_serialization(
'max(3s, 2s, 1s)',
'calc(3s)',
'3s');
test_serialization(
'min(900ms, 1s)',
'calc(0.9s)',
'0.9s');
test_serialization(
'max(1100ms, 1s)',
'calc(1.1s)',
'1.1s');
test_serialization(
'calc(min(1s, 2s) + max(3s, 4s) + 10s)',
'calc(15s)',
'15s');
</script>