three-levels-of-orthogonal-flows.html (953B)
1 <!DOCTYPE html> 2 <title>Three levels of writing mode roots with text inside, no constraints</title> 3 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic" title="4. Intrinsic Size Determination"> 5 <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" title="7.3.1. Available Space in Orthogonal Flows"> 6 <link rel="match" href="reference/three-levels-of-orthogonal-flows.html"> 7 <p>The yellow box should be in the top right corner of the hotpink box.</p> 8 <div style="writing-mode:vertical-rl; width:30em; height:30em; background:hotpink;"> 9 <div style="writing-mode:horizontal-tb;"> 10 <div style="writing-mode:vertical-rl; background:yellow;"> 11 <div style="visibility:hidden;"> 12 Roses are red,<br> 13 violets are blue.<br> 14 All my base<br> 15 are belong to you.<br> 16 </div> 17 </div> 18 </div> 19 </div>