src/third_party/WebKit/LayoutTests/fast/text/international/listbox-width-rtl.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             select, span { font: menu; }
   6         </style>
   7         <script src="../../../resources/js-test.js"></script>
   8     </head>
   9     <body>
  10         <p>
  11             Test that text directionality is taken into account when
  12             sizing list boxes.
  13         </p>
  14         <select id="dropdown">
  15             <option dir="rtl">&#x0627;&#x0628; &#x0627;&#x0628;</option>
  16         </select>
  17         <select id="list" size="5">
  18             <option dir="rtl">&#x0627;&#x0628; &#x0627;&#x0628;</option>
  19         </select>
  20         <script>
  21             function widthForEmptySelect(size)
  22             {
  23                 var selectElement = document.createElement('select');
  24                 selectElement.size = size;
  25                 document.body.appendChild(selectElement);
  26                 var selectWidth = selectElement.getBoundingClientRect().width;
  27                 document.body.removeChild(selectElement);
  28                 return selectWidth;
  29             }
  30
  31             function widthForText(str)
  32             {
  33                 var textElement = document.createElement('span');
  34                 textElement.appendChild(document.createTextNode(str));
  35                 document.body.appendChild(textElement);
  36                 var textWidth = textElement.getBoundingClientRect().width;
  37                 document.body.removeChild(textElement);
  38                 return textWidth;
  39             }
  40
  41             var optionPaddingStart = 3;
  42             var optionPaddingEnd = 2;
  43
  44             function testListbox(id)
  45             {
  46                 var element = document.getElementById(id);
  47                 var emptyWidth = widthForEmptySelect(element.size);
  48                 var textWidth = widthForText(element.firstElementChild.textContent);
  49                 var dropdownWidth = element.getBoundingClientRect().width;
  50                 var expectedWidth = emptyWidth + textWidth + optionPaddingStart + optionPaddingEnd;
  51                 if (Math.abs(dropdownWidth - expectedWidth) <= 1)
  52                     testPassed('Width of ' + id + ' matches width of text plus width of empty ' + id + '.');
  53                 else
  54                     testFailed('Width ' + id + ' was ' + dropdownWidth + 'px wide, expected ' + expectedWidth + 'px (' + emptyWidth + 'px for empty ' + id + ' and ' + textWidth + 'px for text).');
  55             }
  56
  57             testListbox('list');
  58         </script>
  59     </body>
  60 </html>