grid-relpos-items-001-ref.html (1477B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <title>CSS Test: Testing layout of rel.pos. grid items</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151316"> 9 <meta charset="utf-8"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 height: 30px; 15 border: 3px solid; 16 } 17 18 .c1 { background: grey; } 19 .r2 { transform: translate(-201px, -90px); } 20 .r3 { transform: translate(-10px, -40px); } 21 .r4 { transform: translate(70px, 40px); } 22 23 span { 24 border: 1px solid; 25 display: inline-block; 26 width: 18px; 27 height: 28px; 28 vertical-align: top; 29 } 30 .abs { 31 background: lime; 32 position: absolute; 33 top: 116px; 34 left: 204px; 35 padding-left: 3px; 36 padding-top: 5px; 37 width: 18px; 38 height: 28px; 39 vertical-align: top; 40 } 41 .abs1 { 42 position: absolute; 43 top: -5px; 44 left: -11px; 45 width: 30px; 46 height: 36px; 47 } 48 </style> 49 </head> 50 <body> 51 52 <div class="grid"> 53 <span class="c1">1</span> 54 <span class="abs r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span> 55 <span class="abs r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span> 56 <span class="abs r3" style="xheight:23px"><span class="abs1">r3</span></span> 57 <span class="abs r4" style="xheight:23px"><span class="abs1">r4</span></span> 58 </div> 59 60 </body> 61 </html>