inline-input-marking.html 957 B

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