<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>