<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ibooks="http://apple.com/ibooks/html-extensions" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<style>
.decorate::first-line { text-decoration:underline }
</style>
</head>
<body style="overflow:hidden">
<p>Test to make sure that the decoration line paints properly underneath the subscript.
</p>

<p class="decorate" style="-webkit-writing-mode:vertical-lr; margin-right:10px; font-size:24px; float:left;-webkit-text-underline-position:under; border:1px dotted orange">
The first line <span style="vertical-align:-20px">has a decoration,</span> but not <img style="vertical-align:-100px; height:20px;width:20px;background-color:lime"> under the image.<br>
The second line should not.
</p>

<p class="decorate" style="-webkit-writing-mode:vertical-rl; margin-right:10px; font-size:24px; float:left;-webkit-text-underline-position:under; border:1px dotted orange">
The first line <span style="vertical-align:-20px">has a decoration,</span> but not <img style="vertical-align:-100px; height:20px;width:20px;background-color:lime"> under the image.<br>
The second line should not.
</p>