layout/reftests/bugs/346189-1.xul

   1 <?xml version="1.0"?>
   2
   3 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   4
   5 <window
   6   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   7   width="400"
   8   height="600">
   9
  10 <vbox style="max-width: 400px;">
  11   <!-- default: the inner hbox should expand the stack. -->
  12   <hbox style="height: 20px;">
  13     <stack flex="1" style="background: yellow;">
  14       <hbox style="width: 100px; height: 20px; background: blue;" top="0" left="100"/>
  15     </stack>
  16     <spacer flex="3" style="background: green;"/>
  17   </hbox>
  18
  19   <!-- same as above, with explicit -moz-stack-sizing: stretch-to-fit -->
  20   <hbox style="height: 20px;">
  21     <stack flex="1" style="background: yellow;">
  22       <hbox style="-moz-stack-sizing: stretch-to-fit; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
  23     </stack>
  24     <spacer flex="3" style="background: green;"/>
  25   </hbox>
  26
  27   <!-- same as above, but with overflow: hidden -->
  28   <hbox style="height: 20px;">
  29     <stack flex="1" style="overflow: hidden; background: yellow;">
  30       <hbox style="-moz-stack-sizing: stretch-to-fit; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
  31     </stack>
  32     <spacer flex="3" style="background: green; height: 20px;"/>
  33   </hbox>
  34
  35   <!-- inner hbox has stack-sizing: ignore, but the stack doesn't have overflow: hidden set; the stack will stretch
  36        just enough to include the child, but no more -->
  37   <hbox style="height: 20px;">
  38     <stack flex="1" style="background: yellow;">
  39       <hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
  40     </stack>
  41     <spacer flex="3" style="background: green; height: 20px;"/>
  42   </hbox>
  43
  44   <!-- same as above, except stack has overflow: hidden set, so the blue shouldn't be visible -->
  45   <hbox style="height: 20px;">
  46     <stack flex="1" style="overflow: hidden; background: yellow;">
  47       <hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
  48     </stack>
  49     <spacer flex="3" style="background: green; height: 20px;"/>
  50   </hbox>
  51
  52   <!-- no flex on the stack, but an explicit size; the child will cause us to resize the stack during Layout -->
  53   <hbox style="height: 20px;">
  54     <stack style="width: 100px; background: yellow;">
  55       <hbox style="width: 100px; height: 20px; background: transparent;" top="0" left="100"/>
  56     </stack>
  57     <spacer flex="1" style="background: green;"/>
  58   </hbox>
  59
  60   <!-- same as above, but with stack-sizing: ignore; the stack should not be resized -->
  61   <hbox style="height: 20px;">
  62     <stack style="width: 100px; background: yellow;">
  63       <hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: transparent;" top="0" left="100"/>
  64     </stack>
  65     <spacer flex="1" style="background: green;"/>
  66   </hbox>
  67
  68 </vbox>
  69
  70 </window>