tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-min-max-content-sizing-002-ref.html (2839B)

      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>Reference: Testing grid minmax(min-content,max-content) column/rows</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227285">
     10  <style type="text/css">
     11 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
     12 
     13 .grid {
     14  display: grid;
     15  border: 2px solid green;
     16  grid-template-columns: minmax(min-content,max-content);
     17  grid-template-rows: minmax(min-content,max-content);
     18  clear: both;
     19  line-height: 0;
     20 }
     21 
     22 .grid > div {
     23  border: 1px solid black;
     24  min-height:0;
     25  min-width:0;
     26 }
     27 
     28 img.t1 { }
     29 img.t2 { }
     30 
     31 x {
     32  display: block;
     33  border: 1px solid blue;
     34  width: 2px;
     35 }
     36 
     37 .v {
     38  writing-mode:vertical-lr;
     39  -webkit-writing-mode:vertical-lr;
     40 }
     41    </style>
     42 </head>
     43 <body>
     44 
     45 <div class="grid">
     46  <div>
     47    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
     48  </div>
     49 </div>
     50 
     51 <div class="grid">
     52  <div>
     53    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
     54  </div>
     55 </div>
     56 
     57 <div class="grid">
     58  <div style="width:2px; height:2px">
     59    <x style="width:2px; height:2px"></x>
     60  </div>
     61 </div>
     62 
     63 <div class="grid">
     64  <div>
     65    <img class="t1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
     66  </div>
     67 </div>
     68 
     69 <div class="grid">
     70  <div>
     71    <img class="t2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D">
     72  </div>
     73 </div>
     74 
     75 <div class="grid">
     76  <div style="width:2px; height:2px">
     77    <x style="width:2px; height:2px"></x>
     78  </div>
     79 </div>
     80 
     81 </body>
     82 </html>