| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| <head> |
| |
| <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-lr' writing-mode</title> |
| |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> |
| <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" /> |
| |
| <meta content="image should" name="flags" /> |
| <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-lr'." name="assert" /> |
| |
| <style type="text/css"><![CDATA[ |
| form |
| { |
| font-size: 18px; |
| writing-mode: vertical-lr; |
| } |
| |
| select |
| { |
| vertical-align: top; |
| } |
| ]]></style> |
| </head> |
| |
| <body> |
| |
| <form action=""> |
| <p><label>姓名 <input value="艾俐俐" size="10" /></label></p> |
| |
| <p><label>语言 <select size="1"><option>English</option> |
| <option>français</option> |
| <option>فارسی</option> |
| <option>中文</option> |
| <option>日本語</option></select></label></p> |
| </form> |
| |
| <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p> |
| |
| <p><img src="support/form-controls-vlr.png" width="188" height="228" alt="Image download support must be enabled" /> |
| <!-- |
| Long description of image: |
| Screenshot of vertical layout: the input element is laid lengthwise |
| from top to bottom and its content rendered in a vertical writing mode, |
| matching the label outside it. The drop-down selection control (located on |
| the input element's righthand side) slides out to the side (towards the |
| after edge of the block) rather than downward as it would in horizontal writing mode. |
| The Asian glyphs in the input element and in the drop-down selection |
| control are translated upright. |
| --> |
| </p> |
| |
| </body> |
| </html> |