3 <?xml-stylesheet href=
"chrome://global/skin/" type=
"text/css"?>
6 xmlns=
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
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"/>
16 <spacer flex=
"3" style=
"background: green;"/>
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"/>
24 <spacer flex=
"3" style=
"background: green;"/>
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"/>
32 <spacer flex=
"3" style=
"background: green; height: 20px;"/>
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"/>
41 <spacer flex=
"3" style=
"background: green; height: 20px;"/>
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"/>
49 <spacer flex=
"3" style=
"background: green; height: 20px;"/>
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"/>
57 <spacer flex=
"1" style=
"background: green;"/>
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"/>
65 <spacer flex=
"1" style=
"background: green;"/>