layout/reftests/writing-mode/1111944-1-list-marker-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <style>
   6 body {
   7   font-family: Arial, sans-serif;
   8   font-size: 16px;
   9   line-height: 24px;
  10 }
  11 .outer {
  12   display: inline-block;
  13   vertical-align: top;
  14   width: 380px;
  15   height: 180px;
  16   border: 1px solid blue;
  17   margin: 5px;
  18 }
  19 .ol {
  20   margin: 0 12px;
  21 }
  22 .m1 {
  23   display: inline-block;
  24   height: 40px;
  25   text-align: right;
  26 }
  27 .m2 {
  28   display: inline-block;
  29   height: 5em;
  30   text-align: right;
  31 }
  32 </style>
  33 </head>
  34 <body>
  35  Test for list item markers in vertical mode:
  36  <br>
  37  <div class="outer" style="writing-mode:vertical-lr;text-orientation:sideways-right">
  38   Mode vertical-lr, style lower-roman:
  39   <div class="ol">
  40    <span class="m1">i.&nbsp;</span>one<br>
  41    <span class="m1">ii.&nbsp;</span>two<br>
  42    <span class="m1">iii.&nbsp;</span>three<br>
  43    <span class="m1">iv.&nbsp;</span>four<br>
  44    <span class="m1">v.&nbsp;</span>five<br>
  45    <span class="m1">vi.&nbsp;</span>six<br>
  46    <span class="m1">vii.&nbsp;</span>seven<br>
  47    <span class="m1">viii.&nbsp;</span>eight<br>
  48    <span class="m1">ix.&nbsp;</span>nine<br>
  49    <span class="m1">x.&nbsp;</span>ten<br>
  50    <span class="m1">xi.&nbsp;</span>eleven<br>
  51    <span class="m1">xii.&nbsp;</span>twelve<br>
  52   </div>
  53  </div>
  54  <div class="outer" style="writing-mode:vertical-rl;text-orientation:sideways-right">
  55   Mode vertical-rl, style hebrew:
  56   <div class="ol">
  57    <span class="m1">א.&nbsp;</span>one<br>
  58    <span class="m1">ב.&nbsp;</span>two<br>
  59    <span class="m1">ג.&nbsp;</span>three<br>
  60    <span class="m1">ד.&nbsp;</span>four<br>
  61    <span class="m1">ה.&nbsp;</span>five<br>
  62    <span class="m1">ו.&nbsp;</span>six<br>
  63    <span class="m1">ז.&nbsp;</span>seven<br>
  64    <span class="m1">ח.&nbsp;</span>eight<br>
  65    <span class="m1">ט.&nbsp;</span>nine<br>
  66    <span class="m1">י.&nbsp;</span>ten<br>
  67    <span class="m1">יא.&nbsp;</span>eleven<br>
  68    <span class="m1">יב.&nbsp;</span>twelve<br>
  69   </div>
  70  </div>
  71  <br>
  72  <div class="outer" style="writing-mode:vertical-lr">
  73   Mode vertical-lr, style trad-chinese-formal:
  74   <div class="ol">
  75    <span class="m2">壹、</span>one<br>
  76    <span class="m2">貳、</span>two<br>
  77    <span class="m2">參、</span>three<br>
  78    <span class="m2">肆、</span>four<br>
  79    <span class="m2">伍、</span>five<br>
  80    <span class="m2">陸、</span>six<br>
  81    <span class="m2">柒、</span>seven<br>
  82    <span class="m2">捌、</span>eight<br>
  83    <span class="m2">玖、</span>nine<br>
  84    <span class="m2">壹拾、</span>ten<br>
  85    <span class="m2">壹拾壹、</span>eleven<br>
  86    <span class="m2">壹拾貳、</span>twelve<br>
  87   </div>
  88  </div>
  89  <div class="outer" style="writing-mode:vertical-rl">
  90   Mode vertical-rl, style japanese-informal:
  91   <div class="ol">
  92    <span class="m2">一、</span>one<br>
  93    <span class="m2">二、</span>two<br>
  94    <span class="m2">三、</span>three<br>
  95    <span class="m2">四、</span>four<br>
  96    <span class="m2">五、</span>five<br>
  97    <span class="m2">六、</span>six<br>
  98    <span class="m2">七、</span>seven<br>
  99    <span class="m2">八、</span>eight<br>
 100    <span class="m2">九、</span>nine<br>
 101    <span class="m2">十、</span>ten<br>
 102    <span class="m2">十一、</span>eleven<br>
 103    <span class="m2">十二、</span>twelve<br>
 104   </div>
 105  </div>
 106 </body>
 107 </html>