Home | History | Annotate | Download | only in resources 
      1 <head>
      2     <meta name="content-type" content="text/html; charset=UTF-8">
      3     <style>
      4         body { margin-top: 0; }
      5         select { display: block; font-size: 13px; }
      6         div#reference { font: 13px 'Lucida Grande'; text-align: center; height: 24px; }
      7     </style>
      8     <script>
      9         function setTitle(text)
     10         {
     11             document.title = text;
     12             document.getElementById("reference").innerHTML = text;
     13         }
     14     </script>
     15 </head>
     16 <body>
     17 <div id="reference"></div>
     18 <p>
     19     This tests drawing bidirectional text in Windows Safari chrome.
     20 </p>
     21 <p>
     22     Select each item from the list and verify that the window title is
     23     rendered exactly like the selected item.
     24     Pay attention to the ordering of
     25     the characters, the direction of parentheses, diacritics and combining marks,
     26     and shaping of Arabic letters. You can ignore small differences in the overall width
     27     of the text.
     28     For your convenience, the
     29     text to match will be displayed at the top of the window.
     30 </p>
     31 <select onchange="setTitle(item(selectedIndex).innerText)" size="9">
     32     <option>
     33         First  (03)  fifth
     34     </option>
     35     <option>
     36         &#x202b;First  (03)  fifth&#x202c;
     37     </option>
     38     <option>
     39         &#x202d;First  (03)  fifth&#x202c;
     40     </option>
     41     <option>
     42         &#x202e;First  (03)  fifth&#x202c;
     43     </option>
     44     <option>
     45       
     46     </option>
     47     <option>
     48          
     49     </option>
     50     <option>
     51         Et volia&#x0300: ATSUI!
     52     </option>
     53     <option>
     54         Directional &#x202e;overrides&#x202c; are confusing.
     55     </option>
     56     <option>
     57         She said &ldquo;&#x202b; TNT !&#x202c;&rdquo; and ran off
     58     </option>
     59 </select>
     60 </body>
     61 </html>
     62