diff options
Diffstat (limited to 'layout/reftests/box')
33 files changed, 991 insertions, 0 deletions
diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html new file mode 100644 index 0000000000..d6b51e60bf --- /dev/null +++ b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>Reference for bug 1580302</title> +<style> + .grid, .flex { + width: 60px; + height: 60px; + border: 1px solid black; + } + .grid { display: grid; } + .flex { display: flex; } + .fCol { flex-direction: column; } + + .item { + background: lightblue; + } + .flexible { + flex: 1; + } +</style> +<body> + <!-- The item should fill the grid here (by virtue of the default-stretchy + behavior of justify-items and align-items): --> + <div class="grid"> + <div class="item">e</div> + </div> + + <!-- For the rest, the item should fill the flex container in the cross axis, + and if it's flexible, also fill the container in the main axis. --> + <div class="flex"> + <div class="item">e</div> + </div> + <div class="flex"> + <div class="item flexible">e</div> + </div> + <div class="flex fCol"> + <div class="item">e</div> + </div> + <div class="flex fCol"> + <div class="item flexible">e</div> + </div> +</body> diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1.html b/layout/reftests/box/box-as-grid-or-flex-item-1.html new file mode 100644 index 0000000000..6eacbd94a3 --- /dev/null +++ b/layout/reftests/box/box-as-grid-or-flex-item-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>Test for bug 1580302</title> +<style> + .grid, .flex { + width: 60px; + height: 60px; + border: 1px solid black; + } + .grid { display: grid; } + .flex { display: flex; } + .fCol { flex-direction: column; } + + .item { + display: -moz-box; + background: lightblue; + } + .flexible { + flex: 1; + } +</style> +<body> + <!-- The item should fill the grid here (by virtue of justify-items/align-items + default behavior): --> + <div class="grid"> + <div class="item">e</div> + </div> + + <!-- For the rest, the item should fill the flex container in the cross axis, + and if it's flexible, also fill the container in the main axis. --> + <div class="flex"> + <div class="item">e</div> + </div> + <div class="flex"> + <div class="item flexible">e</div> + </div> + <div class="flex fCol"> + <div class="item">e</div> + </div> + <div class="flex fCol"> + <div class="item flexible">e</div> + </div> +</body> diff --git a/layout/reftests/box/flex-emulation-1-ref.xhtml b/layout/reftests/box/flex-emulation-1-ref.xhtml new file mode 100644 index 0000000000..31603dcf40 --- /dev/null +++ b/layout/reftests/box/flex-emulation-1-ref.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + :root { + -moz-box-layout: flex; + } + hbox { + width: 100px; + } + </style> + </head> + <body> + <xul:hbox> + <xul:description>X</xul:description> + <xul:description flex="1" style="background: blue">X</xul:description> + </xul:hbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-1.xhtml b/layout/reftests/box/flex-emulation-1.xhtml new file mode 100644 index 0000000000..ef3b22f9d3 --- /dev/null +++ b/layout/reftests/box/flex-emulation-1.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + hbox { + width: 100px; + } + </style> + </head> + <body> + <xul:hbox> + <xul:description>X</xul:description> + <xul:description flex="1" style="background: blue">X</xul:description> + </xul:hbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-2-ref.xhtml b/layout/reftests/box/flex-emulation-2-ref.xhtml new file mode 100644 index 0000000000..260d4ca115 --- /dev/null +++ b/layout/reftests/box/flex-emulation-2-ref.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + hbox { + width: 700px; + -moz-box-layout: flex; + } + input { + -moz-box-flex: 1; + } + </style> + </head> + <body> + <xul:hbox> + <xul:description>X</xul:description> + <html:input flex="1" style="background: blue" value="X"/> + </xul:hbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-2.xhtml b/layout/reftests/box/flex-emulation-2.xhtml new file mode 100644 index 0000000000..3c1c71dcca --- /dev/null +++ b/layout/reftests/box/flex-emulation-2.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + hbox { + width: 700px; + } + input { + -moz-box-flex: 1; + } + </style> + </head> + <body> + <xul:hbox> + <xul:description>X</xul:description> + <html:input flex="1" style="background: blue" value="X"/> + </xul:hbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-3-notref.xhtml b/layout/reftests/box/flex-emulation-3-notref.xhtml new file mode 100644 index 0000000000..cf59aed971 --- /dev/null +++ b/layout/reftests/box/flex-emulation-3-notref.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + vbox { + /* Handling of hypothetical positions differ between moz-box and flex + emulation */ + -moz-box-layout: flex; + } + </style> + </head> + <body> + <xul:vbox> + <xul:description>X</xul:description> + <xul:description style="position: absolute">Y</xul:description> + <xul:description>Z</xul:description> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-3.xhtml b/layout/reftests/box/flex-emulation-3.xhtml new file mode 100644 index 0000000000..e045194ef2 --- /dev/null +++ b/layout/reftests/box/flex-emulation-3.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <body> + <xul:vbox> + <xul:description>X</xul:description> + <xul:description style="position: absolute">Y</xul:description> + <xul:description>Z</xul:description> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-4-ref.xhtml b/layout/reftests/box/flex-emulation-4-ref.xhtml new file mode 100644 index 0000000000..9266d680f4 --- /dev/null +++ b/layout/reftests/box/flex-emulation-4-ref.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + vbox { + height: 100px; + -moz-box-layout: flex; + } + browser { + background-color: green; + } + </style> + </head> + <body> + <xul:vbox> + <xul:browser></xul:browser> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-4.xhtml b/layout/reftests/box/flex-emulation-4.xhtml new file mode 100644 index 0000000000..54716fff81 --- /dev/null +++ b/layout/reftests/box/flex-emulation-4.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + vbox { + height: 100px; + } + browser { + background-color: green; + } + </style> + </head> + <body> + <xul:vbox> + <xul:browser></xul:browser> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-5-ref.xhtml b/layout/reftests/box/flex-emulation-5-ref.xhtml new file mode 100644 index 0000000000..aa7b6e422e --- /dev/null +++ b/layout/reftests/box/flex-emulation-5-ref.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + .scroll { + height: 100px; + width: 100px; + overflow: auto; + } + .scroll > vbox { + width: 100px; + height: 100px; + background: green; + } + .scroll > vbox[collapsed] { + border: 3px solid; + padding: 6px; + margin: 9px; + } + </style> + </head> + <body> + <xul:vbox class="scroll"> + <xul:vbox/> + <xul:vbox collapsed="true"/> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-5-ref2.xhtml b/layout/reftests/box/flex-emulation-5-ref2.xhtml new file mode 100644 index 0000000000..c3ccaf0de6 --- /dev/null +++ b/layout/reftests/box/flex-emulation-5-ref2.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + .scroll { + height: 100px; + width: 100px; + background: green; + } + </style> + </head> + <body> + <xul:vbox class="scroll"/> + </body> +</html> diff --git a/layout/reftests/box/flex-emulation-5.xhtml b/layout/reftests/box/flex-emulation-5.xhtml new file mode 100644 index 0000000000..f63aebda29 --- /dev/null +++ b/layout/reftests/box/flex-emulation-5.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <head> + <style> + :root { -moz-box-layout: flex } + .scroll { + height: 100px; + width: 100px; + overflow: auto; + } + .scroll > vbox { + width: 100px; + height: 100px; + background: green; + } + .scroll > vbox[collapsed] { + border: 3px solid; + padding: 6px; + margin: 9px; + } + </style> + </head> + <body> + <xul:vbox class="scroll"> + <xul:vbox/> + <xul:vbox collapsed="true"/> + </xul:vbox> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-1-ref.html b/layout/reftests/box/flexbox-abspos-container-1-ref.html new file mode 100644 index 0000000000..fbeaabf32a --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-1-ref.html @@ -0,0 +1,27 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-1a.html b/layout/reftests/box/flexbox-abspos-container-1a.html new file mode 100644 index 0000000000..1f6ee21a70 --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-1a.html @@ -0,0 +1,30 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase has a relatively-positioned -moz-box element, which should + form a containing block for its absolutely positioned child. --> +<html> + <head> + <style> + .box { display: -moz-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="box relpos_parent"> + <div class="abspos_child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-1b.html b/layout/reftests/box/flexbox-abspos-container-1b.html new file mode 100644 index 0000000000..b19072382a --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-1b.html @@ -0,0 +1,29 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase is the same as the -1a version, but with -moz-inline-box. --> +<html> + <head> + <style> + .box { display: -moz-inline-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="box relpos_parent"> + <div class="abspos_child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-1c.html b/layout/reftests/box/flexbox-abspos-container-1c.html new file mode 100644 index 0000000000..553c9fc1b7 --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-1c.html @@ -0,0 +1,33 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase is the same as the -1a version, but with an additional + -moz-box wrapper, so that our relatively positioned box will never get a + call to Reflow. --> +<html> + <head> + <style> + .box { display: -moz-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="box"> + <div class="box relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-1d.html b/layout/reftests/box/flexbox-abspos-container-1d.html new file mode 100644 index 0000000000..78bb84fa75 --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-1d.html @@ -0,0 +1,31 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase is the same as the -1c version, but with -moz-inline-box. --> +<html> + <head> + <style> + .box { display: -moz-inline-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="box"> + <div class="box relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-2-ref.html b/layout/reftests/box/flexbox-abspos-container-2-ref.html new file mode 100644 index 0000000000..d3ef611887 --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-2-ref.html @@ -0,0 +1,27 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + top: 10px; + width: 20px; + height: 150px; + background: purple; + } + </style> + </head> + <body> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-abspos-container-2.html b/layout/reftests/box/flexbox-abspos-container-2.html new file mode 100644 index 0000000000..aa3013f534 --- /dev/null +++ b/layout/reftests/box/flexbox-abspos-container-2.html @@ -0,0 +1,31 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase has a relatively-positioned -moz-box element, which should + form a containing block for its absolutely positioned child. Also: in + this case, the child is taller than its container. --> +<html> + <head> + <style> + .box { display: -moz-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + top: 10px; + width: 20px; + height: 150px; + background: purple; + } + </style> + </head> + <body> + <div class="box relpos_parent"> + <div class="abspos_child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml new file mode 100644 index 0000000000..31c6535877 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: horizontal; +} + +div > div { + display: -moz-box; + -moz-box-flex: 1; + border: 1px solid blue; +} + +]]> +</style> +</head> +<body> +<div> + <div>width</div> + <div>height</div> + <div>minwidth</div> + <div>minheight</div> + <div>maxwidth</div> + <div>maxheight</div> + <div>flex</div> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml new file mode 100644 index 0000000000..527758e80c --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: horizontal; +} + +div > div { + display: -moz-box; + -moz-box-flex: 1; + border: 1px solid blue; +} + +]]> +</style> +</head> +<body> +<div> + <div width="100">width</div> + <div height="100">height</div> + <div minwidth="100">minwidth</div> + <div minheight="100">minheight</div> + <div maxwidth="50">maxwidth</div> + <div maxheight="15">maxheight</div> + <div style="-moz-box-flex: 100">flex</div> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml new file mode 100644 index 0000000000..efd3620f4b --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +div > div { + display: -moz-box; + -moz-box-flex: 1; + border: 1px solid blue; +} + +]]> +</style> +</head> +<body> +<div> + <div>width</div> + <div>height</div> + <div>minwidth</div> + <div>minheight</div> + <div>maxwidth</div> + <div>maxheight</div> + <div>flex</div> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml new file mode 100644 index 0000000000..9015679f0e --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +div > div { + display: -moz-box; + -moz-box-flex: 1; + border: 1px solid blue; +} + +]]> +</style> +</head> +<body> +<div> + <div width="100">width</div> + <div height="100">height</div> + <div minwidth="100">minwidth</div> + <div minheight="100">minheight</div> + <div maxwidth="50">maxwidth</div> + <div maxheight="15">maxheight</div> + <div style="-moz-box-flex: 100">flex</div> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml new file mode 100644 index 0000000000..df80af2652 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; + pointer-events: none; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: horizontal; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" value="width" /> + <input type="text" value="height" /> + <input type="text" value="minwidth" /> + <input type="text" value="minheight" /> + <input type="text" value="maxwidth" /> + <input type="text" value="maxheight" /> + <input type="text" value="flex" /> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml new file mode 100644 index 0000000000..01a1bffa0b --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; + /* Disable pointer-events so we don't get weird hover artifacts */ + pointer-events: none; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: horizontal; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" width="100" value="width" /> + <input type="text" height="100" value="height" /> + <input type="text" minwidth="100" value="minwidth" /> + <input type="text" minheight="100" value="minheight" /> + <input type="text" maxwidth="50" value="maxwidth" /> + <input type="text" maxheight="15" value="maxheight" /> + <input type="text" style="-moz-box-flex: 100" value="flex" /> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml new file mode 100644 index 0000000000..f2192922ed --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" value="width" /> + <input type="text" value="height" /> + <input type="text" value="minwidth" /> + <input type="text" value="minheight" /> + <input type="text" value="maxwidth" /> + <input type="text" value="maxheight" /> + <input type="text" value="flex" /> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml new file mode 100644 index 0000000000..239c1e8534 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Test that XUL attributes are not supported on non-XUL elements</title> +<style type="text/css"> +<![CDATA[ + +html, body { + display: -moz-box; + margin: 0; padding: 0; + width: 100%; height: 100%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" width="100" value="width" /> + <input type="text" height="100" value="height" /> + <input type="text" minwidth="100" value="minwidth" /> + <input type="text" minheight="100" value="minheight" /> + <input type="text" maxwidth="50" value="maxwidth" /> + <input type="text" maxheight="5" value="maxheight" /> + <input type="text" style="-moz-box-flex: 100" value="flex" /> +</div> +</body> +</html> diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html new file mode 100644 index 0000000000..8e62ec1815 --- /dev/null +++ b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html @@ -0,0 +1,29 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1.html b/layout/reftests/box/flexbox-child-is-abspos-container-1.html new file mode 100644 index 0000000000..c5892758dc --- /dev/null +++ b/layout/reftests/box/flexbox-child-is-abspos-container-1.html @@ -0,0 +1,32 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase has a -moz-box element with a block as its only child, which + forms a containing block for an absolutely positioned grandchild. --> +<html> + <head> + <style> + .box { display: -moz-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 20px; + background: purple; + } + </style> + </head> + <body> + <div class="box"> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html new file mode 100644 index 0000000000..de5abf137d --- /dev/null +++ b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html @@ -0,0 +1,30 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + body { margin-top: 50px } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 130px; + background: purple; + } + </style> + </head> + <body> + <div> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2.html b/layout/reftests/box/flexbox-child-is-abspos-container-2.html new file mode 100644 index 0000000000..dad64a1579 --- /dev/null +++ b/layout/reftests/box/flexbox-child-is-abspos-container-2.html @@ -0,0 +1,34 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- This testcase has a -moz-box element with a block as its only child, which + forms a containing block for an absolutely positioned grandchild. Also, in + this case, the grandchild is taller than its parent and grandparent. --> +<html> + <head> + <style> + body { margin-top: 50px } + .box { display: -moz-box } + .relpos_parent { + position: relative; + width: 100px; + height: 100px; + background: lightblue; + } + .abspos_child { + position: absolute; + left: 30px; + bottom: 10px; + width: 20px; + height: 130px; + background: purple; + } + </style> + </head> + <body> + <div class="box"> + <div class="relpos_parent"> + <div class="abspos_child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/box/reftest.list b/layout/reftests/box/reftest.list new file mode 100644 index 0000000000..375ed6a4db --- /dev/null +++ b/layout/reftests/box/reftest.list @@ -0,0 +1,19 @@ +== chrome://reftest/content/box/box-as-grid-or-flex-item-1.html chrome://reftest/content/box/box-as-grid-or-flex-item-1-ref.html +== chrome://reftest/content/box/flex-emulation-1.xhtml chrome://reftest/content/box/flex-emulation-1-ref.xhtml +== chrome://reftest/content/box/flex-emulation-2.xhtml chrome://reftest/content/box/flex-emulation-2-ref.xhtml +!= chrome://reftest/content/box/flex-emulation-3.xhtml chrome://reftest/content/box/flex-emulation-3-notref.xhtml +== chrome://reftest/content/box/flex-emulation-4.xhtml chrome://reftest/content/box/flex-emulation-4-ref.xhtml +== chrome://reftest/content/box/flex-emulation-5.xhtml chrome://reftest/content/box/flex-emulation-5-ref.xhtml +== chrome://reftest/content/box/flex-emulation-5.xhtml chrome://reftest/content/box/flex-emulation-5-ref2.xhtml + +== flexbox-abspos-container-1a.html flexbox-abspos-container-1-ref.html +== flexbox-abspos-container-1b.html flexbox-abspos-container-1-ref.html +== flexbox-abspos-container-1c.html flexbox-abspos-container-1-ref.html +== flexbox-abspos-container-1d.html flexbox-abspos-container-1-ref.html +== flexbox-abspos-container-2.html flexbox-abspos-container-2-ref.html +== flexbox-attributes-no-box-horizontal.xhtml flexbox-attributes-no-box-horizontal-ref.xhtml +== flexbox-attributes-no-box-vertical.xhtml flexbox-attributes-no-box-vertical-ref.xhtml +== flexbox-attributes-no-input-horizontal.xhtml flexbox-attributes-no-input-horizontal-ref.xhtml +== flexbox-attributes-no-input-vertical.xhtml flexbox-attributes-no-input-vertical-ref.xhtml +== flexbox-child-is-abspos-container-1.html flexbox-child-is-abspos-container-1-ref.html +== flexbox-child-is-abspos-container-2.html flexbox-child-is-abspos-container-2-ref.html |