layout/reftests/writing-mode/1193519-sideways-lr-2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset=utf-8>
   5 <style>
   6 div { padding: 5px; display: inline-block; }
   7 .vlr { writing-mode: vertical-lr; text-orientation: sideways; }
   8 .vrl { writing-mode: vertical-rl; text-orientation: sideways; }
   9 .slr { writing-mode: sideways-lr; }
  10 .srl { writing-mode: sideways-rl; }
  11 span { display: inline-block; block-size: 2em; vertical-align: middle; }
  12 span:nth-child(1) { background: red;    inline-size: 1em; }
  13 span:nth-child(2) { background: orange; inline-size: 1.1em; }
  14 span:nth-child(3) { background: yellow; inline-size: 1.3em; }
  15 span:nth-child(4) { background: green;  inline-size: 1.5em; }
  16 span:nth-child(5) { background: blue;   inline-size: 1.7em; }
  17 span:nth-child(6) { background: indigo; inline-size: 1.9em; }
  18 span:nth-child(7) { background: violet; inline-size: 2em; }
  19 </style>
  20 </head>
  21
  22 <body>
  23
  24 <p>All four columns should look the same:
  25 <div dir=rtl class="vrl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  26 <div dir=rtl class="vlr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  27 <div dir=rtl class="srl"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  28 <div dir=ltr class="slr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>