diff options
Diffstat (limited to 'layout/reftests/box')
22 files changed, 736 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/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..3a4badf609 --- /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 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..4f12b9a619 --- /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 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..f0dcc5f386 --- /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" 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..a2a5d3805d --- /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" 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..2e710e9ab5 --- /dev/null +++ b/layout/reftests/box/reftest.list @@ -0,0 +1,13 @@ +test-pref(layout.css.xul-box-display-values.content.enabled,true) == box-as-grid-or-flex-item-1.html box-as-grid-or-flex-item-1-ref.html + +== 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 |