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