| <!DOCTYPE html> |
| <title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> |
| <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> |
| <link rel="match" href="intrinsic-percent-non-replaced-004-ref.html"> |
| |
| <style> |
| /* establish context */ |
| .container { |
| clear: both; |
| padding: 10px; |
| width: 0; |
| } |
| |
| span { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| background-color: blue; |
| } |
| |
| /* visualize size contribution */ |
| .container > div { |
| float: left; |
| border: solid orange 20px; |
| border-style: none solid; |
| } |
| .container > div > div { |
| border-right: solid 20px aqua; |
| writing-mode: vertical-rl; |
| width: 40px; |
| height: 20px; |
| } |
| |
| /* test width */ |
| /* content = 100% = 60px = 40px + border */ |
| /* choose sizes that are different than content to see if how they take effect */ |
| .raw-percent { |
| min-width: 200%; |
| } |
| .calc-percent { |
| min-width: calc(160px + 0%); |
| } |
| .no-percent { |
| min-width: 160px; |
| } |
| </style> |
| |
| <!-- calculating min-content widths --> |
| <div class='container'> |
| <div><div class="control"><span></span></div></div> |
| </div> |
| <div class='container'> |
| <div><div class="raw-percent"><span></span></div></div> |
| </div> |
| <div class='container'> |
| <div><div class="calc-percent"><span></span></div></div> |
| </div> |
| <div class='container'> |
| <div><div class="no-percent"><span></span></div></div> |
| </div> |
