1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/pagination/abspos-overflow-01.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,201 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
1.5 +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-print">
1.6 + <head>
1.7 + <title>Multi-column Layout: AbsPos Pagination (Interlaced)</title>
1.8 + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
1.9 + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
1.10 + <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
1.11 + <style type="text/css">
1.12 + /* If the reftest print size change, this needs to change too. */
1.13 + html, body {
1.14 + margin: 0;
1.15 + padding: 0;
1.16 + }
1.17 +
1.18 + .container {
1.19 + background: red;
1.20 + height: 24pt;
1.21 + position: relative;
1.22 + }
1.23 + .overflow {
1.24 + width: 10pt;
1.25 + border-bottom: lime 4px solid;
1.26 + top: 0;
1.27 + }
1.28 + .following {
1.29 + font-size: 10pt;
1.30 + line-height: 10pt;
1.31 + font-family: sans-serif;
1.32 + text-align: center;
1.33 + position: relative;
1.34 + background: white;
1.35 + width: 100pt;
1.36 + }
1.37 + #pageset {
1.38 + width: 100pt;
1.39 + border: silver 2pt;
1.40 + border-style: none solid;
1.41 + height: 6in;
1.42 + }
1.43 + .redline {
1.44 + float: left;
1.45 + margin-right: -103pt;
1.46 + width: 103pt;
1.47 + border-bottom: 8px solid red;
1.48 + position: relative;
1.49 + z-index: -1;
1.50 + }
1.51 + .r1 {
1.52 + height: 50%;
1.53 + }
1.54 + .r2 {
1.55 + height: 150%;
1.56 + }
1.57 + .r3 {
1.58 + height: 250%;
1.59 + }
1.60 +
1.61 + .ocontainer {
1.62 + height: 0;
1.63 + }
1.64 + .o1 { /* 3rd page */
1.65 + height: 5in;
1.66 + }
1.67 + .a1 { /* 1st page */
1.68 + position: absolute;
1.69 + height: 1in;
1.70 + width: 33pt;
1.71 + }
1.72 + .a2 { /* 2nd page */
1.73 + position: absolute;
1.74 + height: 3in;
1.75 + width: 25pt;
1.76 + margin-left: 25pt;
1.77 + }
1.78 + .a3 { /* 3rd page */
1.79 + position: absolute;
1.80 + height: 5in;
1.81 + margin-left: 10pt;
1.82 + }
1.83 + .a4 { /* 2nd page */
1.84 + width: 25pt;
1.85 + height: 3in;
1.86 + }
1.87 +
1.88 + .b1 { /* 3rd page */
1.89 + position: absolute;
1.90 + height: 336pt;
1.91 + margin-left: 20pt;
1.92 + }
1.93 + .b2 { /* 2nd page */
1.94 + position: absolute;
1.95 + height: 192pt;
1.96 + width: 25pt;
1.97 + margin-left: 50pt;
1.98 + }
1.99 + .b3 { /* 3rd page */
1.100 + position: absolute;
1.101 + height: 336pt;
1.102 + margin-left: 30pt;
1.103 + }
1.104 + .b4 { /* 1st col, but no border */
1.105 + position: absolute;
1.106 + height: 48pt;
1.107 + border-bottom: none;
1.108 + }
1.109 + .b4 .child1 { /* 1st page */
1.110 + position: absolute;
1.111 + height: 100%;
1.112 + width: 33pt;
1.113 + margin-left: 33pt;
1.114 + }
1.115 + .b4 .child2 { /* 3rd page */
1.116 + height: 336pt;
1.117 + margin-left: 40pt;
1.118 +
1.119 + }
1.120 + .b5 { /* 1st page */
1.121 + position: absolute;
1.122 + height: 48pt;
1.123 + width: 34pt;
1.124 + margin-left: 66pt;
1.125 + }
1.126 + .b6 { /* 3rd page */
1.127 + height: 336pt;
1.128 + margin-left: 50pt;
1.129 + }
1.130 +
1.131 + .c1 { /* 3rd page */
1.132 + position: absolute;
1.133 + height: 3in;
1.134 + margin-left: 60pt;
1.135 + }
1.136 + .c2 { /* 2nd page */
1.137 + position: absolute;
1.138 + height: 1in;
1.139 + width: 25pt;
1.140 + margin-left: 75pt;
1.141 + }
1.142 + .c3 { /* 3rd page */
1.143 + position: absolute;
1.144 + height: 3in;
1.145 + margin-left: 70pt;
1.146 + }
1.147 + .c4 { /* 3rd page */
1.148 + height: 3in;
1.149 + width: 20pt;
1.150 + margin-left: 80pt;
1.151 + }
1.152 +
1.153 + .f1 {
1.154 + margin-top: -48pt;
1.155 + height: 48pt;
1.156 + margin-bottom: 96pt;
1.157 + }
1.158 + .f2 {
1.159 + margin-top: -24pt;
1.160 + height: 24pt;
1.161 + }
1.162 + </style>
1.163 + </head>
1.164 + <body>
1.165 + <div class="redline r1"></div>
1.166 + <div class="redline r2"></div>
1.167 + <div class="redline r3"></div>
1.168 +
1.169 + <div id="pageset">
1.170 + <div>
1.171 + <div class="ocontainer">
1.172 + <div class="overflow o1"></div>
1.173 + </div>
1.174 + <div class="container">
1.175 + <div class="overflow a1"></div>
1.176 + <div class="overflow a2"></div>
1.177 + <div class="overflow a3"></div>
1.178 + <div class="overflow a4"></div>
1.179 + </div>
1.180 + <div class="container">
1.181 + <div class="overflow b1"></div>
1.182 + <div class="overflow b2"></div>
1.183 + <div class="overflow b3"></div>
1.184 + <div class="overflow b4">
1.185 + <div class="overflow child1"></div>
1.186 + <div class="overflow child2"></div>
1.187 + </div>
1.188 + <div class="overflow b5"></div>
1.189 + <div class="overflow b6"></div>
1.190 + </div>
1.191 + </div>
1.192 + <p class="following f1">
1.193 + There must be 3 pages, a single green line on each page, and no red.
1.194 + </p>
1.195 + <div class="container">
1.196 + <div class="overflow c1"></div>
1.197 + <div class="overflow c2"></div>
1.198 + <div class="overflow c3"></div>
1.199 + <div class="overflow c4"></div>
1.200 + </div>
1.201 + <div class="following f2"></div>
1.202 + </div>
1.203 + </body>
1.204 +</html>
