layout/reftests/flexbox/flexbox-intrinsic-sizing-horiz-1a.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!--
   7      This test has a number of tables, each with 2 flexboxes side-by-side,
   8      whose "width" values depend on the flexbox's min and/or pref widths.
   9
  10      There's not enough space for both flexboxes to fit side-by-side, so their
  11      width preferences must be balanced This exercises
  12      nsFlexContainerFrame::GetPrefWidth() & ::GetMinWidth().
  13
  14      IN EACH CASE, div.a has these intrinsic widths:
  15        Pref width: 2*40 + 1*50 + 2*10 = 150px   (2*aaaa + 1*aaaaa + 2*space)
  16        Min width: 50px  (width of "aaaaa")
  17      and div.b has these intrinsic widths:
  18        Pref width: 5*20 + 3*10 + 7*10 = 200px   (5*bb + 3*b + 7*space)
  19        Min width: 20px  (width "bb")
  20 -->
  21 <html xmlns="http://www.w3.org/1999/xhtml">
  22   <head>
  23     <link rel="stylesheet" type="text/css" href="ahem.css" />
  24     <style>
  25       table {
  26         width: 300px;
  27         font: 10px Ahem;
  28         margin-bottom: 2px;
  29         border: 1px dashed black;
  30       }
  31
  32       div.a, div.b { display: flex; }
  33
  34       div.a { background: lightgreen; }
  35       div.b { background: lightblue;  }
  36
  37       <!-- helper-classes for assigning pref / min / auto-width to our divs -->
  38       div.prefWidth {
  39         width: max-content;
  40       }
  41       div.minWidth {
  42         width: min-content;
  43       }
  44       div.autoWidth {
  45         width: auto;
  46       }
  47   </style>
  48 </head>
  49 <body>
  50   <!-- both auto width -->
  51    <table cellpadding="0" cellspacing="0"><tr>
  52        <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
  53        <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
  54    </tr></table>
  55
  56    <!-- MIXING MIN WIDTH & AUTO -->
  57    <!-- both min width -->
  58    <table cellpadding="0" cellspacing="0"><tr>
  59        <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
  60        <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
  61    </tr></table>
  62    <!-- min,auto -->
  63    <table cellpadding="0" cellspacing="0"><tr>
  64        <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
  65        <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
  66    </tr></table>
  67    <!-- auto,min -->
  68    <table cellpadding="0" cellspacing="0"><tr>
  69        <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
  70        <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
  71    </tr></table>
  72
  73    <!-- MIXING PREF WIDTH & AUTO -->
  74    <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
  75    <table cellpadding="0" cellspacing="0"><tr>
  76        <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
  77        <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
  78    </tr></table>
  79    <!-- pref,auto -->
  80    <table cellpadding="0" cellspacing="0"><tr>
  81        <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
  82        <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
  83    </tr></table>
  84    <!-- auto,pref -->
  85    <table cellpadding="0" cellspacing="0"><tr>
  86        <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
  87        <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
  88    </tr></table>
  89
  90    <!-- MIXING PREF WIDTH & MIN WIDTH -->
  91    <!-- min,pref -->
  92    <table cellpadding="0" cellspacing="0"><tr>
  93        <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
  94        <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
  95    </tr></table>
  96    <!-- pref,min -->
  97    <table cellpadding="0" cellspacing="0"><tr>
  98        <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
  99        <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
 100    </tr></table>
 101 </body>
 102 </html>