summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/CSS2/css1/c414-flt-ln-001.xht
blob: 0574c34620504a2671f07533944ac468cb1c1d58 (plain)
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Test: Vertical Position of Floats</title>
  <meta name="flags" content="image" />
  <link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
  <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <style type="text/css"><![CDATA[
   p { color: navy; }
   div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em serif; }
   div img { width: 7em; color: red; }
   div span.a { border: solid aqua; background-color: teal; color: white; }
   div img.a { float: left; }
   div span.b { border: solid fuchsia; background-color: purple; color: white; }
   div img.b { float: right; }
  ]]></style>
  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
 </head>
 <body>
  <p>The big coloured boxes should be level with the top of the small
  coloured boxes of the same color (unless there is not enough room
  for the big box to fit on the small box's line, in which case the
  big box should be level with the bottom of the respective small
  box).</p>
  <div>
   dummy text dummy text dummy text dummy text dummy text dummy text
   <span class="a">&#x21E6;</span>
   <img src="support/square-teal.png" alt="FAIL: Images required for this test." class="a"/>
   dummy text dummy text dummy text dummy text dummy text dummy text
   <span class="b">&#x21E8;</span>
   <img src="support/square-purple.png" alt="FAIL: Images required for this test." class="b"/>
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
   dummy text dummy text dummy text dummy text dummy text dummy text
  </div>
 </body>
</html>