Home | History | Annotate | Download | only in ManualTests 
      1 <style>
      2     select { display: block; font-size: 16px; }
      3     label { display: block; font: 13px "Lucida Grande"; }
      4     #reflection { font: 13px "Lucida Grande"; padding: 10px; width: 245px; }
      5 </style>
      6 
      7 <p>
      8     For each of the direction settings below, and for each item in the pop-up menu below, verify that
      9     the alignment and content match between the pop-up button, the menu item, and the value as it is
     10     reflected below the pop-up button, and that the checkmarks appear on the start side of the item.
     11 </p>
     12 
     13 <label><input type="radio" name="direction" value="ltr" checked onchange="directionChanged(event)"> Left to right</label>
     14 <label><input type="radio" name="direction" value="rtl" onchange="directionChanged(event)"> Right to left</label>
     15 
     16 <select id="menu">
     17     <option style="direction: ltr;">
     18         First  (03)  fifth
     19     </option>
     20     <option style="direction: rtl;">
     21         First  (03)  fifth
     22     </option>
     23     <option style="direction: ltr; unicode-bidi: bidi-override;">
     24         First  (03)  fifth
     25     </option>
     26     <option style="direction: rtl; unicode-bidi: bidi-override;">
     27         First  (03)  fifth
     28     </option>
     29     <option>
     30           
     31     </option>
     32     <option>
     33         'DD:) 'D91(J)
     34     </option>
     35     <option>
     36         Et volia&#x0300: ATSUI!
     37     </option>
     38     <option>
     39         Directional &#x202e;overrides&#x202c; are confusing.
     40     </option>
     41     <option>
     42         She said &ldquo;&#x202b; TNT !&#x202c;&rdquo; and ran off
     43     </option>
     44 </select>
     45 <div id="reflection">
     46     First  (03)  fifth
     47 </div>
     48 <script>
     49     var reflection = document.getElementById("reflection");
     50 
     51     document.getElementById("menu").onchange = function(event) {
     52         var option = event.target.item(event.target.selectedIndex);
     53         reflection.innerHTML = option.innerHTML;
     54         optionStyle = getComputedStyle(option);
     55         reflection.style.direction = optionStyle.direction;
     56         reflection.style.unicodeBidi = optionStyle.unicodeBidi;
     57         reflection.style.textAlign = getComputedStyle(event.target).direction === "ltr" ? "left" : "right";
     58     }
     59 
     60     function directionChanged(event)
     61     {
     62         document.getElementById('menu').style.direction = event.target.value;
     63         reflection.style.textAlign = event.target.value === "ltr" ? "left" : "right";
     64     }
     65 </script>
     66