intrinsic-percent-non-replaced-003.html (1826B)
1 <!DOCTYPE html> 2 <title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> 3 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> 4 <link rel="match" href="intrinsic-percent-non-replaced-002-ref.html"> 5 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 /* establish context */ 9 .container { 10 clear: both; 11 padding: 10px; 12 color: blue; 13 font: 20px/1 Ahem; 14 } 15 .zero { 16 width: 0; 17 } 18 .infinite { 19 width: 400px; /* close enough */ 20 } 21 22 /* visualize size contribution */ 23 .container > div { 24 float: left; 25 border: solid orange 20px; 26 border-style: none solid; 27 } 28 .container > div > div { 29 border-right: solid 20px aqua; 30 } 31 32 /* test width */ 33 /* content = 100% = 80px = 4ch + border */ 34 /* choose sizes that are different than content to see if how they take effect */ 35 .raw-percent { 36 width: 50%; 37 } 38 .calc-percent { 39 width: calc(40px + 0%); 40 } 41 .no-percent { 42 width: 40px; 43 } 44 </style> 45 46 <!-- calculating min-content widths --> 47 <div class='zero container'> 48 <div><div class="control">ppp pp</div></div> 49 </div> 50 <div class='zero container'> 51 <div><div class="raw-percent">ppp pp</div></div> 52 </div> 53 <div class='zero container'> 54 <div><div class="calc-percent">ppp pp</div></div> 55 </div> 56 <div class='zero container'> 57 <div><div class="no-percent">ppp pp</div></div> 58 </div> 59 60 <!-- calculating max-content widths --> 61 <div class='infinite container'> 62 <div><div class="control">p p</div></div> 63 </div> 64 <div class='infinite container'> 65 <div><div class="raw-percent">p p</div></div> 66 </div> 67 <div class='infinite container'> 68 <div><div class="calc-percent">p p</div></div> 69 </div> 70 <div class='infinite container'> 71 <div><div class="no-percent">p p</div></div> 72 </div>