min-width-tables-001-iframe.html (1586B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>iframe containing the meat of the test</title> 6 <style> 7 body { 8 margin: 0; 9 overflow: hidden; 10 } 11 /* green div that should cover the red divs */ 12 #green { 13 position: absolute; 14 left: 0; 15 top: 0; 16 background-color: green; 17 width: 100%; 18 height: 600px; 19 } 20 .spacer { 21 height: 98px; 22 width: 20px; 23 } 24 .item { 25 background-color: red; 26 display: block;/* property under test */ 27 /* border to aid understanding of boundaries between items */ 28 border-style: solid; 29 border-width: 1px; 30 border-color: red;/* Note: if you're trying to debug this, use a different color here */ 31 } 32 /* 100px = 10*(1 + 8 + 1) */ 33 @media (min-width: 100px) { 34 #green { 35 width: 100px; 36 height: 100px;/* = 1 + 98 + 1 */ 37 } 38 .item { 39 display: table-cell;/* property and value under test */ 40 } 41 } 42 </style> 43 </head> 44 <body> 45 <div> 46 <div class="item"><div class="spacer"></div></div> 47 <div class="item"><div class="spacer"></div></div> 48 <div class="item"><div class="spacer"></div></div> 49 <div class="item"><div class="spacer"></div></div> 50 <div class="item"><div class="spacer"></div></div> 51 <div class="item"><div class="spacer"></div></div> 52 <div class="item"><div class="spacer"></div></div> 53 <div class="item"><div class="spacer"></div></div> 54 <div class="item"><div class="spacer"></div></div> 55 <div class="item"><div class="spacer"></div></div> 56 </div> 57 <div id="green"></div> 58 </body> 59 </html>