available-size-017.html (1404B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Testing Available Space in Orthogonal Flows / height + min-height parent</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto"> 6 <link rel="match" href="reference/available-size-002-ref.html"> 7 <meta name="assert" content="When an orthogonal flow's parent has a height and a min-height larger than the height, use min-height as the available size."> 8 <style> 9 body > div { 10 font-family: monospace; /* to be able to reliably measure things in ch*/ 11 font-size: 20px; 12 height: 4ch; 13 min-height: 8ch; 14 color: transparent; 15 position: relative; /* to act as a container of #green */ 16 } 17 18 div > div { writing-mode: vertical-rl; } 19 20 span { 21 background: green; 22 display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/ 23 } 24 25 #red { 26 position: absolute; 27 background: red; 28 left: 0; 29 writing-mode: vertical-rl; 30 z-index: -1; 31 } 32 </style> 33 34 <p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>. 35 36 <div> 37 <aside id="red">0</aside> 38 <div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from 39 the min-height of its parent (which it should) 40 it should wrap just right for the green 0 to 41 overlap with the red one. --> 42 </div>