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