Sam Weinig
50220b6891
Automatic update from web-platform-tests Adds tests for CSS Values 5 calc-mix() (#59515) -- wpt-commits: aac6afee9284db93fd006a74b2aedb103e0e33c7 wpt-pr: 59515
103 lines
5.4 KiB
HTML
103 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-mix">
|
|
<link rel="author" title="sam@webkit.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../support/numeric-testcommon.js"></script>
|
|
<style>
|
|
#parent {
|
|
width: 100px;
|
|
}
|
|
#target {
|
|
font-size: 10px;
|
|
text-indent: 15px;
|
|
width: 15px;
|
|
}
|
|
</style>
|
|
<div id="parent">
|
|
<div id="target"></div>
|
|
</div>
|
|
<script>
|
|
|
|
// Basic
|
|
test_math_used('calc-mix(1 100%)', '1', {type:'number'});
|
|
test_math_used('calc-mix(1 50%, 3 50%)', '2', {type:'number'});
|
|
test_math_used('calc-mix(1 25%, 3 25%, 5 50%)', '3.5', {type:'number'});
|
|
test_math_used('calc-mix(1 25%, 3 25%, 7 0%, 5 50%)', '3.5', {type:'number'});
|
|
|
|
// Missing weight percentages
|
|
test_math_used('calc-mix(1)', '1', {type:'number'});
|
|
test_math_used('calc-mix(1 50%, 3)', '2', {type:'number'});
|
|
test_math_used('calc-mix(1, 3, 5 50%)', '3.5', {type:'number'});
|
|
|
|
// Weight percentages add up to more than 100%
|
|
test_math_used('calc-mix(1 75%, 3 75%)', '2', {type:'number'});
|
|
test_math_used('calc-mix(1 50%, 3 50%, 5 50%)', '3', {type:'number'});
|
|
test_math_used('calc-mix(1 75%, 3 75%, 5, 7)', '2', {type:'number'});
|
|
|
|
// Weight percentages add up to less than 100%
|
|
test_math_used('calc-mix(1 25%, 3 25%)', '1', {type:'number'});
|
|
test_math_used('calc-mix(1 25%, 3 25%, 5, 7)', '4', {type:'number'});
|
|
|
|
// Weight percentages are all known zero
|
|
test_math_used('calc-mix(1 0%)', '0', {type:'number'});
|
|
test_math_used('calc-mix(1 0%, 3 0%, 5 0%)', '0', {type:'number'});
|
|
test_math_used('calc-mix(1 0%, 3 0%, 5 * sibling-index() 0%)', '0', {type:'number'});
|
|
test_math_used('calc-mix(1px 0%)', '0px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1px 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1px 0%, 3px 0%, 5px 0%)', '0px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1px 0%, 3px 0%, 5px 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1px 0%, 3px 0%, 5px * sibling-index() 0%)', '0px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1px 0%, 3px 0%, 5px * sibling-index() 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1% 0%)', '0%', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1% 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1% 0%, 3% 0%, 5% 0%)', '0%', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1% 0%, 3% 0%, 5% 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1% 0%, 3% 0%, 5% * sibling-index() 0%)', '0%', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1% 0%, 3% 0%, 5% * sibling-index() 0%) ', '0px', {prop:'width'});
|
|
// FIXME: What should happen for the all zero weight percentage case when the items have values of both <percentage> and <length> (allowed in a <length-percentage> property)?
|
|
// NOTE: Currently matches the first item, but that seems arbitrary.
|
|
test_math_used('calc-mix(1% 0%, 3px 0%)', '0%', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1% 0%, 3px 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1px 0%, 3% 0%)', '0px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1px 0%, 3% 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1% * sibling-index() 0%, 3px 0%)', '0%', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1% * sibling-index() 0%, 3px 0%) ', '0px', {prop:'width'});
|
|
test_math_used('calc-mix(1px * sibling-index() 0%, 3% 0%)', '0px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(1px * sibling-index() 0%, 3% 0%) ', '0px', {prop:'width'});
|
|
|
|
test_math_used('calc(10px + calc-mix(1% 0%, 3px 0%))', 'calc(0% + 10px)', {prop:'text-indent'});
|
|
test_math_used('calc(10px + calc-mix(1% 0%, 3px 0%)) ', '10px', {prop:'width'});
|
|
test_math_used('calc(10% + calc-mix(1% 0%, 3px 0%))', 'calc(10%)', {prop:'text-indent'});
|
|
test_math_used('calc(10% + calc-mix(1% 0%, 3px 0%)) ', '10px', {prop:'width'});
|
|
|
|
test_math_used('calc(10px + calc-mix(1px 0%, 3% 0%))', '10px', {prop:'text-indent'});
|
|
test_math_used('calc(10px + calc-mix(1px 0%, 3% 0%)) ', '10px', {prop:'width'});
|
|
test_math_used('calc(10% + calc-mix(1px 0%, 3% 0%))', 'calc(10% + 0px)', {prop:'text-indent'});
|
|
test_math_used('calc(10% + calc-mix(1px 0%, 3% 0%)) ', '10px', {prop:'width'});
|
|
|
|
// Parse-time unresolveable value
|
|
test_math_used('calc-mix(1 * sibling-index() 50%, 3 50%)', '2', {type:'number'});
|
|
|
|
// Parse-time unresolveable weight percentage
|
|
test_math_used('calc-mix(1 calc(50% * sibling-index()), 3 50%)', '2', {type:'number'});
|
|
|
|
// Weight percentage value greater than 100%
|
|
test_math_used('calc-mix(1 calc(150%), 3 100%)', '2', {type:'number'});
|
|
|
|
// Weight percentage value less than 0%
|
|
test_math_used('calc-mix(1 calc(-50%), 3 100%)', '3', {type:'number'});
|
|
|
|
// All values use dimension resolving (due to <length-percentage> property) percentages.
|
|
test_math_used('calc(10px + calc-mix(10% 50%, 30% 50%))', 'calc(10px + 20%)', {prop:'text-indent'}); // `text-indent` computed value resolves retains <length-percentage>
|
|
test_math_used('calc(10px + calc-mix(10% 50%, 30% 50%))', '30px', {prop:'width'}); // `width` computed value resolves all the way down to px
|
|
|
|
// Computed value time resolving units
|
|
test_math_used('calc-mix(10em 50%, 30px 50%)', '65px', {prop:'text-indent'});
|
|
test_math_used('calc-mix(10em 50%, 30px 50%) ', '65px', {prop:'width'}); // Extra-space at end to remove duplicate test name warning
|
|
|
|
// Nested in other math functions
|
|
test_math_used('calc(sign(calc-mix(1 50%, 3 50%)) + 10)', '11', {type:'number'});
|
|
test_math_used('calc(max(calc-mix(1 50%, 3 50%), 1))', '2', {type:'number'});
|
|
</script>
|