chromium/src/third_party/blink/web_tests/external/wpt/css/css-writing-modes/form-controls-vlr-004.xht - manifest_repos/chromium_src - Git at Google

 <!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>
	<!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>