third_party/WebKit/LayoutTests/fast/text/international/pop-up-button-text-alignment-and-direction.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5 <style>
   6    select { display: block; font-size: 16px; }
   7    .reflection { font: 13px "Lucida Grande"; padding: 10px; width: 245px; }
   8 </style>
   9 </head>
  10 <body>
  11 <p>
  12     Verify that the alignment and writing direction of each selected item matches
  13     the one below the pop-up button.
  14 </p>
  15
  16 <div id="left-aligned">
  17     <select class="menu" style="width:500px">
  18         <option style="direction: ltr;">
  19             First שניה (03) רביעית fifth
  20         </option>
  21         <option style="direction: rtl;">
  22             First שניה (03) רביעית fifth
  23         </option>
  24         <option style="direction: ltr; unicode-bidi: bidi-override;">
  25             First שניה (03) רביעית fifth
  26         </option>
  27         <option style="direction: rtl; unicode-bidi: bidi-override;">
  28             First שניה (03) רביעית fifth
  29         </option>
  30     </select>
  31     <div class="reflection" style="direction:ltr; width:450px">
  32             First שניה (03) רביעית fifth
  33     </div>
  34 </div>
  35
  36 <script>
  37     // Clone 3 left-aligned <select>.
  38     var select = document.getElementsByClassName("menu")[0];
  39     var div = document.getElementsByClassName("reflection")[0];
  40     for (var i = 1; i < 4; ++i) {
  41         var clonedSelect = select.cloneNode(true);
  42         var clonedDiv = div.cloneNode(true);
  43         var optionStyle = getComputedStyle(select.options[i]);
  44         clonedDiv.style.direction = optionStyle.direction;
  45         clonedDiv.style.unicodeBidi = optionStyle.unicodeBidi;
  46         clonedDiv.style.textAlign = "left";
  47         document.getElementById("left-aligned").appendChild(clonedSelect);
  48         document.getElementById("left-aligned").appendChild(clonedDiv);
  49     }
  50
  51     // Clone 4 right-aligned <select>.
  52     var cloned = document.getElementById("left-aligned").cloneNode(true);
  53     for (var child = cloned.firstChild; child; child = child.nextSibling) {
  54         if (child.tagName == "SELECT")
  55             child.style.direction = "rtl";
  56         if (child.tagName == "DIV")
  57             child.style.textAlign = "right";
  58     }
  59     cloned.setAttribute("id", "right-aligned");
  60     document.body.appendChild(cloned);
  61
  62     var selectElements = document.getElementsByClassName("menu");
  63     for (var i = 0; i < selectElements.length; ++i) {
  64         document.body.offsetTop; // Force layout
  65         selectElements[i].selectedIndex = i % 4;
  66     }
  67 </script>
  68 </body>