зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1576946 - Rewrite and remove tests relying on `display: -moz-stack;`. r=mats
Differential Revision: https://phabricator.services.mozilla.com/D49485 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Tim Nguyen
Родитель
a9335df10d
Коммит
e9cf7725cf
|
|
@ -25,7 +25,6 @@
|
|||
testCSSAttrs("display_mozgrid");
|
||||
testCSSAttrs("display_mozgridgroup");
|
||||
testCSSAttrs("display_mozgridline");
|
||||
testCSSAttrs("display_mozstack");
|
||||
testCSSAttrs("display_mozdeck");
|
||||
testCSSAttrs("display_mozpopup");
|
||||
testCSSAttrs("display_mozgroupbox");
|
||||
|
|
@ -58,11 +57,9 @@
|
|||
<vbox id="display_mozgrid" style="display: -moz-grid;" role="img"/>
|
||||
<vbox id="display_mozgridgroup" style="display: -moz-grid-group;" role="img"/>
|
||||
<vbox id="display_mozgridline" style="display: -moz-grid-line;" role="img"/>
|
||||
<vbox id="display_mozstack" style="display: -moz-stack;" role="img"/>
|
||||
<vbox id="display_mozdeck" style="display: -moz-deck;" role="img"/>
|
||||
<vbox id="display_mozpopup" style="display: -moz-popup;" role="img"/>
|
||||
<vbox id="display_mozgroupbox" style="display: -moz-groupbox;" role="img"/>
|
||||
|
||||
</hbox>
|
||||
</window>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
style="background:black; -moz-appearance:none;">
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script>
|
||||
|
||||
<stack style="height:300px; width:200px;">
|
||||
<stack style="align-items: center; height: 300px; width: 200px;">
|
||||
<!-- the bottom 100px is a strip of black that should be vixible through the content iframe -->
|
||||
<vbox style="background:pink; border-bottom:100px solid black"/>
|
||||
<!-- the middle 100px is a strip of black in the content iframe -->
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
for (var name of imports) {
|
||||
window[name] = window.arguments[0][name];
|
||||
}
|
||||
|
||||
|
||||
function runTests() {
|
||||
var testCanvas = snapshotWindow(window);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<hbox flex="1"/>
|
||||
</hbox>
|
||||
<!-- overdraw the troublesome junctions between colored boxes -->
|
||||
<spacer left="263" top="0" height="16" width="2" style="background:white;"/>
|
||||
<spacer left="279" top="0" height="16" width="2" style="background:white;"/>
|
||||
<spacer left="256" top="7" height="2" width="32" style="background:white;"/>
|
||||
<spacer style="margin-left: 263px; margin-top: 0; height: 16px; width: 2px; background: white;"/>
|
||||
<spacer style="margin-left: 279px; margin-top: 0; height: 16px; width: 2px; background: white;"/>
|
||||
<spacer style="margin-left: 256px; margin-top: 7px; height: 2px; width: 32px; background: white;"/>
|
||||
</stack>
|
||||
</window>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<?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">
|
||||
|
||||
<stack style="background: yellow;">
|
||||
<hbox style="width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||||
</stack>
|
||||
|
||||
</window>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<?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"
|
||||
onload="document.getElementById('b').style.removeProperty('-moz-stack-sizing');">
|
||||
|
||||
<stack style="background: yellow;">
|
||||
<hbox id="b" style="-moz-stack-sizing: ignore; width: 100px; height: 20px; background: blue;" top="0" left="100"/>
|
||||
</stack>
|
||||
|
||||
</window>
|
||||
|
|
@ -1332,7 +1332,6 @@ fuzzy-if(skiaContent,0-1,0-5) == 482659-1d.html 482659-1-ref.html
|
|||
pref(browser.display.focus_ring_width,1) == 491180-1.html 491180-1-ref.html
|
||||
pref(browser.display.focus_ring_width,1) == 491180-2.html 491180-2-ref.html
|
||||
== chrome://reftest/content/bugs/491323-1.xul chrome://reftest/content/bugs/491323-1-ref.xul
|
||||
== chrome://reftest/content/bugs/492239-1.xul chrome://reftest/content/bugs/492239-1-ref.xul
|
||||
== 492661-1.html 492661-1-ref.html
|
||||
== 493968-1.html 493968-1-ref.html
|
||||
== 494667-1.html 494667-1-ref.html
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="20px" left="20px" style="color: green;" value="Hello!"/>
|
||||
<label top="24px" left="24px" style="color: black;" value="Hello!"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 20px; margin-left: 20px; color: green;" value="Hello!"/>
|
||||
<label style="margin-top: 24px; margin-left: 24px; color: black;" value="Hello!"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="24px" left="24px" style="color: black; text-shadow: green -4px -4px" value="Hello!"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 24px; margin-left: 24px; color: black; text-shadow: green -4px -4px" value="Hello!"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="33px" left="33px" style="color: grey;" value="Hello"/>
|
||||
<label top="30px" left="30px" style="color: green;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 33px; margin-left: 33px; color: grey;" value="Hello"/>
|
||||
<label style="margin-top: 30px; margin-left: 30px; color: green;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="30px" left="30px" style="color: green; text-shadow: grey 3px 3px;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 30px; margin-left: 30px; color: green; text-shadow: grey 3px 3px;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="27px" left="27px" style="color:blue;" value="Hello"/>
|
||||
<label top="24px" left="24px" style="color:blue;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 27px; margin-left: 27px; color: blue;" value="Hello"/>
|
||||
<label style="margin-top: 24px; margin-left: 24px; color: blue;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="24px" left="24px" style="color:blue; text-shadow: 3px 3px;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 24px; margin-left: 24px; color: blue; text-shadow: 3px 3px;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="33px" left="33px" style="color:grey;" value="Hello"/>
|
||||
<label top="30px" left="30px" style="color:green;" value="Hello"/>
|
||||
<label top="27px" left="27px" style="color:red;" value="Hello"/>
|
||||
<label top="24px" left="24px" style="color:purple;" value="Hello"/>
|
||||
<label top="20px" left="20px" style="color:black;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 33px; margin-left: 33px; color: grey;" value="Hello"/>
|
||||
<label style="margin-top: 30px; margin-left: 30px; color: green;" value="Hello"/>
|
||||
<label style="margin-top: 27px; margin-left: 27px; color: red;" value="Hello"/>
|
||||
<label style="margin-top: 24px; margin-left: 24px; color: purple;" value="Hello"/>
|
||||
<label style="margin-top: 20px; margin-left: 20px; color: black;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<stack>
|
||||
<label top="20px" left="20px" style="color:black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px;" value="Hello"/>
|
||||
<stack style="align-items: start; justify-items: left;">
|
||||
<label style="margin-top: 20px; margin-left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px;" value="Hello"/>
|
||||
</stack>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -62,9 +62,6 @@ fuzzy-if(skiaContent,0-1,0-60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaConte
|
|||
== chrome://reftest/content/xul/object-position-png-001.xul object-position-png-001-ref.html
|
||||
== chrome://reftest/content/xul/object-position-png-002.xul object-position-png-002-ref.html
|
||||
|
||||
== chrome://reftest/content/xul/stack-sizing-1.xul chrome://reftest/content/xul/stack-sizing-1-ref.xul
|
||||
== chrome://reftest/content/xul/stack-sizing-2.xul chrome://reftest/content/xul/stack-sizing-2-ref.xul
|
||||
|
||||
== chrome://reftest/content/xul/image-appearance-dynamic.xul chrome://reftest/content/xul/image-appearance-dynamic-ref.xul
|
||||
|
||||
# Tests for rendering SVG images in a XUL <treecell>:
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<?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>
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 100px; background: blue;"/>
|
||||
<spacer style="width: 50px; background: yellow;"/>
|
||||
<spacer style="width: 150px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 100px; background: blue;"/>
|
||||
<spacer style="width: 50px; background: yellow;"/>
|
||||
<spacer style="width: 150px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 100px; background: blue;"/>
|
||||
<spacer style="width: 50px; background: yellow;"/>
|
||||
<spacer style="width: 150px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 100px; background: blue;"/>
|
||||
<spacer style="width: 200px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 300px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 200px; background: yellow;"/>
|
||||
<spacer style="width: 200px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
<hbox style="height: 20px;">
|
||||
<spacer style="width: 100px; background: yellow;"/>
|
||||
<spacer style="width: 300px; background: green;"/>
|
||||
</hbox>
|
||||
|
||||
</vbox>
|
||||
|
||||
</window>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<?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>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<?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"
|
||||
align="start">
|
||||
|
||||
<box style="background: red; width: 20px; height: 20px;"/>
|
||||
|
||||
<box style="background: green; width: 10px; height: 20px;"/>
|
||||
|
||||
<box style="background: blue; width: 20px; height: 10px;"/>
|
||||
|
||||
<box style="background: yellow; width: 10px; height: 10px;"/>
|
||||
|
||||
</window>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<?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"
|
||||
align="start">
|
||||
|
||||
<!-- stretch-to-fit: both width and height are considered. -->
|
||||
<stack style="background: red;">
|
||||
<box style="width: 10px; height: 10px;"/>
|
||||
<box style="-moz-stack-sizing: stretch-to-fit; width: 20px; height: 20px;"/>
|
||||
</stack>
|
||||
|
||||
<!-- ignore-horizontal: width is not considered, height is considered. -->
|
||||
<stack style="background: green;">
|
||||
<box style="width: 10px; height: 10px;"/>
|
||||
<box style="-moz-stack-sizing: ignore-horizontal; width: 20px; height: 20px;"/>
|
||||
</stack>
|
||||
|
||||
<!-- ignore-vertical: width is considered, height is not considered. -->
|
||||
<stack style="background: blue;">
|
||||
<box style="width: 10px; height: 10px;"/>
|
||||
<box style="-moz-stack-sizing: ignore-vertical; width: 20px; height: 20px;"/>
|
||||
</stack>
|
||||
|
||||
<!-- ignore: neither width or height are considered. -->
|
||||
<stack style="background: yellow;">
|
||||
<box style="width: 10px; height: 10px;"/>
|
||||
<box style="-moz-stack-sizing: ignore; width: 20px; height: 20px;"/>
|
||||
</stack>
|
||||
|
||||
</window>
|
||||
|
|
@ -8,7 +8,6 @@ const VALUES = [
|
|||
"-moz-grid",
|
||||
"-moz-grid-group",
|
||||
"-moz-grid-line",
|
||||
"-moz-stack",
|
||||
"-moz-deck",
|
||||
"-moz-popup",
|
||||
"-moz-groupbox",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ const NON_CONTENT_ACCESSIBLE_VALUES = {
|
|||
"-moz-grid",
|
||||
"-moz-grid-group",
|
||||
"-moz-grid-line",
|
||||
"-moz-stack",
|
||||
"-moz-deck",
|
||||
"-moz-popup",
|
||||
"-moz-groupbox",
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ skip-if = os == 'linux' # No native mousedown event on Linux
|
|||
[test_popupZoom.xul]
|
||||
[test_resizer.xul]
|
||||
skip-if = (verify && (os == 'win'))
|
||||
[test_stack.xul]
|
||||
[test_submenuClose.xul]
|
||||
[test_windowminmaxsize.xul]
|
||||
[test_resizer_incontent.xul]
|
||||
|
|
|
|||
|
|
@ -1,327 +0,0 @@
|
|||
<?xml version="1.0"?>
|
||||
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
|
||||
|
||||
<window align="start" title="XUL stack tests" onload="runTest()"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
|
||||
|
||||
<!-- a * before an expected value means an offset from the right or bottom edge -->
|
||||
<stack id="stack">
|
||||
<hbox id="left-top" left="10" top="12" width="20" height="24"
|
||||
expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"
|
||||
stackwidth="30" stackheight="36"/>
|
||||
<hbox id="start-top" start="10" top="12" width="20" height="24"
|
||||
expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"
|
||||
stackwidth="30" stackheight="36"/>
|
||||
<hbox id="right-bottom" right="10" bottom="12" width="20" height="24"
|
||||
expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12"
|
||||
stackwidth="30" stackheight="36"/>
|
||||
<hbox id="end-bottom" end="10" bottom="12" width="20" height="24"
|
||||
expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12"
|
||||
stackwidth="30" stackheight="36"/>
|
||||
<hbox id="left-bottom" left="18" bottom="15" width="16" height="19"
|
||||
expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15"
|
||||
stackwidth="34" stackheight="34"/>
|
||||
<hbox id="start-bottom" start="18" bottom="15" width="16" height="19"
|
||||
expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15"
|
||||
stackwidth="34" stackheight="34"/>
|
||||
<hbox id="right-top" right="5" top="8" width="10" height="11"
|
||||
expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19"
|
||||
stackwidth="15" stackheight="19"/>
|
||||
<hbox id="end-top" end="5" top="8" width="10" height="11"
|
||||
expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19"
|
||||
stackwidth="15" stackheight="19"/>
|
||||
<hbox id="left-right" left="12" right="9" width="15" height="6"
|
||||
expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
|
||||
stackwidth="36" stackheight="6"/>
|
||||
<hbox id="start-right" start="12" right="9" width="15" height="6"
|
||||
expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
|
||||
stackwidth="36" stackheight="6"/>
|
||||
<hbox id="left-end" start="12" end="9" width="15" height="6"
|
||||
expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
|
||||
stackwidth="36" stackheight="6"/>
|
||||
<hbox id="start-end" start="12" end="9" width="15" height="6"
|
||||
expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
|
||||
stackwidth="36" stackheight="6"/>
|
||||
<hbox id="top-bottom" top="20" bottom="39" width="15" height="6"
|
||||
expectedleft="0" expectedtop="20" expectedright="*0" expectedbottom="*39"
|
||||
stackwidth="15" stackheight="65"/>
|
||||
<hbox id="left-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
|
||||
left="16" top="20" right="20" bottom="35" width="7" height="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="43" stackheight="63"/>
|
||||
<hbox id="start-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
|
||||
start="16" top="20" right="20" bottom="35" width="7" height="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="43" stackheight="63"/>
|
||||
<hbox id="left-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
|
||||
left="16" top="20" end="20" bottom="35" width="7" height="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="43" stackheight="63"/>
|
||||
<hbox id="start-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
|
||||
start="16" top="20" end="20" bottom="35" width="7" height="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="43" stackheight="63"/>
|
||||
<hbox id="left-right-top-bottom-nosize" left="16" top="20" right="20" bottom="35"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="36" stackheight="55"/>
|
||||
<hbox id="start-right-top-bottom-nosize" start="16" top="20" right="20" bottom="35"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="36" stackheight="55"/>
|
||||
<hbox id="left-end-top-bottom-nosize" left="16" top="20" end="20" bottom="35"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="36" stackheight="55"/>
|
||||
<hbox id="start-end-top-bottom-nosize" start="16" top="20" end="20" bottom="35"
|
||||
expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="36" stackheight="55"/>
|
||||
<hbox id="none" width="10" height="12" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
|
||||
stackwidth="10" stackheight="12"/>
|
||||
<hbox id="none-nosize" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
|
||||
stackwidth="0" stackheight="0"/>
|
||||
<hbox id="style-left-right-top-bottom"
|
||||
style="left: 17px; top: 20px;" right="20" bottom="35" width="7" height="8"
|
||||
expectedleft="*27" expectedtop="*43" expectedright="*20" expectedbottom="*35"
|
||||
stackwidth="27" stackheight="43"/>
|
||||
<hbox id="style-left-right-top-bottom-nosize"
|
||||
style="left: 16px; top: 20px; right: 20px; bottom: 35px;"
|
||||
expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
|
||||
stackwidth="0" stackheight="0"/>
|
||||
<hbox id="left-large-right" left="20" right="1000" height="6"
|
||||
expectedleft="20" expectedtop="0" expectedright="20" expectedbottom="*0"
|
||||
stackwidth="1020" stackheight="6"/>
|
||||
<hbox id="left-top-with-margin" left="8" top="17" width="20" height="24"
|
||||
style="margin: 1px 2px 3px 4px;"
|
||||
expectedleft="12" expectedtop="18" expectedright="32" expectedbottom="42"
|
||||
stackwidth="34" stackheight="45"/>
|
||||
<hbox id="right-bottom-with-margin" right="6" bottom="15" width="10" height="14"
|
||||
style="margin: 1px 2px 3px 4px;"
|
||||
expectedleft="*18" expectedtop="*32" expectedright="*8" expectedbottom="*18"
|
||||
stackwidth="22" stackheight="33"/>
|
||||
<hbox id="left-top-right-bottom-with-margin" left="14" right="6" top="8" bottom="15" width="10" height="14"
|
||||
style="margin: 1px 2px 3px 4px;"
|
||||
expectedleft="18" expectedtop="9" expectedright="*8" expectedbottom="*18"
|
||||
stackwidth="36" stackheight="41"/>
|
||||
<hbox id="none-with-margin"
|
||||
style="margin: 1px 2px 3px 4px;"
|
||||
expectedleft="4" expectedtop="1" expectedright="*2" expectedbottom="*3"
|
||||
stackwidth="6" stackheight="4"/>
|
||||
</stack>
|
||||
|
||||
<stack id="stack-with-size" width="12" height="14">
|
||||
<hbox id="left-top-with-stack-size" left="10" top="12" width="20" height="24"
|
||||
expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"/>
|
||||
</stack>
|
||||
|
||||
<stack id="stack-with-start-end" width="30">
|
||||
<hbox id="start-with-start-end" start="10" top="12" width="20" height="24"
|
||||
expectedstart="10" expectedend="30"/>
|
||||
<hbox id="end-width-start-end" end="5" top="12" width="20" height="24"
|
||||
expectedstart="5" expectedend="25"/>
|
||||
<hbox id="start-end-width-start-end" start="12" end="9" width="20" top="12" height="24"
|
||||
expectedstart="12" expectedend="21"/>
|
||||
</stack>
|
||||
|
||||
<stack id="stack-with-border"
|
||||
style="border-left: 4px solid black; border-top: 2px solid black; border-right: 1px solid black; border-bottom: 3px solid black;">
|
||||
<hbox id="left-top-with-border" left="10" top="14" width="20" height="24"
|
||||
expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/>
|
||||
<hbox id="start-top-with-border" start="10" top="14" width="20" height="24"
|
||||
expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/>
|
||||
<hbox id="right-bottom-with-border" right="5" bottom="8" width="6" height="10"
|
||||
expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="end-bottom-with-border" end="5" bottom="8" width="6" height="10"
|
||||
expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="left-top-right-bottom-with-border" left="12" right="5" top="18" bottom="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="start-top-right-bottom-with-border" start="12" right="5" top="18" bottom="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="left-top-end-bottom-with-border" left="12" end="5" top="18" bottom="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="start-top-end-bottom-with-border" start="12" end="5" top="18" bottom="8"
|
||||
expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
|
||||
<hbox id="none-with-with-border"
|
||||
expectedleft="4" expectedtop="2" expectedright="*1" expectedbottom="*3"/>
|
||||
</stack>
|
||||
|
||||
<stack id="stack-dyn"/>
|
||||
<stack id="stack-dyn-sized" width="12" height="14"/>
|
||||
|
||||
<body xmlns="http://www.w3.org/1999/xhtml"/>
|
||||
|
||||
<script><![CDATA[
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
|
||||
var stackRect;
|
||||
var dynStack;
|
||||
|
||||
function compareSide(child, actual, side, dyn, direction)
|
||||
{
|
||||
var clientRect = child.getBoundingClientRect();
|
||||
var vertical = (side == "top" || side == "bottom");
|
||||
var expectedval = child.getAttribute("expected" + side);
|
||||
if (expectedval.indexOf("*") == 0)
|
||||
expectedval = (vertical ? stackRect.bottom : stackRect.right) - Number(expectedval.substring(1));
|
||||
else if (direction == "rtl")
|
||||
expectedval = (vertical ? stackRect.top : -stackRect.width + clientRect.right + clientRect.left) + Number(expectedval);
|
||||
else
|
||||
expectedval = (vertical ? stackRect.top : stackRect.left) + Number(expectedval);
|
||||
|
||||
is(+actual, expectedval, child.id + " " + side + (dyn ? " dynamic" : ""));
|
||||
}
|
||||
|
||||
function runTest()
|
||||
{
|
||||
runTestForStack("stack", false);
|
||||
runTestForStack("stack-with-size", false);
|
||||
runTestForStartEndAttributes("stack-with-start-end", "ltr");
|
||||
runTestForStartEndAttributes("stack-with-start-end", "rtl");
|
||||
|
||||
var stackWithSize = $("stack-with-size");
|
||||
|
||||
var sizedStackRect = stackWithSize.getBoundingClientRect();
|
||||
is(sizedStackRect.width, 30, "stack size stretched width");
|
||||
is(sizedStackRect.height, 36, "stack size stretched height");
|
||||
|
||||
// set -moz-stack-sizing: ignore and ensure that the stack does not grow
|
||||
// to include the child
|
||||
var item = $("left-top-with-stack-size");
|
||||
item.style.MozStackSizing = "ignore";
|
||||
var parent = item.parentNode;
|
||||
parent.removeChild(item);
|
||||
parent.appendChild(item);
|
||||
|
||||
sizedStackRect = stackWithSize.getBoundingClientRect();
|
||||
is(sizedStackRect.width, 12, "stack size not stretched width");
|
||||
is(sizedStackRect.height, 14, "stack size not stretched height");
|
||||
|
||||
testPositionChanges(stackWithSize, true);
|
||||
item.style.MozStackSizing = "";
|
||||
testPositionChanges(stackWithSize, false);
|
||||
|
||||
// now test adding stack children dynamically to ensure that
|
||||
// the size of the stack adjusts accordingly
|
||||
dynStack = $("stack-dyn");
|
||||
runTestForStack("stack", true);
|
||||
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
function runTestForStartEndAttributes(stackid, aDirection)
|
||||
{
|
||||
// Change the direction of the layout to RTL to ensure start/end are
|
||||
// working as expected
|
||||
var stack = $(stackid);
|
||||
stack.style.direction = aDirection;
|
||||
|
||||
var stackRect = stack.getBoundingClientRect();
|
||||
var children = stack.childNodes;
|
||||
for (var c = children.length - 1; c >= 0; c--) {
|
||||
var child = children[c];
|
||||
|
||||
// do tests only for elements that have a rtl-enabled mode
|
||||
if (!child.hasAttribute("start") && !child.hasAttribute("end"))
|
||||
continue;
|
||||
|
||||
var childrect = child.getBoundingClientRect();
|
||||
compareSide(child, childrect.right, "end", false, aDirection);
|
||||
compareSide(child, childrect.left, "start", false, aDirection);
|
||||
}
|
||||
|
||||
// Reset the direction
|
||||
stack.style.direction = "ltr";
|
||||
}
|
||||
|
||||
function runTestForStack(stackid, dyn)
|
||||
{
|
||||
var stack = $(stackid);
|
||||
if (!dyn)
|
||||
stackRect = stack.getBoundingClientRect();
|
||||
var children = stack.childNodes;
|
||||
for (var c = children.length - 1; c >= 0; c--) {
|
||||
var child = children[c];
|
||||
if (dyn) {
|
||||
// for dynamic tests, get the size after appending the child as the
|
||||
// stack size will be effected by it
|
||||
dynStack.appendChild(child);
|
||||
stackRect = dynStack.getBoundingClientRect();
|
||||
is(String(stackRect.width), child.getAttribute("stackwidth"), child.id + " stack width" + (dyn ? " dynamic" : ""));
|
||||
is(String(stackRect.height), child.getAttribute("stackheight"), child.id + " stack height" + (dyn ? " dynamic" : ""));
|
||||
}
|
||||
|
||||
var childrect = child.getBoundingClientRect();
|
||||
compareSide(child, childrect.left, "left", dyn);
|
||||
compareSide(child, childrect.top, "top", dyn);
|
||||
compareSide(child, childrect.right, "right", dyn);
|
||||
compareSide(child, childrect.bottom, "bottom", dyn);
|
||||
if (dyn)
|
||||
dynStack.removeChild(child);
|
||||
}
|
||||
}
|
||||
|
||||
function testPositionChanges(stack, ignoreStackSizing)
|
||||
{
|
||||
var add = ignoreStackSizing ? " ignore stack sizing" : "";
|
||||
|
||||
// ensure that changing left/top/right/bottom/start/end works
|
||||
var stackchild = document.getElementById("left-top-with-stack-size");
|
||||
stackchild.left = 18;
|
||||
is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 18, "left changed" + add);
|
||||
is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 38, "left changed stack width" + add);
|
||||
|
||||
stackchild.left = "";
|
||||
stackchild.setAttribute("start", "19");
|
||||
is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 19, "left changed" + add);
|
||||
is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 39, "left changed stack width" + add);
|
||||
stackchild.removeAttribute("start");
|
||||
stackchild.left = 18;
|
||||
|
||||
stackchild.top = 22;
|
||||
is(stackchild.getBoundingClientRect().top, stack.getBoundingClientRect().top + 22, "top changed" + add);
|
||||
is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 46, "left changed stack height" + add);
|
||||
|
||||
stackchild.setAttribute("right", "6");
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add);
|
||||
// the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset
|
||||
// from the right edge in this case
|
||||
if (!ignoreStackSizing)
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6,
|
||||
"right changed from right edge" + add);
|
||||
is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 24, "right changed stack width" + add);
|
||||
|
||||
stackchild.removeAttribute("right");
|
||||
stackchild.setAttribute("end", "7");
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add);
|
||||
// the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset
|
||||
// from the right edge in this case
|
||||
if (!ignoreStackSizing)
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 7,
|
||||
"right changed from right edge" + add);
|
||||
is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 25, "right changed stack width" + add);
|
||||
stackchild.removeAttribute("end");
|
||||
stackchild.setAttribute("right", "6");
|
||||
|
||||
stackchild.setAttribute("bottom", "9");
|
||||
is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().top + 22, "bottom changed" + add);
|
||||
is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 31, "bottom changed stack height" + add);
|
||||
if (!ignoreStackSizing)
|
||||
is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().bottom - 9,
|
||||
"right changed from bottom edge" + add);
|
||||
|
||||
stackchild.left = "";
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, "right changed" + add);
|
||||
is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 26, "right changed no left stack width" + add);
|
||||
|
||||
stackchild.removeAttribute("right");
|
||||
is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right, "right cleared" + add);
|
||||
is(stack.getBoundingClientRect().width, 12, "right cleared stack height" + add);
|
||||
|
||||
// reset the values
|
||||
stackchild.removeAttribute("bottom");
|
||||
stackchild.left = 10;
|
||||
stackchild.top = 12;
|
||||
}
|
||||
|
||||
|
||||
]]></script>
|
||||
</window>
|
||||
|
|
@ -10,15 +10,15 @@
|
|||
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
|
||||
|
||||
<stack flex="1">
|
||||
<label id="topleft" value="Top Left Corner" left="15" top="15"/>
|
||||
<label id="topright" value="Top Right" right="15" top="15"/>
|
||||
<label id="bottomleft" value="Bottom Left Corner" left="15" bottom="15"/>
|
||||
<label id="bottomright" value="Bottom Right" right="15" bottom="15"/>
|
||||
<label id="topleft" value="Top Left Corner" style="justify-self: left; margin-left: 15px; align-self: start; margin-top: 15px;"/>
|
||||
<label id="topright" value="Top Right" style="justify-self: right; margin-right: 15px; align-self: start; margin-top: 15px;"/>
|
||||
<label id="bottomleft" value="Bottom Left Corner" style="justify-self: left; margin-left: 15px; align-self: end; margin-bottom: 15px;"/>
|
||||
<label id="bottomright" value="Bottom Right" style="justify-self: right; margin-right: 15px; align-self: end; margin-bottom: 15px;"/>
|
||||
<!-- Our SimpleTest/TestRunner.js runs tests inside an iframe which sizes are W=500 H=300.
|
||||
'left' and 'top' values need to be set so that the panel (popup) has enough room to display on its 4 sides. -->
|
||||
<label id="middle" value="+/- Centered" left="225" top="135"/>
|
||||
<label id="middle" value="+/- Centered" style="justify-self: left; margin-left: 225px; align-self: start; margin-top: 135px;"/>
|
||||
<iframe id="frame" type="content"
|
||||
src="data:text/html,<input id='input'>" width="100" height="100" left="225" top="120"/>
|
||||
src="data:text/html,<input id='input'>" style="width: 100px; height: 100px; justify-self: left; margin-left: 225px; align-self: start; margin-top: 120px;"/>
|
||||
</stack>
|
||||
|
||||
<panel id="panel" type="arrow" animate="false"
|
||||
|
|
@ -168,14 +168,23 @@ function* nextTest()
|
|||
|
||||
// switch to rtl mode
|
||||
document.documentElement.style.direction = "rtl";
|
||||
$("topleft").setAttribute("right", "15");
|
||||
$("topright").setAttribute("left", "15");
|
||||
$("bottomleft").setAttribute("right", "15");
|
||||
$("bottomright").setAttribute("left", "15");
|
||||
$("topleft").removeAttribute("left");
|
||||
$("topright").removeAttribute("right");
|
||||
$("bottomleft").removeAttribute("left");
|
||||
$("bottomright").removeAttribute("right");
|
||||
|
||||
$("topleft").style.marginRight = "15px";
|
||||
$("topleft").style.justifySelf = "right";
|
||||
|
||||
$("topright").style.marginLeft = "15px";
|
||||
$("topright").style.justifySelf = "left";
|
||||
|
||||
$("bottomleft").style.marginRight = "15px";
|
||||
$("bottomleft").style.justifySelf = "right";
|
||||
|
||||
$("bottomright").style.marginLeft = "15px";
|
||||
$("bottomright").style.justifySelf = "left";
|
||||
|
||||
$("topleft").style.removeProperty("marginLeft");
|
||||
$("topright").style.removeProperty("marginRight");
|
||||
$("bottomleft").style.removeProperty("marginLeft");
|
||||
$("bottomright").style.removeProperty("marginRight");
|
||||
}
|
||||
|
||||
// Test that a transition occurs when opening or closing the popup.
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<toolbarbutton type="menu" id="toolbarmenu" height="200">
|
||||
<menupopup id="menupopup" onpopupshowing="eventReceived('popupshowing'); return false;"/>
|
||||
<stack>
|
||||
<button width="100" left="0" top="0" height="30" allowevents="true"
|
||||
<button style="width: 100px; height: 30px; margin-left: 0; margin-top: 0;" allowevents="true"
|
||||
onclick="eventReceived('clickbutton1'); return false;"/>
|
||||
<button width="100" left="70" top="0" height="30"
|
||||
<button style="width: 100px; height: 30px; margin-left: 70px; margin-top: 0;"
|
||||
onclick="eventReceived('clickbutton2'); return false;"/>
|
||||
</stack>
|
||||
</toolbarbutton>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<scrollbox>
|
||||
<stack>
|
||||
<box left="50" top="50" style="opacity:0.3;">p </box>
|
||||
<box style="margin-top: 50px; margin-left: 50px; opacity: 0.3;">p </box>
|
||||
</stack>
|
||||
</scrollbox>
|
||||
</window>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче