flexbox-table-flex-items-1.html (2351B)
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 Flexbox Test: caption size test for table flex items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> 11 <link rel="match" href="flexbox-table-flex-items-1-ref.html"> 12 <style type="text/css"> 13 * { vertical-align: top; } 14 .flex { 15 display: inline-flex; 16 border: 3px solid grey; 17 height: 73px; 18 width: 110px; 19 align-items: start; 20 } 21 22 table { 23 border: 1px solid; 24 padding: 0; 25 margin: 0; 26 background: lightgrey; 27 flex: auto; 28 min-width: 0; 29 min-height: 0; 30 } 31 32 caption { border: 1px dashed blue;} 33 x { display:block; width:16px; height:16px; } 34 t { display:block; width:30px; height:20px; } 35 i:nth-of-type(1) { width:10px; height:20px; } 36 i:nth-of-type(2) { width:20px; height:10px; } 37 38 .hma10 { margin: 7px 3px 1px auto; } 39 .hmaa { margin: 7px auto 1px auto; } 40 .vma10 { margin: auto 7px 3px 1px; } 41 .vmaa { margin: auto 7px auto 1px; } 42 43 .vr { writing-mode: vertical-rl; } 44 </style> 45 </head> 46 <body> 47 48 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div> 49 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div> 50 51 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div> 52 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div> 53 54 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div> 55 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div> 56 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div> 57 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div> 58 59 </body> 60 </html>