third_party/WebKit/LayoutTests/fast/text/international/shape-across-elements.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8">
   5         <title>Shape across element boundary test</title>
   6         <script src="../../../resources/js-test.js"></script>
   7         <style>
   8             section { padding-left: 1rem; }
   9             section > div {
  10                 display: inline-block;
  11                 font-size: 1.5rem;
  12                 width: 5rem;
  13                 vertical-align: middle;
  14             }
  15             section > span {
  16                 display: inline-block;
  17                 width: 25rem;
  18                 vertical-align: middle;
  19             }
  20         </style>
  21     </head>
  22     <body>
  23         <h1>Shape across element boundary test</h1>
  24         <section>
  25             <div><span  id="expected">سلام</span></div>
  26             The word by itself.
  27         </section>
  28         <section>
  29             <div><span id="split">س<span id="red" style="color: red">ل</span>ام</span></div>
  30             <span>
  31                 Adding a span around a character that forms a ligature.
  32                 Should render the same as the above, except that half
  33                 of the middle glyph should be red.
  34             </span>
  35         </section>
  36         <section>
  37             <div>سل‍ام</div>
  38             Same word with a ZWJ character to disallow the ligature.
  39         </section>
  40         <section>
  41             <div><span id="isolated" style="color: red;">ل</span></div>
  42             The letter in red, in isolation.
  43         </section>
  44         <script>
  45             function width(id)
  46             {
  47                 var el = document.getElementById(id);
  48                 return el.getBoundingClientRect().width;
  49             }
  50
  51             if (Math.abs(width('split') - width('expected')) > 0.1) {
  52                 testFailed('Width of isolated word should match width of' +
  53                     ' word with markup.');
  54             } else {
  55                 testPassed('Width of isolated word does match width of' +
  56                     ' word with markup.');
  57             }
  58
  59             if (Math.abs(width('red') - width('isolated')) < 0.1) {
  60                 testFailed('Width of partial glyph in ligature should not' +
  61                     ' match width of isolated glyph.');
  62             } else {
  63                 testPassed('Width of partial glyph in ligature does not' +
  64                     ' match width of isolated glyph.');
  65             }
  66         </script>
  67     </body>
  68 <html>
  69
  70