1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,239 @@
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-wait">
1.6 + <head>
1.7 + <title>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</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 + html {
1.13 + background: white;
1.14 + }
1.15 +
1.16 + .container {
1.17 + background: red;
1.18 + height: 24pt;
1.19 + position: relative;
1.20 + }
1.21 + .overflow {
1.22 + width: 10pt;
1.23 + border-bottom: lime 8px solid;
1.24 + top: 0;
1.25 + }
1.26 + .following {
1.27 + position: relative;
1.28 + background: white;
1.29 + width: 100pt;
1.30 + }
1.31 + #colset {
1.32 + padding-top: 1px;
1.33 + width: 300pt;
1.34 + height: 2in;
1.35 + -moz-column-count: 3;
1.36 + -moz-column-gap: 0;
1.37 + border: silver 2pt;
1.38 + border-style: none solid;
1.39 + }
1.40 + #redline {
1.41 + width: 303pt;
1.42 + border-top: 8px solid red;
1.43 + margin-top: -1in;
1.44 + position: relative;
1.45 + z-index: -1;
1.46 + }
1.47 +
1.48 + .ocontainer {
1.49 + height: 0;
1.50 + position: relative;
1.51 + }
1.52 + .o1 { /* 3rd col */
1.53 + height: 5in;
1.54 + }
1.55 + .a1 { /* 1st col */
1.56 + position: absolute;
1.57 + height: 1in;
1.58 + width: 33pt;
1.59 + }
1.60 + .a2 { /* 2nd col */
1.61 + position: absolute;
1.62 + height: 3in;
1.63 + width: 25pt;
1.64 + margin-left: 25pt;
1.65 + }
1.66 + .a3 { /* 3rd col */
1.67 + position: absolute;
1.68 + height: 5in;
1.69 + margin-left: 10pt;
1.70 + }
1.71 + .a4 { /* 2nd col */
1.72 + width: 25pt;
1.73 + height: 3in;
1.74 + }
1.75 +
1.76 + .b1 { /* 3rd col */
1.77 + position: absolute;
1.78 + height: 336pt;
1.79 + margin-left: 20pt;
1.80 + }
1.81 + .b2 { /* 2nd col */
1.82 + position: absolute;
1.83 + height: 192pt;
1.84 + width: 25pt;
1.85 + margin-left: 50pt;
1.86 + }
1.87 + .b3 { /* 3rd col */
1.88 + position: absolute;
1.89 + height: 336pt;
1.90 + margin-left: 30pt;
1.91 + }
1.92 + .b4 { /* 1st col, but no border */
1.93 + position: absolute;
1.94 + height: 48pt;
1.95 + border-bottom: none;
1.96 + }
1.97 + .b4 .child1 { /* 1st col */
1.98 + position: absolute;
1.99 + height: 100%;
1.100 + width: 33pt;
1.101 + margin-left: 33pt;
1.102 + }
1.103 + .b4 .child2 { /* 3rd col */
1.104 + height: 336pt;
1.105 + margin-left: 40pt;
1.106 +
1.107 + }
1.108 + .b5 { /* 1st col */
1.109 + position: absolute;
1.110 + height: 48pt;
1.111 + width: 34pt;
1.112 + margin-left: 66pt;
1.113 + }
1.114 + .b6 { /* 3rd col */
1.115 + height: 336pt;
1.116 + margin-left: 50pt;
1.117 + }
1.118 +
1.119 + .c1 { /* 3rd col */
1.120 + position: absolute;
1.121 + height: 3in;
1.122 + margin-left: 60pt;
1.123 + }
1.124 + .c2 { /* 2nd col */
1.125 + position: absolute;
1.126 + height: 1in;
1.127 + width: 25pt;
1.128 + margin-left: 75pt;
1.129 + }
1.130 + .c3 { /* 3rd col */
1.131 + position: absolute;
1.132 + height: 3in;
1.133 + margin-left: 70pt;
1.134 + }
1.135 + .c4 { /* 3rd col */
1.136 + height: 3in;
1.137 + width: 20pt;
1.138 + margin-left: 80pt;
1.139 + }
1.140 +
1.141 + .f1 {
1.142 + margin-top: -48pt;
1.143 + height: 48pt;
1.144 + margin-bottom: 96pt;
1.145 + }
1.146 + .f2 {
1.147 + margin-top: -24pt;
1.148 + height: 24pt;
1.149 + }
1.150 +
1.151 + .centerline {
1.152 + margin: 0 auto;
1.153 + top: 0;
1.154 + left: 0;
1.155 + right: 0;
1.156 + position: absolute;
1.157 + width: 8px;
1.158 + height: 6in;
1.159 + background: aqua;
1.160 + }
1.161 +
1.162 + #dynamo {
1.163 + background: transparent;
1.164 + border-bottom: 8px solid orange;
1.165 + z-index: 10;
1.166 + height: 192pt;
1.167 + }
1.168 +
1.169 + </style>
1.170 + </head>
1.171 + <body onload="document.getElementById('dynamo').style.height = '48pt';
1.172 + document.getElementById('dynamo').offsetHeight;
1.173 + document.getElementById('dynamo').style.height = '336pt';
1.174 + document.getElementById('dynamo').offsetHeight;
1.175 + document.getElementById('dynamo').style.height = '48pt';
1.176 + document.getElementById('dynamo').offsetHeight;
1.177 + document.getElementById('dynamo').style.height = '192pt';
1.178 + document.getElementById('dynamo').offsetHeight;
1.179 + document.getElementById('dynamo').style.height = '1500pt';
1.180 + document.getElementById('dynamo').offsetHeight;
1.181 + document.getElementById('dynamo').style.height = '48pt';
1.182 + document.getElementById('dynamo').offsetHeight;
1.183 + document.getElementById('dynamo').style.height = '192pt';
1.184 + document.getElementById('dynamo').offsetHeight;
1.185 + document.getElementById('dynamo').style.height = '336pt';
1.186 + document.getElementById('dynamo').offsetHeight;
1.187 + document.getElementById('dynamo').style.height = '192pt';
1.188 + document.getElementById('dynamo').offsetHeight;
1.189 + document.getElementById('dynamo').style.height = '48pt';
1.190 + document.getElementById('dynamo').offsetHeight;
1.191 + document.getElementById('dynamo').style.height = '192pt';
1.192 + document.documentElement.className = ''
1.193 + ">
1.194 + <p>There must be a single green line with an orange square where
1.195 + it intersects with the middle aqua line, and no red. The following
1.196 + links must move the orange square to the intersection with the
1.197 + indicated aqua line:</p>
1.198 + <p>
1.199 + <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '48pt'; return false;">Left</a>
1.200 + <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '192pt'; return false;">Center</a>
1.201 + <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '336pt'; return false;">Right</a>
1.202 + </p>
1.203 + <div id="colset">
1.204 + <div>
1.205 + <div class="ocontainer">
1.206 + <div class="centerline"></div>
1.207 + <div class="overflow o1"></div>
1.208 + </div>
1.209 + <div class="container">
1.210 + <div class="overflow a1"></div>
1.211 + <div class="overflow a2"></div>
1.212 + <div class="overflow a3"></div>
1.213 + <div class="overflow a4"></div>
1.214 + </div>
1.215 + <div class="ocontainer">
1.216 + <div id="dynamo" class="centerline"></div>
1.217 + </div>
1.218 + <div class="container">
1.219 + <div class="overflow b1"></div>
1.220 + <div class="overflow b2"></div>
1.221 + <div class="overflow b3"></div>
1.222 + <div class="overflow b4">
1.223 + <div class="overflow child1"></div>
1.224 + <div class="overflow child2"></div>
1.225 + </div>
1.226 + <div class="overflow b5"></div>
1.227 + <div class="overflow b6"></div>
1.228 + </div>
1.229 + </div>
1.230 + <p class="following f1">
1.231 + </p>
1.232 + <div class="container">
1.233 + <div class="overflow c1"></div>
1.234 + <div class="overflow c2"></div>
1.235 + <div class="overflow c3"></div>
1.236 + <div class="overflow c4"></div>
1.237 + </div>
1.238 + <div class="following f2"></div>
1.239 + </div>
1.240 + <div id="redline"></div>
1.241 + </body>
1.242 +</html>
