mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-06 09:05:45 +00:00
71 lines
2.8 KiB
Plaintext
71 lines
2.8 KiB
Plaintext
|
<?xml version="1.0"?>
|
||
|
|
|
||
|
|
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||
|
|
|
||
|
|
<window
|
||
|
|
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||
|
|
width="400"
|
||
|
|
height="600">
|
||
|
|
|
||
|
|
<vbox style="max-width: 400px;">
|
||
|
|
<!-- default: the inner hbox should expand the stack. -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack flex="1" style="background: yellow;">
|
||
|
|
<hbox style="width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="3" style="background: green;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- same as above, with explicit -moz-stack-sizing: stretch-to-fit -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack flex="1" style="background: yellow;">
|
||
|
|
<hbox style="-moz-stack-sizing: stretch-to-fit; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="3" style="background: green;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- same as above, but with overflow: hidden -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack flex="1" style="overflow: hidden; background: yellow;">
|
||
|
|
<hbox style="-moz-stack-sizing: stretch-to-fit; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="3" style="background: green; height: 20px;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- inner hbox has stack-sizing: ignore, but the stack doesn't have overflow: hidden set; the stack will stretch
|
||
|
|
just enough to include the child, but no more -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack flex="1" style="background: yellow;">
|
||
|
|
<hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="3" style="background: green; height: 20px;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- same as above, except stack has overflow: hidden set, so the blue shouldn't be visible -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack flex="1" style="overflow: hidden; background: yellow;">
|
||
|
|
<hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="3" style="background: green; height: 20px;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- no flex on the stack, but an explicit size; the child will cause us to resize the stack during Layout -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack style="width: 100px; background: yellow;">
|
||
|
|
<hbox style="width: 100px; height: 20px; background: transparent;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="1" style="background: green;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
<!-- same as above, but with stack-sizing: ignore; the stack should not be resized -->
|
||
|
|
<hbox style="height: 20px;">
|
||
|
|
<stack style="width: 100px; background: yellow;">
|
||
|
|
<hbox style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: transparent;" top="0" left="100"/>
|
||
|
|
</stack>
|
||
|
|
<spacer flex="1" style="background: green;"/>
|
||
|
|
</hbox>
|
||
|
|
|
||
|
|
</vbox>
|
||
|
|
|
||
|
|
</window>
|