grid-max-sizing-flex-004-ref.html (4128B)
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 <meta charset="utf-8"> 8 <title>CSS Grid Test: Testing track sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } 12 13 body { width: 800px; } 14 .grid { 15 display: block; 16 border: 3px dashed blue; 17 margin-bottom:20px; 18 float: left; 19 clear: left; 20 position:relative; 21 } 22 23 .c1 { min-height:20px; min-width:10px; } 24 .c2 { min-height:20px; min-width:10px; } 25 .c3 { min-height:0; min-width:20px; } 26 .r1 { min-height:10px; } 27 .x1 { min-height:10px; min-width:0px; border-style:none; } 28 29 span { 30 display: block; 31 background: gray; 32 border-style: solid; 33 border-width: 1px 3px 5px 7px; 34 justify-self: flex-start; 35 } 36 37 x { display:inline-block; height:10px; width:18px; } 38 </style> 39 </head> 40 <body> 41 42 <div class="grid flex" style="width:0;height:0;"></div> 43 <div class="grid flex" style="width:1px;height:1px;"></div> 44 <div class="grid mm" style="width:0;height:0;"></div> 45 <div class="grid mm" style="width:1px;height:1px;"></div> 46 <div class="grid zero" style="width:0;height:0;"></div> 47 <div class="grid zero" style="width:1px;height:1px;"></div> 48 <!-- TODO: fails due to broken align:stretch 49 <div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2" style="position:relative;top:0px;width:0;min-height:0;height:1px;min-width:0;border-width:0 0 0 10px;z-index:1;"><x></x></span></div> 50 51 <div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div> 52 --> 53 54 <div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> 55 <div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> 56 <!-- TODO: fails due to broken align:stretch 57 <div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div> 58 <div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div> 59 --> 60 61 <div class="grid flex"> 62 <span class="c1 r1"><x></x></span> 63 </div> 64 65 <div class="grid flex10"> 66 <span class="x1"></span></div> 67 68 <div class="grid flex10" style="width:0.010px; clear:none;"> 69 <span class="x1"></span></div> 70 71 <div class="grid flex10" style="width:0.020px; clear:none;"> 72 <span class="x1"></span></div> 73 74 <div class="grid flex10" style="width:0.040px; clear:none;"> 75 <span class="x1"></span></div> 76 77 <div class="grid flex10" style="width:0.15px; clear:none;"> 78 <span class="x1"></span></div> 79 80 <div class="grid flex10" style="width:0.18px; clear:none;"> 81 <span class="x1"></span></div> 82 83 <div class="grid flex10" style="width:0.19px; clear:none;"> 84 <span class="x1"></span></div> 85 86 <div class="grid flex10" style="width:1px; clear:none;"> 87 <span class="x1"></span></div> 88 89 <div class="grid flex10" style="width:2px; clear:none;"> 90 <span class="x1"></span></div> 91 92 <div class="grid flex10" style="width:3px; clear:none;"> 93 <span class="x1"></span></div> 94 95 <div class="grid flex10" style="width:4px; clear:none;"> 96 <span class="x1"></span></div> 97 98 <div class="grid flex10" style="width:5px; clear:none;"> 99 <span class="x1"></span></div> 100 101 <div class="grid flex10" style="width:6px; clear:none;"> 102 <span class="x1"></span></div> 103 104 <div class="grid flex10" style="width:7px; clear:none;"> 105 <span class="x1"></span></div> 106 107 <div class="grid flex10" style="width:8px; clear:none;"> 108 <span class="x1"></span></div> 109 110 <div class="grid flex10" style="width:9px; clear:none;"> 111 <span class="x1"></span></div> 112 113 <div class="grid flex10" style="width:10px; clear:none;"> 114 <span class="x1"></span></div> 115 116 <div class="grid flex10" style="width:11px; clear:none;"> 117 <span class="x1"></span></div> 118 119 </body> 120 </html>