wpt/css/CSS2/css1/c414-flt-002.xht at 95d7dbead09ded581d65bd534df70434dfae4e02 · web-platform-tests/wpt · GitHub

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
<!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: Replaced Float Alignment to Containing Block Edges</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; }
   .test div { margin: 1em; padding: 0 0 0.5em; border: 0.5em solid; border-bottom: none; background: navy; color: blue; }
   .test img { width: 10em; background: red; color: yellow; }
   .test img.left { float: left; }
   .test img.right { 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>In the following test, the teal squares must be just inside the
  top and sides of the blue rectangle.</p>
  <div class="test">
   <div>
    <img src="support/square-teal.png" alt="FAIL: You need image support." class="left"/>
    <img src="support/square-teal.png" alt="FAIL: You need image support." class="right"/>
    Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
    Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
   </div>
  </div>
 </body>
</html>