third_party/WebKit/LayoutTests/fast/text/international/bdo-bidi-width-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8">
   5         <style>
   6             #test {
   7                 background: silver;
   8                 padding: 15px;
   9                 width: 30ex;
  10             }
  11             #test > div {
  12                 font-size: 3em;
  13                 background: white;
  14                 display: inline-block;
  15             }
  16             .highlight {
  17                 position: absolute;
  18                 border: 10px solid silver;
  19             }
  20
  21         </style>
  22     </head>
  23     <body>
  24         <section id="test">
  25             <div>ااااا<bdo>کبند</bdo></div><br><br>
  26             <div><bdo>کبند</bdo></div><br><br>
  27             <div><bdo>کبند کبند</bdo></div><br><br>
  28             <div>ااااا<bdo dir="ltr">کبند</bdo></div><br><br>
  29             <div>ااااا<bdo dir="rtl">کبند</bdo></div><br><br>
  30             <div>ااااا<bdo dir="auto">کبند</bdo></div>
  31         </section>
  32         <section>
  33             <p>
  34                 Tests handling of <code>bdo</code> tags. The white box
  35                 for each line above should fully contain the text and
  36                 characters should not be painted on top of other
  37                 characters.
  38             </p>
  39         </section>
  40         <script>
  41             function createHighlightRect(rect)
  42             {
  43                 var el = document.createElement('div');
  44                 el.className = 'highlight';
  45                 el.style.left = (rect.left - 10) + 'px';
  46                 el.style.top = (rect.top - 10) + 'px';
  47                 el.style.width = (rect.width + 5) + 'px';
  48                 el.style.height = (rect.height + 5) + 'px';
  49                 return el;
  50             }
  51             var testElements = document.getElementById('test').getElementsByTagName('div');
  52             for (var el, i = 0; el = testElements[i]; i++) {
  53                 var rect = el.getBoundingClientRect();
  54                 document.body.appendChild(createHighlightRect(rect));
  55             }
  56         </script>
  57     </body>
  58 </body>