summaryrefslogtreecommitdiffstats
path: root/layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml')
-rw-r--r--layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml239
1 files changed, 239 insertions, 0 deletions
diff --git a/layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml b/layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
new file mode 100644
index 0000000000..8c1d7db62c
--- /dev/null
+++ b/layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
@@ -0,0 +1,239 @@
+<!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" class="reftest-wait">
+ <head>
+ <title>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+ <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
+ <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
+ <style type="text/css">
+ html {
+ background: white;
+ }
+
+ .container {
+ background: red;
+ height: 24pt;
+ position: relative;
+ }
+ .overflow {
+ width: 10pt;
+ border-bottom: lime 8px solid;
+ top: 0;
+ }
+ .following {
+ position: relative;
+ background: white;
+ width: 100pt;
+ }
+ #colset {
+ padding-top: 1px;
+ width: 300pt;
+ height: 2in;
+ column-count: 3;
+ column-gap: 0;
+ border: silver 2pt;
+ border-style: none solid;
+ }
+ #redline {
+ width: 303pt;
+ border-top: 8px solid red;
+ margin-top: -1in;
+ position: relative;
+ z-index: -1;
+ }
+
+ .ocontainer {
+ height: 0;
+ position: relative;
+ }
+ .o1 { /* 3rd col */
+ height: 5in;
+ }
+ .a1 { /* 1st col */
+ position: absolute;
+ height: 1in;
+ width: 33pt;
+ }
+ .a2 { /* 2nd col */
+ position: absolute;
+ height: 3in;
+ width: 25pt;
+ margin-left: 25pt;
+ }
+ .a3 { /* 3rd col */
+ position: absolute;
+ height: 5in;
+ margin-left: 10pt;
+ }
+ .a4 { /* 2nd col */
+ width: 25pt;
+ height: 3in;
+ }
+
+ .b1 { /* 3rd col */
+ position: absolute;
+ height: 336pt;
+ margin-left: 20pt;
+ }
+ .b2 { /* 2nd col */
+ position: absolute;
+ height: 192pt;
+ width: 25pt;
+ margin-left: 50pt;
+ }
+ .b3 { /* 3rd col */
+ position: absolute;
+ height: 336pt;
+ margin-left: 30pt;
+ }
+ .b4 { /* 1st col, but no border */
+ position: absolute;
+ height: 48pt;
+ border-bottom: none;
+ }
+ .b4 .child1 { /* 1st col */
+ position: absolute;
+ height: 100%;
+ width: 33pt;
+ margin-left: 33pt;
+ }
+ .b4 .child2 { /* 3rd col */
+ height: 336pt;
+ margin-left: 40pt;
+
+ }
+ .b5 { /* 1st col */
+ position: absolute;
+ height: 48pt;
+ width: 34pt;
+ margin-left: 66pt;
+ }
+ .b6 { /* 3rd col */
+ height: 336pt;
+ margin-left: 50pt;
+ }
+
+ .c1 { /* 3rd col */
+ position: absolute;
+ height: 3in;
+ margin-left: 60pt;
+ }
+ .c2 { /* 2nd col */
+ position: absolute;
+ height: 1in;
+ width: 25pt;
+ margin-left: 75pt;
+ }
+ .c3 { /* 3rd col */
+ position: absolute;
+ height: 3in;
+ margin-left: 70pt;
+ }
+ .c4 { /* 3rd col */
+ height: 3in;
+ width: 20pt;
+ margin-left: 80pt;
+ }
+
+ .f1 {
+ margin-top: -48pt;
+ height: 48pt;
+ margin-bottom: 96pt;
+ }
+ .f2 {
+ margin-top: -24pt;
+ height: 24pt;
+ }
+
+ .centerline {
+ margin: 0 auto;
+ top: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ width: 8px;
+ height: 6in;
+ background: aqua;
+ }
+
+ #dynamo {
+ background: transparent;
+ border-bottom: 8px solid orange;
+ z-index: 10;
+ height: 192pt;
+ }
+
+ </style>
+ </head>
+ <body onload="document.getElementById('dynamo').style.height = '48pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '336pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '48pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '192pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '1500pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '48pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '192pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '336pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '192pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '48pt';
+ document.getElementById('dynamo').offsetHeight;
+ document.getElementById('dynamo').style.height = '192pt';
+ document.documentElement.className = ''
+ ">
+ <p>There must be a single green line with an orange square where
+ it intersects with the middle aqua line, and no red. The following
+ links must move the orange square to the intersection with the
+ indicated aqua line:</p>
+ <p>
+ <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '48pt'; return false;">Left</a>
+ <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '192pt'; return false;">Center</a>
+ <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '336pt'; return false;">Right</a>
+ </p>
+ <div id="colset">
+ <div>
+ <div class="ocontainer">
+ <div class="centerline"></div>
+ <div class="overflow o1"></div>
+ </div>
+ <div class="container">
+ <div class="overflow a1"></div>
+ <div class="overflow a2"></div>
+ <div class="overflow a3"></div>
+ <div class="overflow a4"></div>
+ </div>
+ <div class="ocontainer">
+ <div id="dynamo" class="centerline"></div>
+ </div>
+ <div class="container">
+ <div class="overflow b1"></div>
+ <div class="overflow b2"></div>
+ <div class="overflow b3"></div>
+ <div class="overflow b4">
+ <div class="overflow child1"></div>
+ <div class="overflow child2"></div>
+ </div>
+ <div class="overflow b5"></div>
+ <div class="overflow b6"></div>
+ </div>
+ </div>
+ <p class="following f1">
+ </p>
+ <div class="container">
+ <div class="overflow c1"></div>
+ <div class="overflow c2"></div>
+ <div class="overflow c3"></div>
+ <div class="overflow c4"></div>
+ </div>
+ <div class="following f2"></div>
+ </div>
+ <div id="redline"></div>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-02 01:39:56 +0000