Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 53 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/calc-mix-computed.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<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>