<html> 
<head>

<style>
.editing { 
    border: 2px solid red; 
    padding: 12px; 
    font-size: 24px; 
}
.inputtest {
    font-family:'Hiragino Kaku Gothic Std';
    border: 2px solid green; 
}
</style>

<title>Inline Input Method Marking</title> 
</head> 
<body>
<p>This tests that the underlining of the inline input hole does not obscure the glyphs.</p>

<ol>
<li>Switch to Hirigana input method</li>
<li>Type characters into each of the green blocks below</li>
<li>As you do so, check that glyphs in the inline hole are clearly readable</li>
</ol>
<div contenteditable id="root" class="editing" style="width:400px;">
9px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 9px;"><br></div>
<br>12px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 12px;"><br></div>
<br>24px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 24px;"><br></div>
</div>

<script>
runEditingTest();
</script>

</body>
</html>