flexbox-writing-mode-srl-row-mix-ref.html (2285B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <meta charset="utf-8"> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 <style> 13 .container { 14 display: flex; 15 align-items: end; 16 float: left; 17 border: 2px solid purple; 18 padding: 2px; 19 margin-bottom: 2em; 20 height: 500px; 21 width: 150px; 22 } 23 24 span { 25 display: block; 26 background: lightgrey; 27 border: 2px solid black; 28 margin: 11px 13px 17px 7px; 29 inline-size: 6px; 30 } 31 32 .small { font: 12px Ahem; } 33 .big { font: 20px Ahem; } 34 35 .hl { writing-mode: horizontal-tb; direction: ltr; } 36 .hr { writing-mode: horizontal-tb; direction: rtl; } 37 .sl { writing-mode: sideways-lr; direction: ltr; } 38 .sr { writing-mode: sideways-rl; direction: ltr; } 39 .sl_rtl { writing-mode: sideways-lr; direction: rtl; } 40 .sr_rtl { writing-mode: sideways-rl; direction: rtl; } 41 </style> 42 </head> 43 <body> 44 45 <div class="container" style="flex-flow: column"> 46 <span class="hl small">p b c</span> 47 <span class="hl big">p e</span> 48 <span class="hr small">p b c</span> 49 <span class="hr big">p e</span> 50 <span class="sl small">p b c</span> 51 <span class="sl big">p e</span> 52 </div> 53 <div class="container" style="flex-flow: column"> 54 <span class="sr small">p b c</span> 55 <span class="sr big">p e</span> 56 <span class="sl_rtl small">p b c</span> 57 <span class="sl_rtl big">p e</span> 58 <span class="sr_rtl small">p b c</span> 59 <span class="sr_rtl big">p e</span> 60 </div> 61 62 <div class="container" style="flex-flow: column-reverse"> 63 <span class="hl small">p b c</span> 64 <span class="hl big">p e</span> 65 <span class="hr small">p b c</span> 66 <span class="hr big">p e</span> 67 <span class="sl small">p b c</span> 68 <span class="sl big">p e</span> 69 </div> 70 <div class="container" style="flex-flow: column-reverse"> 71 <span class="sr small">p b c</span> 72 <span class="sr big">p e</span> 73 <span class="sl_rtl small">p b c</span> 74 <span class="sl_rtl big">p e</span> 75 <span class="sr_rtl small">p b c</span> 76 <span class="sr_rtl big">p e</span> 77 </div> 78 </body> 79 </html>