layout/reftests/writing-mode/1395926-vertical-upright-gpos-1-ref.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 @font-face { font-family: Charis; src: url(../fonts/sil/CharisSIL-R.ttf); }
   5 div { writing-mode: vertical-rl; text-orientation: upright; }
   6 p { position: absolute; top: 50px; }
   7 .times { font: 36px Times New Roman, DejaVu Serif, serif; letter-spacing: .25em; left: 50px; }
   8 .arial { font: 36px Arial, DejaVu Sans, sans-serif; letter-spacing: .25em; left: 150px; }
   9 .charis { font: 36px Charis, serif; letter-spacing: .25em; left: 250px; }
  10 .overlay { color: transparent; background: green; }
  11 </style>
  12
  13 Red diacritics should <i>not</i> extend beyond the green boxes:
  14
  15 <div>
  16 <p class="times overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
  17 <p class="arial overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
  18 <p class="charis overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
  19 </div>