1152941-1-orthogonal-blocksize-overflow.html (1611B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html { 7 -webkit-writing-mode: vertical-rl; 8 writing-mode: vertical-rl; 9 font: 16px/24px monospace; 10 padding: 20px; 11 } 12 body { 13 width: 40em; 14 height: 25em; 15 } 16 blockquote { 17 -webkit-writing-mode: horizontal-tb; 18 writing-mode: horizontal-tb; 19 width: 20em; 20 color: transparent; 21 } 22 </style> 23 </head> 24 25 <body> 26 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla quam, 27 eu ultricies augue.</p> 28 29 <blockquote> 30 <!-- The (invisible) text in the orthogonal block should NOT make following 31 content vanish if it overflows the <body>'s height! --> 32 <p>Ut accumsan dui eu elit dapibus rutrum. Nunc tristique urna eget ex dictum 33 placerat. Nunc venenatis enim sed odio iaculis, consequat consectetur sem 34 elementum.</p> 35 36 <p>Fusce eros eros, eleifend eget eros at, convallis tempor tortor. Cras 37 at gravida leo. Proin ultricies ipsum vitae felis suscipit, a tincidunt orci 38 mattis. Cras in suscipit mauris.</p> 39 40 <p>Etiam eu pellentesque nisi. Quisque 41 ullamcorper dui odio, eu feugiat nunc interdum vitae. Morbi egestas dolor a 42 nulla pellentesque, faucibus tincidunt diam facilisis. Suspendisse at urna 43 varius, pellentesque nibh non, venenatis ante.</p> 44 45 <p>Nullam aliquet orci vel dui 46 dapibus, nec facilisis enim interdum. Morbi condimentum venenatis commodo. Sed 47 viverra diam nec lacinia congue. Etiam ultrices luctus volutpat.</p> 48 </blockquote> 49 50 <p>Maecenas nec ornare ligula. Phasellus eleifend 51 elit leo, nec vestibulum sapien consectetur quis.</p> 52 </body> 53 </html>