ManualTests/inline-input-marking.html

   1 <html>
   2 <head>
   3
   4 <style>
   5 .editing {
   6     border: 2px solid red;
   7     padding: 12px;
   8     font-size: 24px;
   9 }
  10 .inputtest {
  11     font-family:'Hiragino Kaku Gothic Std';
  12     border: 2px solid green;
  13 }
  14 </style>
  15
  16 <title>Inline Input Method Marking</title>
  17 </head>
  18 <body>
  19 <p>This tests that the underlining of the inline input hole does not obscure the glyphs.</p>
  20
  21 <ol>
  22 <li>Switch to Hirigana input method</li>
  23 <li>Type characters into each of the green blocks below</li>
  24 <li>As you do so, check that glyphs in the inline hole are clearly readable</li>
  25 </ol>
  26 <div contenteditable id="root" class="editing" style="width:400px;">
  27 9px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 9px;"><br></div>
  28 <br>12px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 12px;"><br></div>
  29 <br>24px Hiragino Kaku Gothic Std<div class="inputtest" style="font-size: 24px;"><br></div>
  30 </div>
  31
  32 <script>
  33 runEditingTest();
  34 </script>
  35
  36 </body>
  37 </html>
  38