mirror of
https://github.com/servo/servo.git
synced 2025-06-24 09:04:33 +01:00
58 lines
No EOL
2 KiB
HTML
58 lines
No EOL
2 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>CSS Writing Modes Test: form controls in 'vertical-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="should" name="flags">
|
|
<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-rl' 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 right to left." name="assert">
|
|
|
|
<style type="text/css">
|
|
form
|
|
{
|
|
font-size: 1.25em;
|
|
height: auto;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
form > p { margin-right: 1em; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<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>
|
|
|
|
<form action="">
|
|
|
|
<p><button type="submit">Text sample10</button></p>
|
|
|
|
<p><button type="button">Text sample9</button></p>
|
|
|
|
<p><input type="reset" value="Text sample8"></p>
|
|
|
|
<p><input type="submit" value="Text sample7"></p>
|
|
|
|
<p><input type="button" value="Text sample6"></p>
|
|
|
|
<p><textarea cols="12" rows="2">Text sample5</textarea></p>
|
|
|
|
<p>
|
|
<select size="3">
|
|
<optgroup label="Text sample4">
|
|
<option>Text sample3</option>
|
|
<option>Text sample2</option>
|
|
</optgroup>
|
|
</select>
|
|
</p>
|
|
|
|
<p><input value="Text sample1" size="12"></p>
|
|
</form>
|
|
|
|
</body>
|
|
</html> |