testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4
   5  <head>
   6
   7   <title>CSS Writing Modes Test: form controls in 'vertical-lr' writing-mode</title>
   8
   9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  10
  11   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
  12
  13   <meta content="should" name="flags" />
  14   <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from left to right." name="assert" />
  15
  16   <style type="text/css"><![CDATA[
  17   form
  18     {
  19       font-size: 1.25em;
  20       writing-mode: vertical-lr;
  21     }
  22   ]]></style>
  23  </head>
  24
  25  <body>
  26
  27   <p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
  28
  29   <form action="">
  30
  31     <p><input value="Text sample1" size="12" /></p>
  32
  33     <p>
  34       <select size="3">
  35         <optgroup label="Text sample2">
  36           <option>Text sample3</option>
  37           <option>Text sample4</option>
  38         </optgroup>
  39       </select>
  40     </p>
  41
  42     <p><textarea cols="12" rows="2">Text sample5</textarea></p>
  43
  44     <p><input type="button" value="Text sample6" /></p>
  45
  46     <p><input type="submit" value="Text sample7" /></p>
  47
  48     <p><input type="reset" value="Text sample8" /></p>
  49
  50     <p><button type="button">Text sample9</button></p>
  51
  52     <p><button type="submit">Text sample10</button></p>
  53
  54   </form>
  55
  56  </body>
  57 </html>