layout/reftests/pagination/dynamic-abspos-overflow-01-cols.ref.xhtml@8bccb770b82d
layout/reftests/pagination/dynamic-abspos-overflow-01-cols.ref.xhtml
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
8 <style type="text/css">
9 html {
10 background: white;
11 }
13 #colset {
14 position: relative;
15 padding-top: 1px;
16 width: 300pt;
17 height: 2in;
18 border: silver 2pt;
19 border-style: none solid;
20 }
22 .centerline {
23 margin: 0 auto;
24 bottom: 0;
25 position: absolute;
26 width: 8px;
27 background: aqua;
28 }
29 #c1 {
30 height: 96pt;
31 right: 200pt;
32 left: 0;
33 }
34 #c2 {
35 height: 120pt;
36 right: 100pt;
37 left: 100pt;
38 }
39 #c3 {
40 height: 144pt;
41 right: 0;
42 left: 200pt;
43 }
45 #redline {
46 border-top: 8px solid lime;
47 margin-top: 1in;
48 position: relative;
49 }
51 #dynamo {
52 position: relative;
53 margin: -8px auto -8px;
54 width: 8px;
55 border-top: 8px solid orange;
56 }
58 </style>
59 </head>
60 <body>
61 <p>There must be a single green line with an orange square where
62 it intersects with the middle aqua line, and no red. The following
63 links must move the orange square to the intersection with the
64 indicated aqua line:</p>
65 <p>
66 <a href="asdljlwjerlk-unvisited">Left</a>
67 <a href="asdljlwjerlk-unvisited">Center</a>
68 <a href="asdljlwjerlk-unvisited">Right</a>
69 </p>
70 <div id="colset">
71 <div class="centerline" id="c1"></div>
72 <div class="centerline" id="c2"></div>
73 <div class="centerline" id="c3"></div>
74 <div id="redline"></div>
75 <div id="dynamo"></div>
76 </div>
77 </body>
78 </html>
