mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 53876e32d827db82f4b7af38053529302c243d40
This commit is contained in:
parent
a0f14ceb7b
commit
02d2f1860a
87 changed files with 2931 additions and 515 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue