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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>

<style>
@font-face { font-family: Charis; src: url(../fonts/sil/CharisSIL-R.ttf); }
div { writing-mode: vertical-rl; text-orientation: upright; }
p { position: absolute; top: 50px; color: red; }
.times { font: 36px Times New Roman, DejaVu Serif, serif; letter-spacing: .25em; left: 50px; }
.arial { font: 36px Arial, DejaVu Sans, sans-serif; letter-spacing: .25em; left: 150px; }
.charis { font: 36px Charis, serif; letter-spacing: .25em; left: 250px; }
.overlay { color: transparent; background: green; }
</style>

Red diacritics should <i>not</i> extend beyond the green boxes:

<div>
<p class="times">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
<p class="times overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
<p class="arial">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
<p class="arial overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
<p class="charis">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
<p class="charis overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
</div>