calc-size-parsing.html (7008B)
1 <!DOCTYPE html> 2 <title>calc-size() expressions</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="../../support/parsing-testcommon.js"></script> 7 8 <script> 9 10 test_valid_value("width", "calc-size(auto, size)"); 11 test_valid_value("min-width", "calc-size(auto, size)"); 12 test_valid_value("height", "calc-size(auto, size)"); 13 test_valid_value("min-height", "calc-size(auto, size)"); 14 test_invalid_value("max-height", "calc-size(auto, size)"); 15 test_invalid_value("max-width", "calc-size(auto, size)"); 16 17 test_invalid_value("height", "calc-size(none, size)"); 18 test_invalid_value("width", "calc-size(none, size)"); 19 test_invalid_value("min-height", "calc-size(none, size)"); 20 test_invalid_value("min-width", "calc-size(none, size)"); 21 test_invalid_value("max-height", "calc-size(none, size)"); 22 test_invalid_value("max-width", "calc-size(none, size)"); 23 24 test_valid_value("width", "calc-size(max-content, size)"); 25 test_valid_value("height", "calc-size(max-content, size)"); 26 test_valid_value("max-width", "calc-size(max-content, size)"); 27 test_valid_value("max-height", "calc-size(max-content, size)"); 28 test_valid_value("min-width", "calc-size(max-content, size)"); 29 test_valid_value("min-height", "calc-size(max-content, size)"); 30 test_valid_value("block-size", "calc-size(max-content, size)"); 31 test_valid_value("inline-size", "calc-size(max-content, size)"); 32 test_valid_value("max-block-size", "calc-size(max-content, size)"); 33 test_valid_value("max-inline-size", "calc-size(max-content, size)"); 34 test_valid_value("min-block-size", "calc-size(max-content, size)"); 35 test_valid_value("min-inline-size", "calc-size(max-content, size)"); 36 37 test_valid_value("width", "calc-size(fit-content, size)"); 38 test_valid_value("height", "calc-size(min-content, size * 2)", "calc-size(min-content, 2 * size)"); 39 test_valid_value("max-width", "calc-size(max-content, size / 2)", "calc-size(max-content, 0.5 * size)"); 40 test_valid_value("max-height", "calc-size(fit-content, 30px + size / 2)", "calc-size(fit-content, 30px + (0.5 * size))"); 41 test_valid_value("width", "calc-size(fit-content, 50% + size / 2)", "calc-size(fit-content, 50% + (0.5 * size))"); 42 43 test_valid_value("width", "calc-size(any, 25em)"); 44 test_valid_value("width", "calc-size(any, 40%)"); 45 test_valid_value("width", "calc-size(any, 50px + 30%)", "calc-size(any, 30% + 50px)"); 46 test_valid_value("width", "calc-size(calc-size(any, 30px), size)"); 47 test_invalid_value("width", "calc-size(any, size)"); 48 test_invalid_value("width", "calc-size(any, fit-content)"); 49 test_invalid_value("width", "calc-size(any, max-content)"); 50 test_invalid_value("width", "calc-size(any, min-content)"); 51 test_valid_value("width", "calc-size(10px, sign(size) * size)"); 52 test_invalid_value("width", "size"); 53 test_invalid_value("width", "sign(size)"); 54 test_invalid_value("width", "calc(50px * sign(size))"); 55 test_invalid_value("width", "calc-size(any, calc-size(10px, sign(size) * size))"); 56 test_invalid_value("width", "calc-size(any, calc-size(any, 10px))"); 57 test_invalid_value("width", "calc(calc-size(auto, size))"); 58 test_invalid_value("width", "calc(50px * sign(calc-size(auto, size)))"); 59 test_invalid_value("width", "calc(calc-size(auto, size) + calc-size(auto, size))"); 60 test_invalid_value("width", "calc(abs(calc-size(auto, size)))"); 61 test_invalid_value("width", "calc(100px * progress(calc-size(auto, size) from calc-size(auto, 0px) to calc-size(auto, size)))"); 62 test_invalid_value("width", "calc(100px * progress(calc-size(auto, size) from 0px to 100px))"); 63 test_invalid_value("width", "calc(100px * progress(50px from calc-size(auto, 0px) to calc-size(auto, size)))"); 64 test_invalid_value("width", "min(calc-size(auto, 0px), calc-size(auto, size))"); 65 test_invalid_value("width", "calc(min(calc-size(auto, 0px), calc-size(auto, size)))"); 66 test_invalid_value("width", "max(calc-size(auto, 0px), calc-size(auto, size))"); 67 test_invalid_value("width", "calc(max(calc-size(auto, 0px), calc-size(auto, size)))"); 68 test_invalid_value("width", "clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size))"); 69 test_invalid_value("width", "calc(clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size)))"); 70 test_invalid_value("width", "calc(cos(calc-size(auto, 0px)))"); 71 test_invalid_value("width", "calc(atan2(calc-size(auto, size), calc-size(auto, 50px)))"); 72 test_invalid_value("width", "calc(sqrt(calc-size(auto, 0px)))"); 73 test_invalid_value("width", "calc(hypot(calc-size(auto, size * 0.5), calc-size(auto, size)))"); 74 test_invalid_value("width", "calc(round(calc-size(auto, size * 0.5), calc-size(auto, size)))"); 75 test_invalid_value("width", "calc(round(calc-size(auto, size * 0.5)))"); 76 test_invalid_value("width", "calc(mod(calc-size(auto, size * 0.5), calc-size(auto, size)))"); 77 test_invalid_value("width", "calc(rem(calc-size(auto, size * 0.5), calc-size(auto, size)))"); 78 79 test_valid_value("width", "calc-size(30px, 25em)"); 80 test_valid_value("width", "calc-size(calc-size(any, 30px), 25em)"); 81 test_valid_value("width", "calc-size(calc-size(2in, 30px), 25em)", "calc-size(calc-size(192px, 30px), 25em)"); 82 test_valid_value("width", "calc-size(calc-size(min-content, 30px), 25em)"); 83 test_valid_value("width", "calc-size(calc-size(min-content, size), size)"); 84 85 test_invalid_value("height", "calc(12% + calc-size(any, 31%))"); 86 87 test_invalid_value("width", "calc-size(30px)"); 88 test_invalid_value("width", "calc-size(min(30px, 2em))"); 89 test_invalid_value("width", "calc-size(any)"); 90 test_invalid_value("width", "calc-size(calc-size(any, 30px))"); 91 test_invalid_value("width", "calc-size(size)"); 92 test_invalid_value("width", "calc-size(fit-content)"); 93 test_invalid_value("width", "calc-size(calc-size(fit-content, size * 2))"); 94 test_invalid_value("width", "calc-size(calc-size(30px))"); 95 96 test_valid_value("flex-basis", "calc-size(any, 50px)"); 97 test_valid_value("flex-basis", "calc-size(auto, size)"); 98 test_valid_value("flex-basis", "calc-size(min-content, size)"); 99 test_valid_value("flex-basis", "calc-size(max-content, size)"); 100 test_valid_value("flex-basis", "calc-size(fit-content, size)"); 101 test_valid_value("flex-basis", "calc-size(content, size)"); 102 103 test_invalid_value("width", "calc-size(content, size)"); 104 test_invalid_value("height", "calc-size(content, size)"); 105 test_invalid_value("max-width", "calc-size(content, size)"); 106 test_invalid_value("max-height", "calc-size(content, size)"); 107 test_invalid_value("min-width", "calc-size(content, size)"); 108 test_invalid_value("min-height", "calc-size(content, size)"); 109 110 test_valid_value("width", "calc-size(0px, 0px)"); 111 test_invalid_value("width", "calc-size(0, 0px)"); 112 test_invalid_value("width", "calc-size(0px, 0)"); 113 test_invalid_value("width", "calc-size(0, 0)"); 114 115 </script>