jquery/test/data/offset/boxes.html

100 lines
2.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="documentElement" class="box">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="horizontal values 2^N; vertical doubled">
<title>Nonempty margin/border/padding/position</title>
<style type="text/css" media="screen">
/* work with convenient classes, units, and dimensions */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.box {
font-size: 4px;
border-style: solid;
min-width: 300px;
}
/* start the exponential scales, reserving the first bit for scroll position */
.box {
border-width: 1em 0.5em;
top: 2em; left: 1em;
margin: 4em 2em;
padding: 8em 4em;
}
#documentElement {
margin: 16em 8em;
border-width: 32em 16em;
padding: 64em 32em;
}
#body {
margin: 128em 64em;
border-width: 256em 128em;
padding: 512em 256em;
}
#documentElement {
top: 1024em; left: 512em;
}
#body {
top: 2048em; left: 1024em;
}
/* style for humans */
:not(.box) {
font-size: 20px;
}
html {
border-color: hsl(20, 100%, 70%);
background-color: hsl(110, 100%, 70%);
}
body {
border-color: hsl(200, 100%, 70%);
background-color: hsl(290, 100%, 70%);
}
html::after,
body::after {
font: italic 16px sans-serif;
content: attr(id);
}
div.box {
background-color: hsla(0, 0%, 70%, 0.5);
opacity: 0.7;
}
div.box div.box {
background-color: hsla(60, 100%, 70%, 0.5);
}
</style>
<script src="../../jquery.js"></script>
<script src="../iframeTest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery( function() {
window.scrollTo( 1, 2 );
setTimeout( startIframeTest, 13 );
} );
</script>
</head>
<body id="body" class="box">
<div id="relative" class="relative box">
<div id="relative-relative" class="relative box"><code
>relative &gt; relative</code></div>
<div id="relative-absolute" class="absolute box"><code
>relative &gt; absolute</code></div>
</div>
<div id="absolute" class="absolute box">
<div id="absolute-relative" class="relative box"><code
>absolute &gt; relative</code></div>
<div id="absolute-absolute" class="absolute box"><code
>absolute &gt; absolute</code></div>
</div>
<div id="fixed" class="fixed box">
<div id="fixed-relative" class="relative box"><code
>fixed &gt; relative</code></div>
<div id="fixed-absolute" class="absolute box"><code
>fixed &gt; absolute</code></div>
</div>
<p id="positionTest" class="absolute">position:absolute with no top/left values</p>
</body>
</html>