intrinsic-percent-non-replaced-006.html (1980B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Cyclic percentages in min-width and min-height</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10969"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 8 <style> 9 #outer { 10 display: inline-block; 11 border: 5px solid; 12 padding: 3px; 13 } 14 #inner { 15 min-width: calc(100px + 50%); 16 min-height: calc(100px + 50%); 17 border: 2px solid cyan; 18 } 19 </style> 20 21 <div id="outer"> 22 <div id="inner"></div> 23 </div> 24 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script> 28 const innerBorder = 4; 29 const outerPadding = 6; 30 const bp = innerBorder + outerPadding; 31 32 // Intrinsic contributions should treat cyclic percentages equally in both axes. 33 test( 34 () => assert_equals(outer.clientWidth, outer.clientHeight), 35 "Axis consistency of intrinsic contributions", 36 ); 37 38 // The spec says that the intrinsic size contributions should resolve cyclic percentages 39 // in min size properties against zero, so here we should expect 110px. 40 // However, most browsers just ignore the mininum in that case, resulting in 10px. 41 // See https://github.com/w3c/csswg-drafts/issues/10969 42 test( 43 () => assert_in_array(outer.clientWidth, [0 + bp, 100 + bp]), 44 "Intrinsic contribution for width", 45 ); 46 test( 47 () => assert_in_array(outer.clientHeight, [0 + bp, 100 + bp]), 48 "Intrinsic contribution for height", 49 ); 50 51 // Regardless of how browsers treat cyclic percentages, once the size of #outer is known, 52 // #inner should re-resolve its inline-axis percentage against the containing block, 53 // but not re-resolve its block-axis percentage. 54 test( 55 () => assert_equals(inner.clientWidth, 100 + 0.5 * (outer.clientWidth - outerPadding)), 56 "Final size for width", 57 ); 58 test( 59 () => assert_equals(inner.clientHeight, outer.clientHeight - bp), 60 "Final size for height", 61 ); 62 </script>