minmax-length-computed.html (4693B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#lengths"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-type-checking"> 5 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../support/numeric-testcommon.js"></script> 9 <div id="container" style="font-size: 20px"> 10 <div id="target"></div> 11 </div> 12 <script> 13 const property = 'letter-spacing'; 14 15 function test_length_equals(value, expected, msgExtra) { 16 test_math_used(value, expected, {msgExtra}); 17 } 18 19 // Identity tests 20 test_length_equals('min(1px)', '1px'); 21 test_length_equals('min(1cm)', '1cm'); 22 test_length_equals('min(1mm)', '1mm'); 23 test_length_equals('min(1Q)', '1Q'); 24 test_length_equals('min(1in)', '1in'); 25 test_length_equals('min(1pc)', '1pc'); 26 test_length_equals('min(1pt)', '1pt'); 27 test_length_equals('min(1em)', '1em'); 28 test_length_equals('min(1ex)', '1ex'); 29 test_length_equals('min(1ch)', '1ch'); 30 test_length_equals('min(1rem)', '1rem'); 31 test_length_equals('min(1vh)', '1vh'); 32 test_length_equals('min(1vw)', '1vw'); 33 test_length_equals('min(1vmin)', '1vmin'); 34 test_length_equals('min(1vmax)', '1vmax'); 35 test_length_equals('max(1px)', '1px'); 36 test_length_equals('max(1cm)', '1cm'); 37 test_length_equals('max(1mm)', '1mm'); 38 test_length_equals('max(1Q)', '1Q'); 39 test_length_equals('max(1in)', '1in'); 40 test_length_equals('max(1pc)', '1pc'); 41 test_length_equals('max(1pt)', '1pt'); 42 test_length_equals('max(1em)', '1em'); 43 test_length_equals('max(1ex)', '1ex'); 44 test_length_equals('max(1ch)', '1ch'); 45 test_length_equals('max(1rem)', '1rem'); 46 test_length_equals('max(1vh)', '1vh'); 47 test_length_equals('max(1vw)', '1vw'); 48 test_length_equals('max(1vmin)', '1vmin'); 49 test_length_equals('max(1vmax)', '1vmax'); 50 51 // Comparisons between same units 52 test_length_equals('min(1px, 2px)', '1px'); 53 test_length_equals('min(1cm, 2cm)', '1cm'); 54 test_length_equals('min(1mm, 2mm)', '1mm'); 55 test_length_equals('min(1Q, 2Q)', '1Q'); 56 test_length_equals('min(1in, 2in)', '1in'); 57 test_length_equals('min(1pc, 2pc)', '1pc'); 58 test_length_equals('min(1pt, 2pt)', '1pt'); 59 test_length_equals('min(1em, 2em)', '1em'); 60 test_length_equals('min(1ex, 2ex)', '1ex'); 61 test_length_equals('min(1ch, 2ch)', '1ch'); 62 test_length_equals('min(1rem, 2rem)', '1rem'); 63 test_length_equals('min(1vh, 2vh)', '1vh'); 64 test_length_equals('min(1vw, 2vw)', '1vw'); 65 test_length_equals('min(1vmin, 2vmin)', '1vmin'); 66 test_length_equals('min(1vmax, 2vmax)', '1vmax'); 67 test_length_equals('max(1px, 2px)', '2px'); 68 test_length_equals('max(1cm, 2cm)', '2cm'); 69 test_length_equals('max(1mm, 2mm)', '2mm'); 70 test_length_equals('max(1Q, 2Q)', '2Q'); 71 test_length_equals('max(1in, 2in)', '2in'); 72 test_length_equals('max(1pc, 2pc)', '2pc'); 73 test_length_equals('max(1pt, 2pt)', '2pt'); 74 test_length_equals('max(1em, 2em)', '2em'); 75 test_length_equals('max(1ex, 2ex)', '2ex'); 76 test_length_equals('max(1ch, 2ch)', '2ch'); 77 test_length_equals('max(1rem, 2rem)', '2rem'); 78 test_length_equals('max(1vh, 2vh)', '2vh'); 79 test_length_equals('max(1vw, 2vw)', '2vw'); 80 test_length_equals('max(1vmin, 2vmin)', '2vmin'); 81 test_length_equals('max(1vmax, 2vmax)', '2vmax'); 82 83 // Comparisons between different absolute units 84 test_length_equals('min(95px, 1in)', '95px'); 85 test_length_equals('max(95px, 1in)', '1in'); 86 87 // Comparisons between absolute and relative units 88 test_length_equals('min(15px, 1em)', '15px'); 89 test_length_equals('min(25px, 1em)', '20px'); 90 test_length_equals('max(15px, 1em)', '20px'); 91 test_length_equals('max(25px, 1em)', '25px'); 92 93 document.getElementById('container').style.fontSize = '10px'; 94 test_length_equals('min(15px, 1em)', '10px', 'fontSize=10px'); 95 test_length_equals('max(15px, 2em)', '20px', 'fontSize=10px'); 96 97 document.getElementById('container').style.fontSize = '20px'; 98 99 // Nestings 100 test_length_equals('min(25px, max(15px, 1em))', '20px'); 101 test_length_equals('max(15px, min(25px, 1em))', '20px'); 102 103 // General calculations 104 test_length_equals('calc(min(1em, 21px) + 10px)', '30px'); 105 test_length_equals('calc(min(1em, 21px) - 10px)', '10px'); 106 test_length_equals('calc(min(1em, 21px) * 2', '40px'); 107 test_length_equals('calc(min(1em, 21px) / 2', '10px'); 108 test_length_equals('calc(max(1em, 19px) + 10px)', '30px'); 109 test_length_equals('calc(max(1em, 19px) - 10px)', '10px'); 110 test_length_equals('calc(max(1em, 19px) * 2', '40px'); 111 test_length_equals('calc(max(1em, 19px) / 2', '10px'); 112 test_length_equals('calc(min(1em, 21px) + max(0.9em, 20px))', '40px'); 113 test_length_equals('calc(min(1em + 1px, 22px) - max(0.9em, 20px))', '1px'); 114 </script>