calc-size-interpolation-expansion.html (4375B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>height: calc-size() animations</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 9 #parent { 10 height: 200px; 11 } 12 13 #test { 14 } 15 16 </style> 17 18 <div id="parent"> 19 <div id="test"> 20 </div> 21 </div> 22 23 <script> 24 25 /** 26 * This test tests the expansions needed to support interpolation of 27 * calc-size() values. These cannot be tested through getComputedStyle 28 * so (as far as I can tell) the only web-exposed way to test them is 29 * through getComputedStyleMap. 30 * 31 * However, it's also likely that some of the details tested here are 32 * not fully specified. Once we have multiple implementations that 33 * implement all of the necessary features for this test, we should 34 * probably look at improving that interoperability. 35 */ 36 37 var TESTS = [ 38 { 39 property: "height", 40 start: "auto", 41 end: "calc-size(any, 0px)", 42 expected: { 43 0.75: "calc-size(auto, 0px + (0.25 * size))", 44 }, 45 }, 46 { 47 property: "height", 48 start: "0px", 49 end: "calc-size(calc-size(min-content, size + 20px), 2 * size)", 50 expected: { 51 0.75: "calc-size(calc-size(min-content, 20px + size), 0px + (1.5 * size))", 52 }, 53 }, 54 { 55 property: "height", 56 start: "calc-size(min-content, size * 4)", 57 end: "calc-size(calc-size(min-content, size + 20px), 2 * size)", 58 expected: { 59 0.75: "calc-size(min-content, size + (1.5 * (20px + size)))", 60 }, 61 }, 62 { 63 property: "width", 64 start: "calc-size(fit-content, 20px)", 65 end: "calc-size(calc-size(fit-content, 40px), size)", 66 expected: { 67 0.75: "calc-size(fit-content, 35px)", 68 }, 69 }, 70 { 71 // Check that we do expansion on one basis even when the other basis is 'any'. 72 property: "width", 73 start: "calc-size(any, 20px)", 74 end: "calc-size(calc-size(fit-content, 40px), size)", 75 expected: { 76 0.75: "calc-size(fit-content, 35px)", 77 }, 78 }, 79 { 80 property: "width", 81 start: "calc-size(calc-size(any, 30px), 20px)", 82 end: "calc-size(calc-size(fit-content, 40px), size)", 83 expected: { 84 0.75: "calc-size(fit-content, 35px)", 85 }, 86 }, 87 { 88 property: "width", 89 start: "calc-size(fit-content, 20px)", 90 end: "calc-size(calc-size(fit-content, 3 * size + 10px), min(size + 20px, 2 * size - 30px) + ((2 * size) + 80px))", 91 expected: { 92 0.75: "calc-size(fit-content, 5px + min(30px + (3 * size), 30px + (2 * 0.75 * (3 * size + 10px)) + (0.75 * 2 * (10px + (3 * size)))))", 93 0.75: "calc-size(fit-content, 5px + (0.75 * (80px + min(30px + (3 * size), -30px + (2 * (10px + (3 * size)))) + (2 * (10px + (3 * size))))))", 94 }, 95 }, 96 { 97 property: "width", 98 start: "calc-size(50%, size)", 99 end: "calc-size(calc-size(45%, (2 * size)), size + 20px)", 100 expected: { 101 0.75: "calc-size(100%, (0.125 * size) + (0.75 * (20px + (0.9 * size))))", 102 }, 103 }, 104 { 105 property: "width", 106 start: "calc-size(40%, size)", 107 end: "calc-size(calc-size(10px, (2 * size)), size + 20px)", 108 expected: { 109 0.75: "calc-size(100%, 30px + (0.1 * size))", 110 }, 111 }, 112 { 113 property: "width", 114 start: "calc-size(80px, size)", 115 end: "calc-size(calc-size(10px, (2 * size)), size + 20px)", 116 expected: { 117 0.75: "calc-size(any, 50px)", 118 }, 119 }, 120 { 121 property: "width", 122 start: "calc-size(80px, size)", 123 end: "calc-size(calc-size(any, 20px), size + 20px)", 124 expected: { 125 0.75: "calc-size(any, 50px)", 126 }, 127 }, 128 ]; 129 130 let e = document.getElementById("test"); 131 for (let test_item of TESTS) { 132 for (let progress in test_item.expected) { 133 test((t) => { 134 let expected_value = test_item.expected[progress]; 135 let property = test_item.property; 136 e.style[property] = test_item.start; 137 let discard = e.computedStyleMap().get(property).toString(); 138 e.style.transition = "all 1.0s linear"; 139 e.style.transitionProperty = property; 140 e.style.transitionDelay = `${-progress}s`; 141 e.style[property] = test_item.end; 142 let actual_value = e.computedStyleMap().get(property).toString(); 143 e.style.transition = ""; 144 assert_equals(actual_value, expected_value); 145 }, `value at progress ${progress} in animation of "${test_item.property}" from "${test_item.start}" to "${test_item.end}"`); 146 } 147 } 148 149 </script>