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             function testListbox(id)
  42             {
  43                 var element = document.getElementById(id);
  44                 var dropDownStyle = window.getComputedStyle(element.firstChild.nextSibling);
  45                 var paddingRight = dropDownStyle["padding-right"];
  46                 paddingRight = parseInt(paddingRight.substring(0, paddingRight.length - 2));
  47                 var paddingLeft = dropDownStyle["padding-left"];
  48                 paddingLeft = parseInt(paddingLeft.substring(0, paddingLeft.length - 2));
  49                 var padding = paddingRight + paddingLeft;
  50                 var emptyWidth = widthForEmptySelect(element.size);
  51                 var textWidth = widthForText(element.firstElementChild.textContent);
  52                 var dropdownWidth = element.getBoundingClientRect().width;
  53                 var expectedWidth = emptyWidth + textWidth + padding;
  54                 if (Math.abs(dropdownWidth - expectedWidth) <= 1)
  55                     testPassed('Width of ' + id + ' matches width of text plus width of empty ' + id + '.');
  56                 else
  57                     testFailed('Width ' + id + ' was ' + dropdownWidth + 'px wide, expected ' + expectedWidth + 'px (' + emptyWidth + 'px for empty ' + id + ' and ' + textWidth + 'px for text).');
  58             }
  59
  60             testListbox('list');
  61         </script>
  62     </body>
  63 </html>