testing/web-platform/tests/css/css-writing-modes/block-flow-direction-htb-001.xht


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!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: horizontal-tb - block flow direction of block-level boxes</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" />
  <link rel="match" href="block-flow-direction-001-ref.xht" />

  <meta content="ahem" name="flags" />
  <meta content="This test checks that block-level boxes in a 'horizontal-tb' writing mode are laid out one after the other, vertically, with the first beginning at the top of a containing block; they are ordered from top to bottom meaning that the 1st block box is the topmost one, then the 2nd block is juxtaposed at its bottom, then the 3rd block is juxtaposed to the 2nd block at its bottom, etc..." name="assert" />

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  <style type="text/css"><![CDATA[
  html
    {
      writing-mode: horizontal-tb;
    }
  /*
  "
  The principal writing mode of the document is determined by the writing-mode
  and direction values specified on the root element.
  "
  */

  body
    {
      color: yellow;
      font: 20px/1 Ahem;
      width: 21em;
    }

  div
    {
      background-color: blue;
      border-left: blue solid 1em;
      border-right: blue solid 1em;
    }

  div#top-border
    {
      border-top: blue solid 1em;
    }

  div#bottom-border
    {
      border-bottom: blue solid 1em;
    }
  ]]></style>
 </head>

 <body>

  <!-- topmost line --><div id="top-border">AAAA BBBB CCCC DDDD</div>

  <!-- 2nd topmost line --><div>E&nbsp; F G&nbsp; H J&nbsp;&nbsp;&nbsp; L&nbsp;&nbsp; </div>

  <!-- 3rd topmost line --><div>M&nbsp; N Q&nbsp; R S&nbsp;&nbsp;&nbsp; T&nbsp;&nbsp; </div>

  <!-- 4th topmost line --><div>UUUU VVVV WWWW XXXX</div>

  <!-- 5th topmost line --><div>Z&nbsp;&nbsp;&nbsp; a&nbsp; b&nbsp;&nbsp;&nbsp; c&nbsp;&nbsp;&nbsp; d</div>

  <!-- 6th topmost line --><div>e&nbsp;&nbsp;&nbsp; f&nbsp; g&nbsp;&nbsp;&nbsp; h&nbsp;&nbsp;&nbsp; j</div>

  <!-- 7th topmost line --><div id="bottom-border">k&nbsp;&nbsp;&nbsp; m&nbsp; n qqqq rrrr</div>

 </body>
</html>