diff options
Diffstat (limited to 'layout/reftests/box')
21 files changed, 681 insertions, 0 deletions
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 000000000..fbeaabf32 --- /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 000000000..1f6ee21a7 --- /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 000000000..b19072382 --- /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 000000000..553c9fc1b --- /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 000000000..78bb84fa7 --- /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 000000000..d3ef61188 --- /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 000000000..aa3013f53 --- /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 000000000..16c724e8a --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml @@ -0,0 +1,43 @@ +<!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>2</div> + <div>1</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 000000000..c5447e6db --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml @@ -0,0 +1,43 @@ +<!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 ordinal="2">2</div> + <div ordinal="1">1</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 000000000..69c92e698 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml @@ -0,0 +1,43 @@ +<!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>2</div> + <div>1</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 000000000..cd82ba7ab --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml @@ -0,0 +1,43 @@ +<!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 ordinal="2">2</div> + <div ordinal="1">1</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 000000000..93e6683e6 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml @@ -0,0 +1,38 @@ +<!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="2" /> + <input type="text" value="1" /> + <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 000000000..241cf6c33 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml @@ -0,0 +1,39 @@ +<!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" ordinal="2" value="2" /> + <input type="text" ordinal="1" value="1" /> + <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 000000000..78281ceb8 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.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%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" value="2" /> + <input type="text" value="1" /> + <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 000000000..aa8dbd281 --- /dev/null +++ b/layout/reftests/box/flexbox-attributes-no-input-vertical.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%; +} + +body > div { + display: -moz-box; + background: yellow; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +]]> +</style> +</head> +<body> +<div> + <input type="text" ordinal="2" value="2" /> + <input type="text" ordinal="1" value="1" /> + <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 000000000..8e62ec181 --- /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 000000000..c5892758d --- /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 000000000..de5abf137 --- /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 000000000..dad64a157 --- /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-stylo.list b/layout/reftests/box/reftest-stylo.list new file mode 100644 index 000000000..e8328f173 --- /dev/null +++ b/layout/reftests/box/reftest-stylo.list @@ -0,0 +1,14 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== flexbox-abspos-container-1a.html flexbox-abspos-container-1a.html +== flexbox-abspos-container-1b.html flexbox-abspos-container-1b.html +== flexbox-abspos-container-1c.html flexbox-abspos-container-1c.html +== flexbox-abspos-container-1d.html flexbox-abspos-container-1d.html +== flexbox-abspos-container-2.html flexbox-abspos-container-2.html +== flexbox-attributes-no-box-horizontal.xhtml flexbox-attributes-no-box-horizontal.xhtml +== flexbox-attributes-no-box-vertical.xhtml flexbox-attributes-no-box-vertical.xhtml +skip-if(B2G||Mulet) == flexbox-attributes-no-input-horizontal.xhtml flexbox-attributes-no-input-horizontal.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == flexbox-attributes-no-input-vertical.xhtml flexbox-attributes-no-input-vertical.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +== flexbox-child-is-abspos-container-1.html flexbox-child-is-abspos-container-1.html +== flexbox-child-is-abspos-container-2.html flexbox-child-is-abspos-container-2.html diff --git a/layout/reftests/box/reftest.list b/layout/reftests/box/reftest.list new file mode 100644 index 000000000..c1056b78e --- /dev/null +++ b/layout/reftests/box/reftest.list @@ -0,0 +1,11 @@ +== 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 |