| <!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 > relative</code></div> |
| <div id="relative-absolute" class="absolute box"><code |
| >relative > absolute</code></div> |
| </div> |
| <div id="absolute" class="absolute box"> |
| <div id="absolute-relative" class="relative box"><code |
| >absolute > relative</code></div> |
| <div id="absolute-absolute" class="absolute box"><code |
| >absolute > absolute</code></div> |
| </div> |
| <div id="fixed" class="fixed box"> |
| <div id="fixed-relative" class="relative box"><code |
| >fixed > relative</code></div> |
| <div id="fixed-absolute" class="absolute box"><code |
| >fixed > absolute</code></div> |
| </div> |
| <p id="positionTest" class="absolute">position:absolute with no top/left values</p> |
| </body> |
| </html> |
