1 files changed, 57 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-writing-modes-3_dev/xhtml1/form-controls-srl-004.xht b/tests/wpt/css-tests/css-writing-modes-3_dev/xhtml1/form-controls-srl-004.xht
new file mode 100644
index 00000000000..606f0f9bb3e
--- /dev/null
+++ b/tests/wpt/css-tests/css-writing-modes-3_dev/xhtml1/form-controls-srl-004.xht
@@ -0,0 +1,57 @@
+<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-rl' 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/#writing-mode" 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 'sideways-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      margin-left: 5em;
+      writing-mode: sideways-rl;
+    }
+
+  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-srl.png" width="180" height="185" 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 lefthand 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 rotated 90 degrees clockwise.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file