layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html

   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>