diff options
Diffstat (limited to '')
224 files changed, 9261 insertions, 0 deletions
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml new file mode 100644 index 0000000000..a7f0408f37 --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var c = document.getElementById("C"); + getComputedStyle(c, "").width; // flush + c.style.MozBoxOrdinalGroup = "2"; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="A" value="A" /> + <label id="C" value="C" /> + <label id="B" value="B" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml new file mode 100644 index 0000000000..6ef73bc272 --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var c = document.getElementById("C"); + getComputedStyle(c, "").width; // flush + c.style.MozBoxOrdinalGroup = "2"; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="B" value="B" style="-moz-box-ordinal-group: 2" /> + <label id="C" value="C" /> + <label id="A" value="A" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml new file mode 100644 index 0000000000..3c04293df8 --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var b = document.getElementById("B"); + getComputedStyle(b, "").width; // flush + b.style.MozBoxOrdinalGroup = "2"; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="B" value="B" /> + <label id="C" value="C" style="-moz-box-ordinal-group: 2" /> + <label id="A" value="A" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-ref.xhtml b/layout/reftests/box-ordinal/dynamic-1-ref.xhtml new file mode 100644 index 0000000000..66052d38dd --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-ref.xhtml @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <label id="A" value="A" /> + <label id="B" value="B" /> + <label id="C" value="C" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml new file mode 100644 index 0000000000..d3c444291d --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var b = document.getElementById("B"); + getComputedStyle(b, "").width; // flush + b.style.MozBoxOrdinalGroup = ""; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="A" value="A" /> + <label id="B" value="B" style="-moz-box-ordinal-group: 2" /> + <label id="C" value="C" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml new file mode 100644 index 0000000000..f2f2857342 --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var b = document.getElementById("B"); + getComputedStyle(b, "").width; // flush + b.style.MozBoxOrdinalGroup = ""; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="C" value="C" style="-moz-box-ordinal-group: 2" /> + <label id="A" value="A" /> + <label id="B" value="B" style="-moz-box-ordinal-group: 2" /> +</window> diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml new file mode 100644 index 0000000000..1fb09c05be --- /dev/null +++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!DOCTYPE window> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()"> + <script type="application/javascript"><![CDATA[ + + function run() { + var a = document.getElementById("A"); + getComputedStyle(a, "").width; // flush + a.style.MozBoxOrdinalGroup = ""; + document.documentElement.removeAttribute("class"); + } + + ]]></script> + <label id="C" value="C" style="-moz-box-ordinal-group: 2" /> + <label id="A" value="A" style="-moz-box-ordinal-group: 2" /> + <label id="B" value="B" /> +</window> diff --git a/layout/reftests/box-ordinal/reftest.list b/layout/reftests/box-ordinal/reftest.list new file mode 100644 index 0000000000..70f675571f --- /dev/null +++ b/layout/reftests/box-ordinal/reftest.list @@ -0,0 +1,6 @@ +== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml +== chrome://reftest/content/box-ordinal/dynamic-1-add-to-one-grouped.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml +== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml +== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml +== chrome://reftest/content/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml +== chrome://reftest/content/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml diff --git a/layout/reftests/box-properties/CSS21-t100301-ref.xhtml b/layout/reftests/box-properties/CSS21-t100301-ref.xhtml new file mode 100644 index 0000000000..18d1c21816 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100301-ref.xhtml @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: Inline, non-replaced elements (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-width" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + + html { background: white; } + + body { + width: 100px; height: 100px; + border: 10px solid lime; background: green; + } + + + ]]></style> + </head> + <body> + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100301.xhtml b/layout/reftests/box-properties/CSS21-t100301.xhtml new file mode 100644 index 0000000000..e9d61cac85 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100301.xhtml @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: Inline, non-replaced elements</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-width" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + + @font-face { + src: url(../fonts/Ahem.ttf); + font-family: Ahem; + } + + html { background: white; } + + body { + width: 100px; height: 100px; + border: 10px solid lime; background: red; + font: 20px/1 Ahem; + } + + span { background: red; color: green; } + + .X::before, .space::before { background:green; color:transparent; } + .X::before { content:"X"; } + .space::before { content:" "; } + + ]]></style> + </head> + <body> + + <!-- First row --> + <!-- The width property does not apply --> + <!-- check padding-left and border-right too --> + <span style="width: 1px"><span class="X"></span></span + ><span style="width: 200px"><span class="X"></span></span + ><span style="width: 10px; padding-left: 10px;background:green"><span class="X"></span></span + ><span style="border-right: 10px solid green; width: 40px"><span class="X"></span></span> + + <!-- Second row --> + <!-- auto values for margin-left and margin-right are zero --> + <span style="background:green" + ><span style="margin-right: auto"><span class="X"></span></span + ><span style="margin-left: 5px"><span class="X"></span></span + ><span style="margin-left:auto;background:green"><span class="space"></span></span + ><span style="margin-right: 15px"><span class="X"></span></span + ></span> + + <!-- Third row --> + <!-- auto values for left and right are 0, and other values don't + do anything either, unless we have position:relative --> + <span style="left: auto"><span class="X"></span></span + ><span style="left:8px"><span class="X"></span></span + ><span style="right:73px"><span class="X"></span></span + ><span style="right:auto"><span class="X"></span></span + ><span style="background:transparent;color:red"><span class="X"></span><span style="position:relative;right:20px"><span class="X"></span></span></span> + + <!-- Fourth row --> + <!-- toss in some negative and adjacent margins --> + <span style="margin-right: -5px;color:red;background:red"><span class="X"></span></span + ><span style="margin-left: -15px"><span class="X"></span></span + ><span style="background:green" + ><span style="margin-right:25px"><span class="X"></span></span + ><span style="margin-left: 15px"><span class="X"></span></span + ></span> + + <!-- Fifth row --> + <!-- border and padding and margin --> + <span style="margin-left:15px; margin-right:348px" + ><span style="background: green; margin-left:-15px; border-left: 15px solid; padding-left: 25px;padding-right: 8px;border-right:32px solid;"><span class="X"></span></span + ></span> + + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png Binary files differnew file mode 100644 index 0000000000..fdb4869786 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png Binary files differnew file mode 100644 index 0000000000..d4809b3648 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png Binary files differnew file mode 100644 index 0000000000..300a54fa14 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png Binary files differnew file mode 100644 index 0000000000..5eec683712 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png Binary files differnew file mode 100644 index 0000000000..6e1a1021fa --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png Binary files differnew file mode 100644 index 0000000000..6cb5c22547 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png Binary files differnew file mode 100644 index 0000000000..f52d6def06 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png Binary files differnew file mode 100644 index 0000000000..8aae25ca25 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png Binary files differnew file mode 100644 index 0000000000..613bfe782e --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png Binary files differnew file mode 100644 index 0000000000..434ef98fa5 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png Binary files differnew file mode 100644 index 0000000000..dd98e59448 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png Binary files differnew file mode 100644 index 0000000000..f3dc66a6ef --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png diff --git a/layout/reftests/box-properties/CSS21-t100303-make-images.html b/layout/reftests/box-properties/CSS21-t100303-make-images.html new file mode 100644 index 0000000000..c397e26af1 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-make-images.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> + + var gWidth = 1024; + var gHeight = 1; + var gBarriers = [ 170, 334, 340, 344, 350, 458 ]; + + var gColors = [ "green", "red" ]; + + function append_url(filename, contents_url) { + var p = document.createElement("p"); + var a = document.createElement("a"); + a.href = contents_url; + var t = document.createTextNode("CSS21-t100303-" + filename); + a.appendChild(t); + p.appendChild(a); + document.body.appendChild(p); + } + + function run() { + var canvas = document.getElementById("canvas"); + var cx = canvas.getContext("2d"); + for (var i in gBarriers) { + var barrier = gBarriers[i]; + + cx.fillStyle = gColors[1]; + cx.fillRect(0, 0, gWidth, gHeight); + cx.fillStyle = gColors[0]; + cx.fillRect(0, 0, barrier, gHeight); + append_url(gColors[0] + "-in-" + barrier + "px.png", + canvas.toDataURL("image/png")); + + cx.fillStyle = gColors[0]; + cx.fillRect(0, 0, gWidth, gHeight); + cx.fillStyle = gColors[1]; + cx.fillRect(0, 0, barrier, gHeight); + append_url(gColors[0] + "-outside-" + barrier + "px.png", + canvas.toDataURL("image/png")); + } + } + + </script> +</head> +<body onload="run()"> + +<canvas width="1024" height="1" id="canvas"></canvas> + +</body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100303-ref.xhtml b/layout/reftests/box-properties/CSS21-t100303-ref.xhtml new file mode 100644 index 0000000000..aff2b921eb --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-ref.xhtml @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + body { direction: ltr; } + + body > div { + margin-left: 3px; + width: 669px; + height: 96px; + background: green; + } + ]]></style> + </head> + <body> + + <div></div> + + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100303-simple.xhtml b/layout/reftests/box-properties/CSS21-t100303-simple.xhtml new file mode 100644 index 0000000000..94afe061aa --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303-simple.xhtml @@ -0,0 +1,202 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title> + <!-- + + THIS IS NOT THE FULL TEST. IT HAS BEEN MODIFIED TO WORK + AROUND THE FOLLOWING BUG: + https://bugzilla.mozilla.org/show_bug.cgi?id=423306 + BY MAKING THE INTERMEDIATE ELEMENT NOT HAVE CHANGING 'direction' + + --> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + body { direction: ltr; } + div { height: 1px; } + + /* containing block */ + body > div { + margin: 0 17px 0 3px; + border: medium solid transparent; + border-width: 0 154px 0 157px; + padding: 0 6px 0 2px; + width: 350px; + } + /* parent that is not containing block */ + /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */ + /* body > div > div { display: inline; } */ + /* test element */ + body > div > div > div { + margin: 0 10px 0 6px; + border: medium solid transparent; + border-width: 0 12px 0 5px; + padding: 0 17px 0 9px; + } + + /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */ + body > div, /* body > div > div, */ body > div > div > div { direction: ltr; } + body > div.trtl > div > div { direction: rtl; } + /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */ + /* body > div.prtl > div { direction: rtl; } */ + body > div.cbrtl { direction: rtl; } + body > div.mlauto > div > div { margin-left: auto; } + body > div.mrauto > div > div { margin-right: auto; } + + body > div.wauto > div > div { width: auto; } + body > div.wnarrow > div > div { width: 127px; } + body > div.wwide > div > div { width: 415px; } + + /* + * make a background on the containing block that is red + * everywhere except where the test should draw its background + */ + body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); } + body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); } + body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); } + body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); } + body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); } + body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); } + + /* + * The only results in the markup rather than using selectors + * are whether the div ends up aligned to the left edge (atl), + * the right edge (atr), or centered (atc). Things with auto + * widths always count as atl, to make the style rules simpler + * (though they abut both edges). + */ + body > div.atl { background-position: 8px 0; } + body > div.atl.mlauto { background-position: 2px 0; } + + body > div.atr.wnarrow { background-position: 172px 0; } + body > div.atr.wnarrow.mrauto { background-position: 182px 0; } + body > div.atr.wwide { background-position: -116px 0; } + body > div.atr.wwide.mrauto { background-position: -106px 0; } + + /* Can only be atc when mlauto and mrauto and wnarrow. */ + body > div.atc.wnarrow { background-position: 92px 0; } + + /* + * make a background on the test div that is green only within + * its desired width and red elsewhere + */ + body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); } + body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); } + body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); } + body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); } + body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); } + body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); } + /* move position to border-edge */ + body > div > div > div { background-position: -5px 0; } + + /* for debugging */ + /* body > div { background: transparent ! important; } */ + /* body > div > div > div { background: orange ! important; } */ + + ]]></style> + </head> + <body> + + <div class="atl wauto"><div><div></div></div></div> + <div class="atl wauto trtl"><div><div></div></div></div> + <div class="atl wauto prtl"><div><div></div></div></div> + <div class="atl wauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto cbrtl"><div><div></div></div></div> + <div class="atl wauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto"><div><div></div></div></div> + <div class="atl wauto mlauto trtl"><div><div></div></div></div> + <div class="atl wauto mlauto prtl"><div><div></div></div></div> + <div class="atl wauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto"><div><div></div></div></div> + <div class="atl wauto mrauto trtl"><div><div></div></div></div> + <div class="atl wauto mrauto prtl"><div><div></div></div></div> + <div class="atl wauto mrauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow"><div><div></div></div></div> + <div class="atl wnarrow trtl"><div><div></div></div></div> + <div class="atl wnarrow prtl"><div><div></div></div></div> + <div class="atl wnarrow prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl trtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl prtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto"><div><div></div></div></div> + <div class="atr wnarrow mlauto trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto prtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto"><div><div></div></div></div> + <div class="atl wnarrow mrauto trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto prtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide"><div><div></div></div></div> + <div class="atl wwide trtl"><div><div></div></div></div> + <div class="atl wwide prtl"><div><div></div></div></div> + <div class="atl wwide prtl trtl"><div><div></div></div></div> + <div class="atr wwide cbrtl"><div><div></div></div></div> + <div class="atr wwide cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mlauto"><div><div></div></div></div> + <div class="atl wwide mlauto trtl"><div><div></div></div></div> + <div class="atl wwide mlauto prtl"><div><div></div></div></div> + <div class="atl wwide mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mrauto"><div><div></div></div></div> + <div class="atl wwide mrauto trtl"><div><div></div></div></div> + <div class="atl wwide mrauto prtl"><div><div></div></div></div> + <div class="atl wwide mrauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100303.xhtml b/layout/reftests/box-properties/CSS21-t100303.xhtml new file mode 100644 index 0000000000..463dd7ced5 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100303.xhtml @@ -0,0 +1,191 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + body { direction: ltr; } + div { height: 1px; } + + /* containing block */ + body > div { + margin: 0 17px 0 3px; + border: medium solid transparent; + border-width: 0 154px 0 157px; + padding: 0 6px 0 2px; + width: 350px; + } + /* parent that is not containing block */ + body > div > div { display: inline; } + /* test element */ + body > div > div > div { + margin: 0 10px 0 6px; + border: medium solid transparent; + border-width: 0 12px 0 5px; + padding: 0 17px 0 9px; + } + + body > div, body > div > div, body > div > div > div { direction: ltr; } + body > div.trtl > div > div { direction: rtl; } + body > div.prtl > div { direction: rtl; } + body > div.cbrtl { direction: rtl; } + body > div.mlauto > div > div { margin-left: auto; } + body > div.mrauto > div > div { margin-right: auto; } + + body > div.wauto > div > div { width: auto; } + body > div.wnarrow > div > div { width: 127px; } + body > div.wwide > div > div { width: 415px; } + + /* + * make a background on the containing block that is red + * everywhere except where the test should draw its background + */ + body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); } + body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); } + body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); } + body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); } + body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); } + body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); } + + /* + * The only results in the markup rather than using selectors + * are whether the div ends up aligned to the left edge (atl), + * the right edge (atr), or centered (atc). Things with auto + * widths always count as atl, to make the style rules simpler + * (though they abut both edges). + */ + body > div.atl { background-position: 8px 0; } + body > div.atl.mlauto { background-position: 2px 0; } + + body > div.atr.wnarrow { background-position: 172px 0; } + body > div.atr.wnarrow.mrauto { background-position: 182px 0; } + body > div.atr.wwide { background-position: -116px 0; } + body > div.atr.wwide.mrauto { background-position: -106px 0; } + + /* Can only be atc when mlauto and mrauto and wnarrow. */ + body > div.atc.wnarrow { background-position: 92px 0; } + + /* + * make a background on the test div that is green only within + * its desired width and red elsewhere + */ + body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); } + body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); } + body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); } + body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); } + body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); } + body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); } + /* move position to border-edge */ + body > div > div > div { background-position: -5px 0; } + + /* for debugging */ + /* body > div { background: transparent ! important; } */ + /* body > div > div > div { background: orange ! important; } */ + + ]]></style> + </head> + <body> + + <div class="atl wauto"><div><div></div></div></div> + <div class="atl wauto trtl"><div><div></div></div></div> + <div class="atl wauto prtl"><div><div></div></div></div> + <div class="atl wauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto cbrtl"><div><div></div></div></div> + <div class="atl wauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto"><div><div></div></div></div> + <div class="atl wauto mlauto trtl"><div><div></div></div></div> + <div class="atl wauto mlauto prtl"><div><div></div></div></div> + <div class="atl wauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto"><div><div></div></div></div> + <div class="atl wauto mrauto trtl"><div><div></div></div></div> + <div class="atl wauto mrauto prtl"><div><div></div></div></div> + <div class="atl wauto mrauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow"><div><div></div></div></div> + <div class="atl wnarrow trtl"><div><div></div></div></div> + <div class="atl wnarrow prtl"><div><div></div></div></div> + <div class="atl wnarrow prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl trtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl prtl"><div><div></div></div></div> + <div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto"><div><div></div></div></div> + <div class="atr wnarrow mlauto trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto prtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto"><div><div></div></div></div> + <div class="atl wnarrow mrauto trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto prtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide"><div><div></div></div></div> + <div class="atl wwide trtl"><div><div></div></div></div> + <div class="atl wwide prtl"><div><div></div></div></div> + <div class="atl wwide prtl trtl"><div><div></div></div></div> + <div class="atr wwide cbrtl"><div><div></div></div></div> + <div class="atr wwide cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mlauto"><div><div></div></div></div> + <div class="atl wwide mlauto trtl"><div><div></div></div></div> + <div class="atl wwide mlauto prtl"><div><div></div></div></div> + <div class="atl wwide mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mrauto"><div><div></div></div></div> + <div class="atl wwide mrauto trtl"><div><div></div></div></div> + <div class="atl wwide mrauto prtl"><div><div></div></div></div> + <div class="atl wwide mrauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div> + <div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div> + <div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div> + + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml b/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml new file mode 100644 index 0000000000..8e11729e0f --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: vertical-align (on an inline-block) (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" /> + <meta name="flags" content="" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"><![CDATA[ + + body { width: 500px; height: 500px; margin: 0; position: relative; } + body > div { + position: absolute; + height: 50px; width: 40px; + top: 100px; left: 0; + background: green; + } + + ]]></style> + </head> + <body> + +<div></div> + + </body> +</html> diff --git a/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml b/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml new file mode 100644 index 0000000000..34ee8c7884 --- /dev/null +++ b/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml @@ -0,0 +1,247 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS 2.1 Test Suite: vertical-align (on an inline-block)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" /> + <meta name="flags" content="" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"><![CDATA[ + + body { width: 500px; height: 500px; margin: 0; position: relative; } + body > div { position: absolute; width: 500px; } + + b { display:inline-block; height: 50px; width: 1px; background:green; } + + ]]></style> + </head> + <body> + +<!-- + + The basic structure of this test is that each passing item will create + a box 1 pixel wide and 50px tall (stretching from 100px to 150px from + the top of the page). Together these items will line up to form a + rectangle. + + This test only tests the 'top', 'bottom', 'text-top', 'text-bottom', + 'baseline', <length>, and <percentage> values of 'vertical-align'. It + does not test 'sub', 'super', or 'middle', and it does not test + anything relative to actual font metrics. + + --> + +<!-- vertical-align: top --> + +<div style="top: 100px; left: 0;"> + <b style="vertical-align:top"></b> +</div> + +<div style="top: 100px; left: 1px;"> + <b style="vertical-align:top"></b> + <span style="visibility:hidden; font-size: 10px;">text</span> +</div> + +<div style="top: 100px; left: 2px;"> + <b style="vertical-align:top"></b> + <span style="visibility:hidden; font-size: 100px;">text</span> +</div> + +<div style="top: 100px; right: 496px; text-align: right;"> + <span style="visibility:hidden; font-size: 10px;">text</span> + <b style="vertical-align:top"></b> +</div> + +<div style="top: 100px; right: 495px; text-align: right;"> + <span style="visibility:hidden; font-size: 100px;">text</span> + <b style="vertical-align:top"></b> +</div> + +<!-- Test behavior of the rest of the line when there's a single loose + subtree with vertical-align: top. This isn't required by the spec, but + test it anyway. --> + +<div style="top: 100px; left: 5px;"> + <b style="vertical-align:baseline"></b> + <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span> +</div> + +<div style="top: 100px; left: 6px;"> + <b style="vertical-align:baseline"></b> + <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span> +</div> + +<div style="top: 100px; right: 492px; text-align: right;"> + <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span> + <b style="vertical-align:baseline"></b> +</div> + +<div style="top: 100px; right: 491px; text-align: right;"> + <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span> + <b style="vertical-align:baseline"></b> +</div> + +<!-- Test that we align the loose subtree, not just the box (118501) --> + +<div style="top: 100px; left: 9px;"> + <span style="font-size: 10px; vertical-align: top"><b></b></span> +</div> + +<div style="top: 100px; left: 10px;"> + <span style="font-size: 100px; vertical-align: top; line-height: 0;"><b style="vertical-align:text-top"></b></span> +</div> + +<!-- vertical-align: bottom --> + +<div style="bottom: 350px; left: 11px;"> + <b style="vertical-align:bottom"></b> +</div> + +<div style="bottom: 350px; left: 12px;"> + <b style="vertical-align:bottom"></b> + <span style="visibility:hidden; font-size: 10px;">text</span> +</div> + +<div style="bottom: 350px; left: 13px;"> + <b style="vertical-align:bottom"></b> + <span style="visibility:hidden; font-size: 100px;">text</span> +</div> + +<div style="bottom: 350px; right: 485px; text-align: right;"> + <span style="visibility:hidden; font-size: 10px;">text</span> + <b style="vertical-align:bottom"></b> +</div> + +<div style="bottom: 350px; right: 484px; text-align: right;"> + <span style="visibility:hidden; font-size: 100px;">text</span> + <b style="vertical-align:bottom"></b> +</div> + +<!-- Test behavior of the rest of the line when there's a single loose + subtree with vertical-align: bottom. This isn't required by the spec, but + test it anyway. --> + +<div style="bottom: 350px; left: 16px;"> + <b style="vertical-align:text-top"></b> + <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span> +</div> + +<div style="bottom: 350px; left: 17px;"> + <b style="vertical-align:text-top"></b> + <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span> +</div> + +<div style="bottom: 350px; right: 481px; text-align: right;"> + <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span> + <b style="vertical-align:text-top"></b> +</div> + +<div style="bottom: 350px; right: 480px; text-align: right;"> + <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span> + <b style="vertical-align:text-top"></b> +</div> + +<!-- Test that we align the loose subtree, not just the box (118501) --> + +<div style="bottom: 350px; left: 20px;"> + <span style="font-size: 10px; vertical-align: bottom"><b style="vertical-align:text-top"></b></span> +</div> + +<div style="bottom: 350px; left: 21px;"> + <span style="font-size: 100px; vertical-align: bottom; line-height: 0;"><b style="vertical-align:text-bottom"></b></span> +</div> + +<!-- test top and bottom nested within other things --> + +<div style="top: 100px; left: 22px;"> + <span style="font-size: 100px; vertical-align: text-top"> + <span style="font-size: 10px; vertical-align: text-bottom"> + <b style="vertical-align:top"></b> + </span> + </span> +</div> + +<div style="bottom: 350px; left: 23px;"> + <span style="font-size: 100px; vertical-align: text-bottom"> + <span style="font-size: 10px; vertical-align: text-top"> + <b style="vertical-align:bottom"></b> + </span> + </span> +</div> + +<!-- test top and bottom within the same box --> + +<div style="top: 100px; left: 24px;"> + <b style="vertical-align:top"></b + ><b style="vertical-align:bottom"></b> +</div> + +<div style="bottom: 350px; left: 26px; font-size: 10px"> + <b style="vertical-align:bottom"></b + ><b style="vertical-align:top"></b + ><b style="vertical-align: -10px"></b> +</div> + +<div style="top: 100px; left: 29px; font-size: 10px"> + <b style="vertical-align: -10px"></b + ><b style="vertical-align:top"></b + ><b style="vertical-align:bottom"></b> +</div> + +<!-- test vertical-align: length --> + +<div style="top: 100px; left: 32px; font-size: 10px"> + <b style="vertical-align: baseline; height: 40px"></b + ><b style="vertical-align: 20px; height: 20px"></b + ><b style="vertical-align: -10px; height: 10px; margin-left: -2px"></b + ><b style="vertical-align: -10px; height: 30px"></b> +</div> + +<!-- test vertical-align: percentage --> + +<div style="top: 100px; left: 34px; font-size: 10px; line-height: 10px;"> + <b style="vertical-align: baseline; height: 40px"></b + ><b style="vertical-align: 200%; height: 20px"></b + ><b style="vertical-align: -25%; height: 10px; margin-left: -2px; line-height: 40px;"></b + ><b style="vertical-align: -100%; height: 30px;line-height:10px"></b> +</div> + +<!-- test vertical-align: text-top --> + +<div style="top: 100px; left: 36px; font-size: 10px; line-height: 2px;"> + <!-- we're testing: + 1) that the top of the first b's background is even with the top of + the span's background, which is likewise even with the top of the + line box (thanks to the b's contribution) + 2) that the second b (which serves to fill the area under the span) + is aligned relative to its parent, not to the line box + --> + <span style="background:green" + ><b style="vertical-align: text-top"></b + ><span style="vertical-align: -8px" + ><b style="vertical-align: text-top; height: 42px"></b + ></span + ></span> +</div> + +<!-- test vertical-align: text-bottom --> + +<div style="bottom: 350px; left: 38px; font-size: 10px; line-height: 2px;"> + <!-- we're testing: + 1) that the bottom of the first b's background is even with the bottom of + the span's background, which is likewise even with the bottom of the + line box (thanks to the b's contribution) + 2) that the second b (which serves to fill the area under the span) + is aligned relative to its parent, not to the line box + --> + <span style="background:green" + ><b style="vertical-align: text-bottom"></b + ><span style="vertical-align: 8px" + ><b style="vertical-align: text-bottom; height: 42px"></b + ></span + ></span> +</div> + + </body> +</html> diff --git a/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html new file mode 100644 index 0000000000..f48fc42636 --- /dev/null +++ b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html @@ -0,0 +1,456 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd"> +<html> +<head> +<title>Test, CSS 2.1, section 10.3.7</title> +<style type="text/css"> + +html, body { margin: 0; padding: 0; border: none; } +div { height: 1px; background: navy; margin-right: 19px; } + +</style> +</head> +<body> + +<!-- ***** NARROW WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<!-- only left auto --> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<div style="margin-left: 496px; width: 177px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<div style="margin-left: 454px; width: 177px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<div style="margin-left: 70px; width: 177px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 167px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<!-- margin-left and margin-right auto --> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<div style="margin-left: 284px; width: 177px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<div style="margin-left: 515px; width: 177px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<div style="margin-left: 53px; width: 177px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 150px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> +<div style="margin-left: 473px; width: 177px;"></div> + +<!-- AUTO WIDTH --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<div style="margin-left: 70px; width: 603px;"></div> +<!-- only left auto --> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<!-- only margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<div style="margin-left: 53px; width: 620px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<div style="margin-left: 577px; width: 96px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<div style="margin-left: 535px; width: 96px;"></div> +<!-- only margin-right auto (margin-right like 0) --> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<div style="margin-left: 70px; width: 622px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<div style="margin-left: 70px; width: 96px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 167px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<!-- margin-left and margin-right auto (both like 0) --> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<div style="margin-left: 53px; width: 639px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<div style="margin-left: 596px; width: 96px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<div style="margin-left: 53px; width: 96px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 150px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> +<div style="margin-left: 554px; width: 96px;"></div> + +<!-- ***** WIDE WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<!-- only left auto --> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<div style="margin-left: -11px; width: 684px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<div style="margin-left: -53px; width: 684px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<div style="margin-left: 70px; width: 684px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: 167px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<!-- margin-left and margin-right auto (alternately like 0) --> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<div style="margin-left: 8px; width: 684px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<div style="margin-left: 53px; width: 684px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: 150px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> +<div style="margin-left: -34px; width: 684px;"></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html new file mode 100644 index 0000000000..2f67f9fd1c --- /dev/null +++ b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html @@ -0,0 +1,488 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd"> +<html> +<head> +<title>Test, CSS 2.1, section 10.3.7</title> +<style type="text/css"> + +div { height: 1px; direction: ltr; } + +/* + * Every case here has three divs nested inside of each other. The + * innermost div (absolutely positioned) is the testcase (and has + * color). The middle div's content edge establishes the containing + * block it would have if it were statically positioned. The outermost + * div is actually its containing block. + * + * the abs pos containing block runs from 50px to 700px from the left edge + * the static pos containing block runs from 150px to 650px from the left edge + */ + +/* totals for html and body: 21px on the left, 34px on the right */ +html, body { border: transparent medium solid; } +html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; } +body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; } + +body > div { + position: relative; + + top: 0; + left: 4px; + + margin-left: 16px; + border-left: 9px solid transparent; + /* sum of above items (29px), plus 21px above, is 50px */ + padding-left: 40px; + + width: 595px; + + padding-right: 15px; + /* sum of above items (650px), plus 50px above, is 700px */ + + border-right: 27px solid transparent; + margin-right: 13px; +} + +body > div > div { + /* padding-left above: 40px */ + margin-left: 7px; + border-left: 29px solid transparent; + padding-left: 24px; + /* sum of above items (100px), plus 50px above, is 150px */ + + /* padding-right above: 15px */ + padding-right: 14px; + border-right: 3px solid transparent; + margin-right: 18px; + /* sum of above items (50px), subtracted from 700px, is 650px */ +} + +body > div > div > div { + background: navy; + position: absolute; + top: 0; + bottom: 0; + + /* specify everything; we'll put the autos as overrides below */ + left: 3px; + margin-left: 17px; + border-left: 6px solid transparent; + padding-left: 1px; + padding-right: 9px; + border-right: 8px solid transparent; + margin-right: 19px; + right: 8px; +} + +/* and give it 72px of intrinsic width for the case where it has width:auto */ +body > div > div > div > div { + width: 72px; +} + +/* now we want to test all 128 combinations of presence of the following */ + +body > div.adir { direction: rtl; } +body > div.sdir > div { direction: rtl; } +body > div.edir > div > div { direction: rtl; } +body > div.ol > div > div { left: auto; } +body > div.or > div > div { right: auto; } +body > div.ml > div > div { margin-left: auto; } +body > div.mr > div > div { margin-right: auto; } + +/* combined with each of these three */ +body > div.narrowwidth > div > div { width: 153px; } +body > div.autowidth > div > div { width: auto; } +body > div.widewidth > div > div { width: 660px; } + +</style> +</head> +<body> + +<div class="narrowwidth"><div><div><div></div></div></div></div> +<div class="narrowwidth adir"><div><div><div></div></div></div></div> +<div class="narrowwidth sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth edir"><div><div><div></div></div></div></div> +<div class="narrowwidth edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol"><div><div><div></div></div></div></div> +<div class="narrowwidth ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or"><div><div><div></div></div></div></div> +<div class="narrowwidth or adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth or sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or edir"><div><div><div></div></div></div></div> +<div class="narrowwidth or edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth or edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml"><div><div><div></div></div></div></div> +<div class="narrowwidth ml adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml edir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or edir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth ml or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr"><div><div><div></div></div></div></div> +<div class="narrowwidth mr adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol edir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="narrowwidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div> + +<div class="autowidth"><div><div><div></div></div></div></div> +<div class="autowidth adir"><div><div><div></div></div></div></div> +<div class="autowidth sdir"><div><div><div></div></div></div></div> +<div class="autowidth sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth edir"><div><div><div></div></div></div></div> +<div class="autowidth edir adir"><div><div><div></div></div></div></div> +<div class="autowidth edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ol"><div><div><div></div></div></div></div> +<div class="autowidth ol adir"><div><div><div></div></div></div></div> +<div class="autowidth ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ol edir"><div><div><div></div></div></div></div> +<div class="autowidth ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth or"><div><div><div></div></div></div></div> +<div class="autowidth or adir"><div><div><div></div></div></div></div> +<div class="autowidth or sdir"><div><div><div></div></div></div></div> +<div class="autowidth or sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth or edir"><div><div><div></div></div></div></div> +<div class="autowidth or edir adir"><div><div><div></div></div></div></div> +<div class="autowidth or edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth or edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth or ol"><div><div><div></div></div></div></div> +<div class="autowidth or ol adir"><div><div><div></div></div></div></div> +<div class="autowidth or ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth or ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth or ol edir"><div><div><div></div></div></div></div> +<div class="autowidth or ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth or ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml"><div><div><div></div></div></div></div> +<div class="autowidth ml adir"><div><div><div></div></div></div></div> +<div class="autowidth ml sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml edir"><div><div><div></div></div></div></div> +<div class="autowidth ml edir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol"><div><div><div></div></div></div></div> +<div class="autowidth ml ol adir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol edir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or"><div><div><div></div></div></div></div> +<div class="autowidth ml or adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml or sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or edir"><div><div><div></div></div></div></div> +<div class="autowidth ml or edir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol edir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth ml or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr"><div><div><div></div></div></div></div> +<div class="autowidth mr adir"><div><div><div></div></div></div></div> +<div class="autowidth mr sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr edir"><div><div><div></div></div></div></div> +<div class="autowidth mr edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol"><div><div><div></div></div></div></div> +<div class="autowidth mr ol adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol edir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or"><div><div><div></div></div></div></div> +<div class="autowidth mr or adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr or sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or edir"><div><div><div></div></div></div></div> +<div class="autowidth mr or edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr or edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol edir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml"><div><div><div></div></div></div></div> +<div class="autowidth mr ml adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml edir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol edir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or edir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol edir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="autowidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div> + +<div class="widewidth"><div><div><div></div></div></div></div> +<div class="widewidth adir"><div><div><div></div></div></div></div> +<div class="widewidth sdir"><div><div><div></div></div></div></div> +<div class="widewidth sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth edir"><div><div><div></div></div></div></div> +<div class="widewidth edir adir"><div><div><div></div></div></div></div> +<div class="widewidth edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ol"><div><div><div></div></div></div></div> +<div class="widewidth ol adir"><div><div><div></div></div></div></div> +<div class="widewidth ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ol edir"><div><div><div></div></div></div></div> +<div class="widewidth ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth or"><div><div><div></div></div></div></div> +<div class="widewidth or adir"><div><div><div></div></div></div></div> +<div class="widewidth or sdir"><div><div><div></div></div></div></div> +<div class="widewidth or sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth or edir"><div><div><div></div></div></div></div> +<div class="widewidth or edir adir"><div><div><div></div></div></div></div> +<div class="widewidth or edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth or edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth or ol"><div><div><div></div></div></div></div> +<div class="widewidth or ol adir"><div><div><div></div></div></div></div> +<div class="widewidth or ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth or ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth or ol edir"><div><div><div></div></div></div></div> +<div class="widewidth or ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth or ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml"><div><div><div></div></div></div></div> +<div class="widewidth ml adir"><div><div><div></div></div></div></div> +<div class="widewidth ml sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml edir"><div><div><div></div></div></div></div> +<div class="widewidth ml edir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol"><div><div><div></div></div></div></div> +<div class="widewidth ml ol adir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol edir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or"><div><div><div></div></div></div></div> +<div class="widewidth ml or adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml or sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or edir"><div><div><div></div></div></div></div> +<div class="widewidth ml or edir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol edir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth ml or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr"><div><div><div></div></div></div></div> +<div class="widewidth mr adir"><div><div><div></div></div></div></div> +<div class="widewidth mr sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr edir"><div><div><div></div></div></div></div> +<div class="widewidth mr edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol"><div><div><div></div></div></div></div> +<div class="widewidth mr ol adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol edir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or"><div><div><div></div></div></div></div> +<div class="widewidth mr or adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr or sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or edir"><div><div><div></div></div></div></div> +<div class="widewidth mr or edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr or edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol edir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr or ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml"><div><div><div></div></div></div></div> +<div class="widewidth mr ml adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml edir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol edir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or edir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or edir sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol sdir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol edir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol edir adir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol edir sdir"><div><div><div></div></div></div></div> +<div class="widewidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png Binary files differnew file mode 100644 index 0000000000..b36c5f4f99 --- /dev/null +++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html new file mode 100644 index 0000000000..38aed2c96e --- /dev/null +++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html @@ -0,0 +1,604 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd"> +<html> +<head> +<title>Test, CSS 2.1, section 10.3.8</title> +<style type="text/css"> + +html, body { margin: 0; padding: 0; border: none; } +div { height: 1px; background: blue; + border-left: 7px solid navy; border-right: 17px solid navy; margin-right: 19px; } + +</style> +</head> +<body> + +<!-- ***** WIDE WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- only left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<!-- margin-left and margin-right auto (alternately like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> + +<!-- ***** NARROW WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- only left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<!-- margin-left and margin-right auto --> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> + +<!-- ***** NARROW WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- only left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<div style="margin-left: 496px; width: 153px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<div style="margin-left: 454px; width: 153px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<div style="margin-left: 70px; width: 153px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 167px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<!-- margin-left and margin-right auto --> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<div style="margin-left: 284px; width: 153px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<div style="margin-left: 515px; width: 153px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<div style="margin-left: 53px; width: 153px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 150px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> +<div style="margin-left: 473px; width: 153px;"></div> + +<!-- ***** WIDE WIDTH ***** --> + +<!-- nothing auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- only left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- only right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and right auto --> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<!-- only margin-left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- left and margin-left auto --> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<div style="margin-left: -11px; width: 660px;"></div> +<!-- right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<!-- left and right and margin-left auto (margin-left like 0) --> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<div style="margin-left: -53px; width: 660px;"></div> +<!-- only margin-right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- right and margin-right auto --> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<div style="margin-left: 70px; width: 660px;"></div> +<!-- left and right and margin-right auto (margin-right like 0) --> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: 167px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<!-- margin-left and margin-right auto (alternately like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- left and margin-left and margin-right auto (margin-right like 0) --> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<div style="margin-left: 8px; width: 660px;"></div> +<!-- right and margin-left and margin-right auto (margin-left like 0) --> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<div style="margin-left: 53px; width: 660px;"></div> +<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) --> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: 150px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> +<div style="margin-left: -34px; width: 660px;"></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png Binary files differnew file mode 100644 index 0000000000..ef3fce2dce --- /dev/null +++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html b/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html new file mode 100644 index 0000000000..a8417dad42 --- /dev/null +++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html @@ -0,0 +1,612 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd"> +<html> +<head> +<title>Test, CSS 2.1, section 10.3.8</title> +<style type="text/css"> + +div { height: 1px; direction: ltr; } + +/* + * Every case here has two divs and an image nested inside of each other. The + * innermost div (absolutely positioned) is the testcase (and has + * color). The middle div's content edge establishes the containing + * block it would have if it were statically positioned. The outermost + * div is actually its containing block. + * + * the abs pos containing block runs from 50px to 700px from the left edge + * the static pos containing block runs from 150px to 650px from the left edge + */ + +/* totals for html and body: 21px on the left, 34px on the right */ +html, body { border: transparent medium solid; } +html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; } +body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; } + +body > div { + position: relative; + + top: 0; + left: 4px; + + margin-left: 16px; + border-left: 9px solid transparent; + /* sum of above items (29px), plus 21px above, is 50px */ + padding-left: 40px; + + width: 595px; + + padding-right: 15px; + /* sum of above items (650px), plus 50px above, is 700px */ + + border-right: 27px solid transparent; + margin-right: 13px; +} + +body > div > div { + /* padding-left above: 40px */ + margin-left: 7px; + border-left: 29px solid transparent; + padding-left: 24px; + /* sum of above items (100px), plus 50px above, is 150px */ + + /* padding-right above: 15px */ + padding-right: 14px; + border-right: 3px solid transparent; + margin-right: 18px; + /* sum of above items (50px), subtracted from 700px, is 650px */ +} + +body > div > div > img { + background: navy; + position: absolute; + top: 0; + bottom: 0; + + /* specify everything; we'll put the autos as overrides below */ + left: 3px; + margin-left: 17px; + border-left: 6px solid transparent; + padding-left: 1px; + padding-right: 9px; + border-right: 8px solid transparent; + margin-right: 19px; + right: 8px; +} + +/* now we want to test all 128 combinations of presence of the following */ + +body > div.adir { direction: rtl; } +body > div.sdir > div { direction: rtl; } +body > div.edir > div > img { direction: rtl; } +body > div.ol > div > img { left: auto; } +body > div.or > div > img { right: auto; } +body > div.ml > div > img { margin-left: auto; } +body > div.mr > div > img { margin-right: auto; } + +/* combined with each of these three (as appropriate for narrow/wide images) */ +body > div.narrowwidth > div > img { width: 153px; height: 1px; } +body > div.autowidth > div > img { width: auto; } +body > div.widewidth > div > img { width: 660px; height: 1px; } + +</style> +</head> +<body> + +<div class="autowidth"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="autowidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> + +<div class="narrowwidth"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> +<div class="narrowwidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div> + +<div class="autowidth"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="autowidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> + +<div class="widewidth"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> +<div class="widewidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-1-ref.html b/layout/reftests/box-properties/box-sizing-1-ref.html new file mode 100644 index 0000000000..42aee17719 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-1-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0; } + td { border: 1px solid; padding: 1px; } + + td > div { width: 100px; } + + td > div > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 1px; + + float: left; + clear: left; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"><div> + +<!-- box-sizing: content-box --> +<div style="width: 37px">A B</div> +<div style="width: auto">A B</div> +<div style="width: auto">A<br>B</div> +<div style="width: auto">A B</div> +<div style="width: 37px">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60px">A B</div> + +</div></td> + +<td id="bsborder"><div> +<!-- box-sizing: border-box --> +<div style="width: 37px">A B</div> +<div style="width: auto">A B</div> +<div style="width: auto">A<br>B</div> +<div style="width: auto">A B</div> +<div style="width: 37px">A B</div> +<div style="width: 20px">A B</div> +<div style="width: 30px">A B</div> + +</div></td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-1.html b/layout/reftests/box-properties/box-sizing-1.html new file mode 100644 index 0000000000..7070f9c97f --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-1.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0; } + td { border: 1px solid; padding: 1px; } + + td > div { width: 100px; } + + td#bscontent > div > div { box-sizing: content-box; } + td#bsborder > div > div { box-sizing: border-box; } + + td > div > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 1px; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"><div> + +<!-- box-sizing: content-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +<td id="bsborder"><div> +<!-- box-sizing: border-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-2-ref.html b/layout/reftests/box-properties/box-sizing-2-ref.html new file mode 100644 index 0000000000..b11313ed4e --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-2-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0; } + td { border: 1px solid; padding: 1px solid; } + + td td > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"> + +<!-- box-sizing: content-box --> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A<br>B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div style="width: 150px">A B</div></td></tr></table> + +</td> + +<td id="bsborder"> +<!-- box-sizing: border-box --> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A<br>B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div>A B</div></td></tr></table> +<table><tr><td><div style="width: 120px">A B</div></td></tr></table> + +</td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-2.html b/layout/reftests/box-properties/box-sizing-2.html new file mode 100644 index 0000000000..bb9ae4714e --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-2.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0; } + td { border: 1px solid; padding: 1px solid; } + + td#bscontent td > div { box-sizing: content-box; } + td#bsborder td > div { box-sizing: border-box; } + + td td > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"> + +<!-- box-sizing: content-box --> +<table><tr><td><div style="width: auto">A B</div></td></tr></table> +<table><tr><td><div style="width: max-content">A B</div></td></tr></table> +<table><tr><td><div style="width: min-content">A B</div></td></tr></table> +<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table> +<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table> +<table><tr><td><div style="width: 150px">A B</div></td></tr></table> + +</td> + +<td id="bsborder"> +<!-- box-sizing: border-box --> +<table><tr><td><div style="width: auto">A B</div></td></tr></table> +<table><tr><td><div style="width: max-content">A B</div></td></tr></table> +<table><tr><td><div style="width: min-content">A B</div></td></tr></table> +<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table> +<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table> +<table><tr><td><div style="width: 150px">A B</div></td></tr></table> + +</td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-3.html b/layout/reftests/box-properties/box-sizing-3.html new file mode 100644 index 0000000000..ca346e538f --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-3.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0; } + td { border: 1px solid; padding: 1px solid; } + + td > div { width: 100px; } + + td#bscontent > div > div { box-sizing: content-box; } + td#bsborder > div > div { box-sizing: border-box; } + + td > div > div { + margin-left: 1%; + border-left: 2px solid; + padding-left: 4%; + padding-right: 8%; + border-right: 16px solid; + margin-right: 32%; + + background: yellow; + margin-bottom: 1px; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"><div> + +<!-- box-sizing: content-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +<td id="bsborder"><div> +<!-- box-sizing: border-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-4-ref.html b/layout/reftests/box-properties/box-sizing-4-ref.html new file mode 100644 index 0000000000..b2a149dbe8 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-4-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0 100px; } + td { border: 1px solid; padding: 1px solid; } + + td > div { width: 100px; } + + td > div > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 10px; + float: right; + clear: right; + text-align: right; + height: 40px; + right: 0; + } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"><div> + +<!-- box-sizing: content-box --> +<div>A B</div> +<div>A B</div> +<div>A<br>B</div> +<div>A B</div> +<div style="width: 37px">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60px">A B</div> + +</div></td> + +<td id="bsborder"><div> +<!-- box-sizing: border-box --> +<div>A B</div> +<div>A B</div> +<div>A<br>B</div> +<div>A B</div> +<div style="width: 37px">A B</div> +<div style="width: 20px">A B</div> +<div style="width: 30px">A B</div> + +</div></td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-4.html b/layout/reftests/box-properties/box-sizing-4.html new file mode 100644 index 0000000000..c170f37465 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-4.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>test of box-sizing</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + table { border-spacing: 0; margin: 0 100px; } + td { border: 1px solid; padding: 1px solid; } + + td > div { width: 100px; height: 350px; + direction: rtl; position: relative; } + + td#bscontent > div > div { box-sizing: content-box; } + td#bsborder > div > div { box-sizing: border-box; } + + td > div > div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 10px; + position: absolute; + height: 40px; + right: 0; + } + + td > div > div { top: 0px; } + td > div > div + div { top: 50px; } + td > div > div + div + div { top: 100px; } + td > div > div + div + div + div { top: 150px; } + td > div > div + div + div + div + div { top: 200px; } + td > div > div + div + div + div + div + div { top: 250px; } + td > div > div + div + div + div + div + div + div { top: 300px; } + + </style> +</head> +<body> + +<table><tr> + +<td id="bscontent"><div> + +<!-- box-sizing: content-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +<td id="bsborder"><div> +<!-- box-sizing: border-box --> +<div style="width: auto">A B</div> +<div style="width: max-content">A B</div> +<div style="width: min-content">A B</div> +<div style="width: -moz-fit-content">A B</div> +<div style="width: -moz-available">A B</div> +<div style="width: 50px">A B</div> +<div style="width: 60%">A B</div> + +</div></td> + +</tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-minmax-height-ref.html b/layout/reftests/box-properties/box-sizing-minmax-height-ref.html new file mode 100644 index 0000000000..ec9027039c --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-minmax-height-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html><head> + <title>min-/max-height testcase for bug 308801</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + .test1 { + height:35px; + border:1px solid black; + } + + .test2 { + height:37px; + background:black; + } + + .test3 { + height:21px; + border:8px solid black; + } + + p { height:43px; margin:0; padding:0; } + </style> +</head> +<body> + +<div class="box min test1"></div> + +<br><div class="box min test2"></div> + +<br><div class="box min test3"></div> + +<br><div class="box max test1"><p></div> + +<br><div class="box max test2"><p></div> + +<br><div class="box max test3"><p></div> + +<br><!-- overflow:hidden --> + +<div class="hidden box min test1"></div> + +<br><div class="hidden box min test2"></div> + +<br><div class="hidden box min test3"></div> + +<br><div class="hidden box max test1"><p></div> + +<br><div class="hidden box max test2"><p></div> + +<br><div class="hidden box max test3"><p></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-minmax-height.html b/layout/reftests/box-properties/box-sizing-minmax-height.html new file mode 100644 index 0000000000..2a745fca0d --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-minmax-height.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html><head> + <title>min-/max-height testcase for bug 308801</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + div { + margin:0; + padding:0; + } + + .min { min-height:37px; } + .max { max-height:37px; } + .hidden { overflow:hidden; } + + .box { + box-sizing: border-box; + } + + .test1 { + border:1px solid black; + } + + .test2 { + padding:3px; + background:black; + } + + .test3 { + border:8px solid black; + padding:5px; + } + + p { height:43px; margin:0; padding:0; } + + </style> +</head> +<body> + +<div class="box min test1"></div> + +<br><div class="box min test2"></div> + +<br><div class="box min test3"></div> + +<br><div class="box max test1"><p></div> + +<br><div class="box max test2"><p></div> + +<br><div class="box max test3"><p></div> + +<br><!-- overflow:hidden --> + +<div class="hidden box min test1"></div> + +<br><div class="hidden box min test2"></div> + +<br><div class="hidden box min test3"></div> + +<br><div class="hidden box max test1"><p></div> + +<br><div class="hidden box max test2"><p></div> + +<br><div class="hidden box max test3"><p></div> + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-minmax-width-ref.html b/layout/reftests/box-properties/box-sizing-minmax-width-ref.html new file mode 100644 index 0000000000..f962ace1f4 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-minmax-width-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<html><head> + <title>min-/max-width testcase for bug 308801</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; + } + + .test1, .test2 { + width:100px; + height:20px; + background:black; + } + + .test3 { + width:30px; + border:10px solid black; + padding:25px; + } +br { margin-top:13px; } + </style> +</head> +<body> + +<div style="float:left"><div class="box min test1"></div></div> + +<br clear="all"> +<div style="float:left"><div class="box min test2"></div></div> + +<br clear="all"> +<div style="float:left"><div class="box min test3"></div></div> + +<br clear="all"> +<br clear="all"> +<div class="box max test1"></div> + +<br clear="all"> +<div class="box max test2"></div> + +<br clear="all"> +<div class="box max test3"></div> + +<br clear="all"> +<!-- overflow:hidden --> + +<div style="float:left"><div class="hidden box min test1"></div></div> + +<br clear="all"> +<div style="float:left"><div class="hidden box min test2"></div></div> + +<br clear="all"> +<div style="float:left"><div class="hidden box min test3"></div></div> + +<br clear="all"> +<br clear="all"> +<div class="hidden box max test1"></div> + +<br clear="all"> +<div class="hidden box max test2"></div> + +<br clear="all"> +<div class="hidden box max test3"></div> + + + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-minmax-width.html b/layout/reftests/box-properties/box-sizing-minmax-width.html new file mode 100644 index 0000000000..d5ec531108 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-minmax-width.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML> +<html><head> + <title>min-/max-width testcase for bug 308801</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; + } + + div { + margin:0; + padding:0; + } + + .min { min-width:100px; } + .max { max-width:100px; } + .hidden { overflow:hidden; } + + .box { + box-sizing: border-box; + } + + .test1 { + border:10px solid black; + } + + .test2 { + padding:10px; + background:black; + } + + .test3 { + border:10px solid black; + padding:25px; + } +br { margin-top:13px; } + </style> +</head> +<body> + +<div style="float:left"><div class="box min test1"></div></div> + +<br clear="all"> +<div style="float:left"><div class="box min test2"></div></div> + +<br clear="all"> +<div style="float:left"><div class="box min test3"></div></div> + +<br clear="all"> +<br clear="all"> +<div class="box max test1"></div> + +<br clear="all"> +<div class="box max test2"></div> + +<br clear="all"> +<div class="box max test3"></div> + +<br clear="all"> +<!-- overflow:hidden --> + +<div style="float:left"><div class="hidden box min test1"></div></div> + +<br clear="all"> +<div style="float:left"><div class="hidden box min test2"></div></div> + +<br clear="all"> +<div style="float:left"><div class="hidden box min test3"></div></div> + +<br clear="all"> +<br clear="all"> +<div class="hidden box max test1"></div> + +<br clear="all"> +<div class="hidden box max test2"></div> + +<br clear="all"> +<div class="hidden box max test3"></div> + + + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html new file mode 100644 index 0000000000..71b19db8c7 --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 789824</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:24px; padding:0; margin:0; + } + +div { padding:5px; } + +hbox { + display:-moz-box; + border-top:3px solid; + border-bottom:2px solid; + padding-bottom:4px; + background:lime; + + box-sizing:content-box; +} + +.cb { + background:pink; + box-sizing:border-box; +} + +.pb { + background:cyan; +} + + </style> +</head> +<body> + + +<div><hbox style="height:11px;">border-box 20px</hbox></div> +<div><hbox style="height:41px;">border-box 50px</hbox></div> +<div><hbox style="height:11px;">border-box 20px</hbox></div> + +<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div> +<div><hbox class="cb" style="height:59px;">content-box 50px</hbox></div> +<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div> + + +</body> +</html> diff --git a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html new file mode 100644 index 0000000000..df4d8c503f --- /dev/null +++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 789824</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:24px; padding:0; margin:0; + } + +div { padding:5px; } + +hbox { + display:-moz-box; + border-top:3px solid; + border-bottom:2px solid; + padding-bottom:4px; + height:auto; + box-sizing:border-box; + background:lime; +} + +.cb { + box-sizing:content-box; + background:pink; +} + + </style> +</head> +<body> + + +<div><hbox style="height:20px;">border-box 20px</hbox></div> +<div><hbox style="min-height:50px;">border-box 50px</hbox></div> +<div><hbox style="max-height:20px;">border-box 20px</hbox></div> + +<div><hbox class="cb" style="height:20px;">content-box 20px</hbox></div> +<div><hbox class="cb" style="min-height:50px;">content-box 50px</hbox></div> +<div><hbox class="cb" style="max-height:20px;">content-box 20px</hbox></div> + + +</body> +</html> diff --git a/layout/reftests/box-properties/clip-auto-ref.html b/layout/reftests/box-properties/clip-auto-ref.html new file mode 100644 index 0000000000..625d3c3212 --- /dev/null +++ b/layout/reftests/box-properties/clip-auto-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<title>test for 'clip: auto'</title> +<div style="position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; background: blue"> +</div> diff --git a/layout/reftests/box-properties/clip-auto.html b/layout/reftests/box-properties/clip-auto.html new file mode 100644 index 0000000000..06cb49f12c --- /dev/null +++ b/layout/reftests/box-properties/clip-auto.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<title>test for 'clip: auto'</title> +<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; clip: auto"> + <div style="width: 300px; height: 300px; margin: -100px; background: blue"> + </div> +</div> diff --git a/layout/reftests/box-properties/clip-rect-auto-ref.html b/layout/reftests/box-properties/clip-rect-auto-ref.html new file mode 100644 index 0000000000..4f486809a3 --- /dev/null +++ b/layout/reftests/box-properties/clip-rect-auto-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<title>test for 'clip: auto'</title> +<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background: blue"> +</div> diff --git a/layout/reftests/box-properties/clip-rect-auto.html b/layout/reftests/box-properties/clip-rect-auto.html new file mode 100644 index 0000000000..a47472bef8 --- /dev/null +++ b/layout/reftests/box-properties/clip-rect-auto.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<title>test for 'clip: auto'</title> +<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; clip: rect(auto,auto,auto,auto)"> + <div style="width: 300px; height: 300px; margin: -100px; background: blue"> + </div> +</div> diff --git a/layout/reftests/box-properties/max-height-1-ref.html b/layout/reftests/box-properties/max-height-1-ref.html new file mode 100644 index 0000000000..0b955cd015 --- /dev/null +++ b/layout/reftests/box-properties/max-height-1-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; + padding: 0; margin: 0; } + body > div:not(:empty) { height: 20px} + </style> + </head> + <body> + <div style="height: 10px; max-height: 15px;"></div> + <div style="height: 10px; max-height: 5px;"></div> + <div style="height: 10px; max-height: 5px; min-height: 2px"></div> + <div style="height: 10px; max-height: 5px; min-height: 15px"></div> + <div style="max-height: 5px; min-height: 15px"></div> + <div> + <div style="height: 50%;"></div> + </div> + <div> + <div style="height: 50%; max-height: 15px;"></div> + </div> + <div> + <div style="height: 50%; max-height: 5px;"></div> + </div> + <div> + <div style="height: 50%; max-height: 75%;"></div> + </div> + <div> + <div style="height: 50%; max-height: 10%;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 50%; max-height: 75%;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 50%; max-height: 10%;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 50%; max-height: 75%;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 50%; max-height: 10%;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/max-height-1.html b/layout/reftests/box-properties/max-height-1.html new file mode 100644 index 0000000000..b0c6f737e2 --- /dev/null +++ b/layout/reftests/box-properties/max-height-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; + padding: 0; margin: 0; } + body > div:not(:empty) { height: 20px; } + </style> + </head> + <body> + <div style="height: 10px;"></div> + <div style="height: 5px;"></div> + <div style="height: 5px;"></div> + <div style="height: 15px;"></div> + <div style="height: 15px;"></div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 5px;"></div> + </div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 2px;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 10px;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 2px;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 10px;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 2px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/max-width-1-ref.html b/layout/reftests/box-properties/max-width-1-ref.html new file mode 100644 index 0000000000..916b24ccf7 --- /dev/null +++ b/layout/reftests/box-properties/max-width-1-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; height: 10px; + padding: 0; margin: 0; } + body > div:not(:empty) { width: 400px; } + </style> + </head> + <body> + <div style="width: 100px;"></div> + <div style="width: 50px;"></div> + <div style="width: 50px;"></div> + <div style="width: 150px;"></div> + <div style="width: 150px;"></div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 100px;"></div> + </div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 40px;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 200px;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 40px;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 200px;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 40px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/max-width-1.html b/layout/reftests/box-properties/max-width-1.html new file mode 100644 index 0000000000..423e84b27e --- /dev/null +++ b/layout/reftests/box-properties/max-width-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; height: 10px; + padding: 0; margin: 0; } + body > div:not(:empty) { width: 400px; } + </style> + </head> + <body> + <div style="width: 100px; max-width: 150px;"></div> + <div style="width: 100px; max-width: 50px;"></div> + <div style="width: 100px; max-width: 50px; min-width: 20px"></div> + <div style="width: 100px; max-width: 50px; min-width: 150px"></div> + <div style="max-width: 50px; min-width: 150px"></div> + <div> + <div style="width: 50%;"></div> + </div> + <div> + <div style="width: 50%; max-width: 300px;"></div> + </div> + <div> + <div style="width: 50%; max-width: 100px;"></div> + </div> + <div> + <div style="width: 50%; max-width: 75%;"></div> + </div> + <div> + <div style="width: 50%; max-width: 10%;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 50%; max-width: 75%;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 50%; max-width: 10%;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 50%; max-width: 75%;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 50%; max-width: 10%;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/min-height-1-ref.html b/layout/reftests/box-properties/min-height-1-ref.html new file mode 100644 index 0000000000..a0f8fa5d77 --- /dev/null +++ b/layout/reftests/box-properties/min-height-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; + padding: 0; margin: 0; } + body > div:not(:empty) { height: 20px; } + </style> + </head> + <body> + <div style="height: 10px;"></div> + <div style="height: 15px;"></div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 15px;"></div> + </div> + <div> + <div style="height: 10px;"></div> + </div> + <div> + <div style="height: 15px;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 10px;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 15px;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 10px;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 15px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/min-height-1.html b/layout/reftests/box-properties/min-height-1.html new file mode 100644 index 0000000000..cc17951fda --- /dev/null +++ b/layout/reftests/box-properties/min-height-1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; + padding: 0; margin: 0; } + body > div:not(:empty) { height: 20px; } + </style> + </head> + <body> + <div style="height: 10px; min-height: 5px;"></div> + <div style="height: 10px; min-height: 15px;"></div> + <div> + <div style="height: 50%;"></div> + </div> + <div> + <div style="height: 50%; min-height: 5px;"></div> + </div> + <div> + <div style="height: 50%; min-height: 15px;"></div> + </div> + <div> + <div style="height: 50%; min-height: 10%;"></div> + </div> + <div> + <div style="height: 50%; min-height: 75%;"></div> + </div> + <div style="padding: 10px 0"> + <div style="height: 50%; min-height: 10%;"></div> + </div> + <div style="padding: 10px 0;"> + <div style="height: 50%; min-height: 75%;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 50%; min-height: 10%;"></div> + </div> + <div style="border-width: 10px 0; border-style: solid; + border-color: transparent;"> + <div style="height: 50%; min-height: 75%;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/min-width-1-ref.html b/layout/reftests/box-properties/min-width-1-ref.html new file mode 100644 index 0000000000..0af8138fa3 --- /dev/null +++ b/layout/reftests/box-properties/min-width-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; height: 10px; + padding: 0; margin: 0; } + body > div:not(:empty) { width: 400px; } + </style> + </head> + <body> + <div style="width: 100px;"></div> + <div style="width: 150px;"></div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 300px;"></div> + </div> + <div> + <div style="width: 200px;"></div> + </div> + <div> + <div style="width: 300px;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 200px;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 300px;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 200px;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 300px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/min-width-1.html b/layout/reftests/box-properties/min-width-1.html new file mode 100644 index 0000000000..e7624c254e --- /dev/null +++ b/layout/reftests/box-properties/min-width-1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div:empty { background: yellow; border: 1px solid black; height: 10px; + padding: 0; margin: 0; } + body > div:not(:empty) { width: 400px; } + </style> + </head> + <body> + <div style="width: 100px; min-width: 50px;"></div> + <div style="width: 100px; min-width: 150px;"></div> + <div> + <div style="width: 50%;"></div> + </div> + <div> + <div style="width: 50%; min-width: 100px;"></div> + </div> + <div> + <div style="width: 50%; min-width: 300px;"></div> + </div> + <div> + <div style="width: 50%; min-width: 10%;"></div> + </div> + <div> + <div style="width: 50%; min-width: 75%;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 50%; min-width: 10%;"></div> + </div> + <div style="padding: 0 100px;"> + <div style="width: 50%; min-width: 75%;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 50%; min-width: 10%;"></div> + </div> + <div style="border-width: 0 100px; border-style: solid; + border-color: transparent;"> + <div style="width: 50%; min-width: 75%;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html new file mode 100644 index 0000000000..a78e3a9e82 --- /dev/null +++ b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>intrinsic min-widths and max-widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 1px;">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 1px;">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 500px">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 500px">AA B</div> +</td></tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html new file mode 100644 index 0000000000..70fcf7cafd --- /dev/null +++ b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>intrinsic min-widths and max-widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> + +<table border><tr><td> + <div style="width: 1px; min-width: max-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 1px; min-width: max-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 1px; min-width: min-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 1px; min-width: min-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 1px; min-width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 1px; min-width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 1px; min-width: -moz-available">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 1px; min-width: -moz-available">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 500px; max-width: max-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 500px; max-width: max-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 500px; max-width: min-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 500px; max-width: min-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 500px; max-width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 500px; max-width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: 500px; max-width: -moz-available">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: 500px; max-width: -moz-available">AA B</div> +</td></tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-1-ref.html b/layout/reftests/box-properties/overflow-clip-box-1-ref.html new file mode 100644 index 0000000000..d75ef6c8d7 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-1-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testcase for bug 1422839</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0; +} + +div { + width: 0; + height: 0; + white-space: pre; + overflow: hidden; + border: 1px solid; + width: 100px; + height: 100px; +} +.h > div { height: 120px; } +.w > div { width: 120px; } + +c { + display: block; + width: 100px; + height: 40px; + border: 1px solid black; +} + +.float { float: left; } + +x { + display: block; + overflow: hidden; + padding-left: 50px; + padding-top: 50px; + width: 50px; + height: 50px; +} + +.w x { width: 20px; } +.h x { height: 20px; } +.w.h x { + background-color: lime; + background-clip: content-box; + overflow: visible; +} +y { + display: block; + overflow: hidden; + width: 20px; + height: 20px; +} + + </style> +</head> +<body> + +<span class="float"> +<div><x><c></c></x></div> +<div></div> +<div></div> +<div></div> +<div><x><c></c></x></div> +<div></div> +</span> + +<span class="float h"> +<div><x style="height:70px"><c></c></x></div> +<div></div> +<div></div> +<div><x><c></c></x></div> +<div><x style="height:70px"><c></c></x></div> +<div></div> +</span> + +<span class="float w"> +<div><x style="width:70px"><c></c></x></div> +<div></div> +<div><x><c></c></x></div> +<div></div> +<div><x style="width:70px"><c></c></x></div> +<div></div> +</span> + +<span class="float w h"> +<div><x><y style="height:70px; width:70px"><c></c></y></x></div> +<div><x><y><c></c></y></x></div> +<div><x><y style="height:70px"><c></c></y></x></div> +<div><x><y style="width:70px"><c></c></y></x></div> +<div><x><y style="height:70px; width:70px"><c></c></y></x></div> +<div><x><y><c></c></y></x></div> +</span> + +</body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-1.html b/layout/reftests/box-properties/overflow-clip-box-1.html new file mode 100644 index 0000000000..3c218e1315 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-1.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1422839</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0; +} + +div { + width: 0; + height: 0; + padding: 50px; + white-space: pre; + overflow: hidden; + background-color: lime; + background-clip: content-box; + border: 1px solid; +} + +.float { float: left; } +.w > div { width: 20px; } +.h > div { height: 20px; } + +c { + display: block; + width: 100px; + height: 40px; + border: 1px solid black; +} + </style> +</head> +<body> + +<span class="float"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float h"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float w"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float w h"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +</body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-2-ref.html b/layout/reftests/box-properties/overflow-clip-box-2-ref.html new file mode 100644 index 0000000000..93ee44f679 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-2-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testcase for bug 1422839</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0; +} + +div { + width: 0; + height: 0; + white-space: pre; + overflow: hidden; + border: 1px solid; + width: 100px; + height: 100px; + direction: rtl; +} +.h > div { height: 120px; } +.w > div { width: 120px; } + +c { + display: block; + width: 100px; + height: 40px; + border: 1px solid black; + margin-top: -10px; +} + +.float { float: left; } + +x { + display: block; + overflow: hidden; + padding-right: 50px; + padding-top: 50px; + width: 50px; + height: 50px; +} + +.w x { width: 20px; } +.h x { height: 20px; } +.w.h x { + background-color: lime; + background-clip: content-box; + overflow: visible; +} +y { + display: block; + overflow: hidden; + width: 20px; + height: 20px; +} + + </style> +</head> +<body> + +<span class="float"> +<div><x><c></c></x></div> +<div></div> +<div></div> +<div></div> +<div><x><c></c></x></div> +<div></div> +</span> + +<span class="float h"> +<div><x style="height:70px"><c></c></x></div> +<div></div> +<div></div> +<div><x style="height:20px"><c style="margin:0; border-top-width:0"></c></x></div> +<div><x style="height:70px"><c></c></x></div> +<div></div> +</span> + +<span class="float w"> +<div><x style="width:70px"><c></c></x></div> +<div></div> +<div><x><c></c></x></div> +<div></div> +<div><x style="width:70px"><c></c></x></div> +<div></div> +</span> + +<span class="float w h"> +<div><x><y style="height:70px; width:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div> +<div><x><y><c></c></y></x></div> +<div><x><y style="height:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div> +<div><x><y style="width:70px"><c></c></y></x></div> +<div><x><y style="height:70px; width:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div> +<div><x><y><c></c></y></x></div> +</span> + +</body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-2.html b/layout/reftests/box-properties/overflow-clip-box-2.html new file mode 100644 index 0000000000..225d894203 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-2.html @@ -0,0 +1,78 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1422839</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0; +} + +div { + width: 0; + height: 0; + padding: 50px; + white-space: pre; + overflow: hidden; + background-color: lime; + background-clip: content-box; + border: 1px solid; + direction: rtl; +} + +.float { float: left; } +.w > div { width: 20px; } +.h > div { height: 20px; } + +c { + display: block; + width: 100px; + height: 40px; + border: 1px solid black; + margin-top: -10px; +} + </style> +</head> +<body> + +<span class="float"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float h"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float w"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +<span class="float w h"> +<div style="overflow-clip-box: padding-box"><c></c></div> +<div style="overflow-clip-box: content-box"><c></c></div> +<div style="overflow-clip-box: padding-box content-box"><c></c></div> +<div style="overflow-clip-box: content-box padding-box"><c></c></div> +<div style="overflow-clip-box: padding-box padding-box"><c></c></div> +<div style="overflow-clip-box: content-box content-box"><c></c></div> +</span> + +</body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-3-ref.html b/layout/reftests/box-properties/overflow-clip-box-3-ref.html new file mode 100644 index 0000000000..be37f0aac6 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-3-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Reference for 'overflow-clip-box: content-box' (Bug 1226305)</title> + <style> + .test { + padding: 20px; + background: green content-box; + width: 300px; + height: 20px; + border: 1px solid; + } + </style> + + <body> + <p>There should be no red areas.</p> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + </body> +</html> diff --git a/layout/reftests/box-properties/overflow-clip-box-3.html b/layout/reftests/box-properties/overflow-clip-box-3.html new file mode 100644 index 0000000000..001e54d260 --- /dev/null +++ b/layout/reftests/box-properties/overflow-clip-box-3.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Testcase for 'overflow-clip-box: content-box' (Bug 1226305)</title> + <style> + .test { + overflow-clip-box: content-box; + overflow: hidden; + padding: 20px; + background: green content-box; + width: 300px; + height: 20px; + border: 1px solid; + } + .test > div { + margin-top: -40px; + height: 40px; + background: red; + } + </style> + + <body> + <p>There should be no red areas.</p> + <div class="test"><div>FAIL</div></div> + <div class="test"><div style="width: 200%">FAIL</div></div> + <div class="test"><div style="margin-left: 100%; height:20px; margin-top:0">FAIL</div></div> + <div class="test"><div style="margin-left: -100px">FAIL</div></div> + <div class="test"><div style="margin-left: -100%; width: 100%; height:20px; margin-top:0">FAIL</div></div> + </body> +</html> diff --git a/layout/reftests/box-properties/reftest.list b/layout/reftests/box-properties/reftest.list new file mode 100644 index 0000000000..877467b663 --- /dev/null +++ b/layout/reftests/box-properties/reftest.list @@ -0,0 +1,32 @@ +== min-width-1.html min-width-1-ref.html +== min-height-1.html min-height-1-ref.html +== max-width-1.html max-width-1-ref.html +== max-height-1.html max-height-1-ref.html +== width-special-values-block.html width-special-values-block-ref.html +== width-special-values-float.html width-special-values-block-ref.html +== width-special-values-image-block.html width-special-values-image-block-ref.html +== width-special-values-image.html width-special-values-image-ref.html +== width-special-values-block-intrinsic.html width-special-values-block-intrinsic-ref.html +== width-special-values-float-intrinsic.html width-special-values-block-intrinsic-ref.html +== minmax-width-special-values-block-intrinsic.html minmax-width-special-values-block-intrinsic-ref.html +== width-special-values-cell-auto.html width-special-values-cell-auto-ref.html +== width-special-values-cell-fixed.html width-special-values-cell-fixed-ref.html +== box-sizing-1.html box-sizing-1-ref.html +== box-sizing-2.html box-sizing-2-ref.html +== box-sizing-3.html box-sizing-1-ref.html +== box-sizing-4.html box-sizing-4-ref.html +== box-sizing-minmax-height.html box-sizing-minmax-height-ref.html +== box-sizing-minmax-width.html box-sizing-minmax-width-ref.html +== box-sizing-mozbox-minmax-height.html box-sizing-mozbox-minmax-height-ref.html +== abspos-non-replaced-width-offset-margin.html abspos-non-replaced-width-offset-margin-ref.html +== abspos-replaced-width-offset-margin.html abspos-replaced-width-offset-margin-ref.html +== CSS21-t100301.xhtml CSS21-t100301-ref.xhtml +== CSS21-t100303.xhtml CSS21-t100303-ref.xhtml +== CSS21-t100303-simple.xhtml CSS21-t100303-ref.xhtml +== CSS21-t100801-vertical-align.xhtml CSS21-t100801-vertical-align-ref.xhtml +== clip-auto.html clip-auto-ref.html +== clip-rect-auto.html clip-rect-auto-ref.html +== width-rounding.html width-rounding-ref.html +pref(layout.css.overflow-clip-box.enabled,true) == overflow-clip-box-1.html overflow-clip-box-1-ref.html +pref(layout.css.overflow-clip-box.enabled,true) == overflow-clip-box-2.html overflow-clip-box-2-ref.html +pref(layout.css.overflow-clip-box.enabled,true) == overflow-clip-box-3.html overflow-clip-box-3-ref.html diff --git a/layout/reftests/box-properties/width-rounding-ref.html b/layout/reftests/box-properties/width-rounding-ref.html new file mode 100644 index 0000000000..3f9166f863 --- /dev/null +++ b/layout/reftests/box-properties/width-rounding-ref.html @@ -0,0 +1,207 @@ +<!DOCTYPE HTML> +<title>width rounding (bug 590417)</title> +<style> + +p { margin: 0; height: 1px; background: blue; } + +</style> +<p style="width: 200.00px"></p> +<p style="width: 200.01px"></p> +<p style="width: 200.02px"></p> +<p style="width: 200.03px"></p> +<p style="width: 200.04px"></p> +<p style="width: 200.05px"></p> +<p style="width: 200.06px"></p> +<p style="width: 200.07px"></p> +<p style="width: 200.08px"></p> +<p style="width: 200.09px"></p> +<p style="width: 200.10px"></p> +<p style="width: 200.11px"></p> +<p style="width: 200.12px"></p> +<p style="width: 200.13px"></p> +<p style="width: 200.14px"></p> +<p style="width: 200.15px"></p> +<p style="width: 200.16px"></p> +<p style="width: 200.17px"></p> +<p style="width: 200.18px"></p> +<p style="width: 200.19px"></p> +<p style="width: 200.20px"></p> +<p style="width: 200.21px"></p> +<p style="width: 200.22px"></p> +<p style="width: 200.23px"></p> +<p style="width: 200.24px"></p> +<p style="width: 200.25px"></p> +<p style="width: 200.26px"></p> +<p style="width: 200.27px"></p> +<p style="width: 200.28px"></p> +<p style="width: 200.29px"></p> +<p style="width: 200.30px"></p> +<p style="width: 200.31px"></p> +<p style="width: 200.32px"></p> +<p style="width: 200.33px"></p> +<p style="width: 200.34px"></p> +<p style="width: 200.35px"></p> +<p style="width: 200.36px"></p> +<p style="width: 200.37px"></p> +<p style="width: 200.38px"></p> +<p style="width: 200.39px"></p> +<p style="width: 200.40px"></p> +<p style="width: 200.41px"></p> +<p style="width: 200.42px"></p> +<p style="width: 200.43px"></p> +<p style="width: 200.44px"></p> +<p style="width: 200.45px"></p> +<p style="width: 200.46px"></p> +<p style="width: 200.47px"></p> +<p style="width: 200.48px"></p> +<p style="width: 200.49px"></p> +<p style="width: 200.50px"></p> +<p style="width: 200.51px"></p> +<p style="width: 200.52px"></p> +<p style="width: 200.53px"></p> +<p style="width: 200.54px"></p> +<p style="width: 200.55px"></p> +<p style="width: 200.56px"></p> +<p style="width: 200.57px"></p> +<p style="width: 200.58px"></p> +<p style="width: 200.59px"></p> +<p style="width: 200.60px"></p> +<p style="width: 200.61px"></p> +<p style="width: 200.62px"></p> +<p style="width: 200.63px"></p> +<p style="width: 200.64px"></p> +<p style="width: 200.65px"></p> +<p style="width: 200.66px"></p> +<p style="width: 200.67px"></p> +<p style="width: 200.68px"></p> +<p style="width: 200.69px"></p> +<p style="width: 200.70px"></p> +<p style="width: 200.71px"></p> +<p style="width: 200.72px"></p> +<p style="width: 200.73px"></p> +<p style="width: 200.74px"></p> +<p style="width: 200.75px"></p> +<p style="width: 200.76px"></p> +<p style="width: 200.77px"></p> +<p style="width: 200.78px"></p> +<p style="width: 200.79px"></p> +<p style="width: 200.80px"></p> +<p style="width: 200.81px"></p> +<p style="width: 200.82px"></p> +<p style="width: 200.83px"></p> +<p style="width: 200.84px"></p> +<p style="width: 200.85px"></p> +<p style="width: 200.86px"></p> +<p style="width: 200.87px"></p> +<p style="width: 200.88px"></p> +<p style="width: 200.89px"></p> +<p style="width: 200.90px"></p> +<p style="width: 200.91px"></p> +<p style="width: 200.92px"></p> +<p style="width: 200.93px"></p> +<p style="width: 200.94px"></p> +<p style="width: 200.95px"></p> +<p style="width: 200.96px"></p> +<p style="width: 200.97px"></p> +<p style="width: 200.98px"></p> +<p style="width: 200.99px"></p> +<p style="width: 201.00px"></p> +<p style="width: 201.01px"></p> +<p style="width: 201.02px"></p> +<p style="width: 201.03px"></p> +<p style="width: 201.04px"></p> +<p style="width: 201.05px"></p> +<p style="width: 201.06px"></p> +<p style="width: 201.07px"></p> +<p style="width: 201.08px"></p> +<p style="width: 201.09px"></p> +<p style="width: 201.10px"></p> +<p style="width: 201.11px"></p> +<p style="width: 201.12px"></p> +<p style="width: 201.13px"></p> +<p style="width: 201.14px"></p> +<p style="width: 201.15px"></p> +<p style="width: 201.16px"></p> +<p style="width: 201.17px"></p> +<p style="width: 201.18px"></p> +<p style="width: 201.19px"></p> +<p style="width: 201.20px"></p> +<p style="width: 201.21px"></p> +<p style="width: 201.22px"></p> +<p style="width: 201.23px"></p> +<p style="width: 201.24px"></p> +<p style="width: 201.25px"></p> +<p style="width: 201.26px"></p> +<p style="width: 201.27px"></p> +<p style="width: 201.28px"></p> +<p style="width: 201.29px"></p> +<p style="width: 201.30px"></p> +<p style="width: 201.31px"></p> +<p style="width: 201.32px"></p> +<p style="width: 201.33px"></p> +<p style="width: 201.34px"></p> +<p style="width: 201.35px"></p> +<p style="width: 201.36px"></p> +<p style="width: 201.37px"></p> +<p style="width: 201.38px"></p> +<p style="width: 201.39px"></p> +<p style="width: 201.40px"></p> +<p style="width: 201.41px"></p> +<p style="width: 201.42px"></p> +<p style="width: 201.43px"></p> +<p style="width: 201.44px"></p> +<p style="width: 201.45px"></p> +<p style="width: 201.46px"></p> +<p style="width: 201.47px"></p> +<p style="width: 201.48px"></p> +<p style="width: 201.49px"></p> +<p style="width: 201.50px"></p> +<p style="width: 201.51px"></p> +<p style="width: 201.52px"></p> +<p style="width: 201.53px"></p> +<p style="width: 201.54px"></p> +<p style="width: 201.55px"></p> +<p style="width: 201.56px"></p> +<p style="width: 201.57px"></p> +<p style="width: 201.58px"></p> +<p style="width: 201.59px"></p> +<p style="width: 201.60px"></p> +<p style="width: 201.61px"></p> +<p style="width: 201.62px"></p> +<p style="width: 201.63px"></p> +<p style="width: 201.64px"></p> +<p style="width: 201.65px"></p> +<p style="width: 201.66px"></p> +<p style="width: 201.67px"></p> +<p style="width: 201.68px"></p> +<p style="width: 201.69px"></p> +<p style="width: 201.70px"></p> +<p style="width: 201.71px"></p> +<p style="width: 201.72px"></p> +<p style="width: 201.73px"></p> +<p style="width: 201.74px"></p> +<p style="width: 201.75px"></p> +<p style="width: 201.76px"></p> +<p style="width: 201.77px"></p> +<p style="width: 201.78px"></p> +<p style="width: 201.79px"></p> +<p style="width: 201.80px"></p> +<p style="width: 201.81px"></p> +<p style="width: 201.82px"></p> +<p style="width: 201.83px"></p> +<p style="width: 201.84px"></p> +<p style="width: 201.85px"></p> +<p style="width: 201.86px"></p> +<p style="width: 201.87px"></p> +<p style="width: 201.88px"></p> +<p style="width: 201.89px"></p> +<p style="width: 201.90px"></p> +<p style="width: 201.91px"></p> +<p style="width: 201.92px"></p> +<p style="width: 201.93px"></p> +<p style="width: 201.94px"></p> +<p style="width: 201.95px"></p> +<p style="width: 201.96px"></p> +<p style="width: 201.97px"></p> +<p style="width: 201.98px"></p> +<p style="width: 201.99px"></p> diff --git a/layout/reftests/box-properties/width-rounding.html b/layout/reftests/box-properties/width-rounding.html new file mode 100644 index 0000000000..418475f438 --- /dev/null +++ b/layout/reftests/box-properties/width-rounding.html @@ -0,0 +1,210 @@ +<!DOCTYPE HTML> +<title>width rounding (bug 590417)</title> +<style> + +p { margin: 0; background: blue } +p:after { display:block; clear: left; content: "" } +span { float: left; width: 30%; height: 1px } +span:first-child, span:first-child + span { width: 35% } + +</style> +<p style="width: 200.00px"><span></span><span></span><span></span></p> +<p style="width: 200.01px"><span></span><span></span><span></span></p> +<p style="width: 200.02px"><span></span><span></span><span></span></p> +<p style="width: 200.03px"><span></span><span></span><span></span></p> +<p style="width: 200.04px"><span></span><span></span><span></span></p> +<p style="width: 200.05px"><span></span><span></span><span></span></p> +<p style="width: 200.06px"><span></span><span></span><span></span></p> +<p style="width: 200.07px"><span></span><span></span><span></span></p> +<p style="width: 200.08px"><span></span><span></span><span></span></p> +<p style="width: 200.09px"><span></span><span></span><span></span></p> +<p style="width: 200.10px"><span></span><span></span><span></span></p> +<p style="width: 200.11px"><span></span><span></span><span></span></p> +<p style="width: 200.12px"><span></span><span></span><span></span></p> +<p style="width: 200.13px"><span></span><span></span><span></span></p> +<p style="width: 200.14px"><span></span><span></span><span></span></p> +<p style="width: 200.15px"><span></span><span></span><span></span></p> +<p style="width: 200.16px"><span></span><span></span><span></span></p> +<p style="width: 200.17px"><span></span><span></span><span></span></p> +<p style="width: 200.18px"><span></span><span></span><span></span></p> +<p style="width: 200.19px"><span></span><span></span><span></span></p> +<p style="width: 200.20px"><span></span><span></span><span></span></p> +<p style="width: 200.21px"><span></span><span></span><span></span></p> +<p style="width: 200.22px"><span></span><span></span><span></span></p> +<p style="width: 200.23px"><span></span><span></span><span></span></p> +<p style="width: 200.24px"><span></span><span></span><span></span></p> +<p style="width: 200.25px"><span></span><span></span><span></span></p> +<p style="width: 200.26px"><span></span><span></span><span></span></p> +<p style="width: 200.27px"><span></span><span></span><span></span></p> +<p style="width: 200.28px"><span></span><span></span><span></span></p> +<p style="width: 200.29px"><span></span><span></span><span></span></p> +<p style="width: 200.30px"><span></span><span></span><span></span></p> +<p style="width: 200.31px"><span></span><span></span><span></span></p> +<p style="width: 200.32px"><span></span><span></span><span></span></p> +<p style="width: 200.33px"><span></span><span></span><span></span></p> +<p style="width: 200.34px"><span></span><span></span><span></span></p> +<p style="width: 200.35px"><span></span><span></span><span></span></p> +<p style="width: 200.36px"><span></span><span></span><span></span></p> +<p style="width: 200.37px"><span></span><span></span><span></span></p> +<p style="width: 200.38px"><span></span><span></span><span></span></p> +<p style="width: 200.39px"><span></span><span></span><span></span></p> +<p style="width: 200.40px"><span></span><span></span><span></span></p> +<p style="width: 200.41px"><span></span><span></span><span></span></p> +<p style="width: 200.42px"><span></span><span></span><span></span></p> +<p style="width: 200.43px"><span></span><span></span><span></span></p> +<p style="width: 200.44px"><span></span><span></span><span></span></p> +<p style="width: 200.45px"><span></span><span></span><span></span></p> +<p style="width: 200.46px"><span></span><span></span><span></span></p> +<p style="width: 200.47px"><span></span><span></span><span></span></p> +<p style="width: 200.48px"><span></span><span></span><span></span></p> +<p style="width: 200.49px"><span></span><span></span><span></span></p> +<p style="width: 200.50px"><span></span><span></span><span></span></p> +<p style="width: 200.51px"><span></span><span></span><span></span></p> +<p style="width: 200.52px"><span></span><span></span><span></span></p> +<p style="width: 200.53px"><span></span><span></span><span></span></p> +<p style="width: 200.54px"><span></span><span></span><span></span></p> +<p style="width: 200.55px"><span></span><span></span><span></span></p> +<p style="width: 200.56px"><span></span><span></span><span></span></p> +<p style="width: 200.57px"><span></span><span></span><span></span></p> +<p style="width: 200.58px"><span></span><span></span><span></span></p> +<p style="width: 200.59px"><span></span><span></span><span></span></p> +<p style="width: 200.60px"><span></span><span></span><span></span></p> +<p style="width: 200.61px"><span></span><span></span><span></span></p> +<p style="width: 200.62px"><span></span><span></span><span></span></p> +<p style="width: 200.63px"><span></span><span></span><span></span></p> +<p style="width: 200.64px"><span></span><span></span><span></span></p> +<p style="width: 200.65px"><span></span><span></span><span></span></p> +<p style="width: 200.66px"><span></span><span></span><span></span></p> +<p style="width: 200.67px"><span></span><span></span><span></span></p> +<p style="width: 200.68px"><span></span><span></span><span></span></p> +<p style="width: 200.69px"><span></span><span></span><span></span></p> +<p style="width: 200.70px"><span></span><span></span><span></span></p> +<p style="width: 200.71px"><span></span><span></span><span></span></p> +<p style="width: 200.72px"><span></span><span></span><span></span></p> +<p style="width: 200.73px"><span></span><span></span><span></span></p> +<p style="width: 200.74px"><span></span><span></span><span></span></p> +<p style="width: 200.75px"><span></span><span></span><span></span></p> +<p style="width: 200.76px"><span></span><span></span><span></span></p> +<p style="width: 200.77px"><span></span><span></span><span></span></p> +<p style="width: 200.78px"><span></span><span></span><span></span></p> +<p style="width: 200.79px"><span></span><span></span><span></span></p> +<p style="width: 200.80px"><span></span><span></span><span></span></p> +<p style="width: 200.81px"><span></span><span></span><span></span></p> +<p style="width: 200.82px"><span></span><span></span><span></span></p> +<p style="width: 200.83px"><span></span><span></span><span></span></p> +<p style="width: 200.84px"><span></span><span></span><span></span></p> +<p style="width: 200.85px"><span></span><span></span><span></span></p> +<p style="width: 200.86px"><span></span><span></span><span></span></p> +<p style="width: 200.87px"><span></span><span></span><span></span></p> +<p style="width: 200.88px"><span></span><span></span><span></span></p> +<p style="width: 200.89px"><span></span><span></span><span></span></p> +<p style="width: 200.90px"><span></span><span></span><span></span></p> +<p style="width: 200.91px"><span></span><span></span><span></span></p> +<p style="width: 200.92px"><span></span><span></span><span></span></p> +<p style="width: 200.93px"><span></span><span></span><span></span></p> +<p style="width: 200.94px"><span></span><span></span><span></span></p> +<p style="width: 200.95px"><span></span><span></span><span></span></p> +<p style="width: 200.96px"><span></span><span></span><span></span></p> +<p style="width: 200.97px"><span></span><span></span><span></span></p> +<p style="width: 200.98px"><span></span><span></span><span></span></p> +<p style="width: 200.99px"><span></span><span></span><span></span></p> +<p style="width: 201.00px"><span></span><span></span><span></span></p> +<p style="width: 201.01px"><span></span><span></span><span></span></p> +<p style="width: 201.02px"><span></span><span></span><span></span></p> +<p style="width: 201.03px"><span></span><span></span><span></span></p> +<p style="width: 201.04px"><span></span><span></span><span></span></p> +<p style="width: 201.05px"><span></span><span></span><span></span></p> +<p style="width: 201.06px"><span></span><span></span><span></span></p> +<p style="width: 201.07px"><span></span><span></span><span></span></p> +<p style="width: 201.08px"><span></span><span></span><span></span></p> +<p style="width: 201.09px"><span></span><span></span><span></span></p> +<p style="width: 201.10px"><span></span><span></span><span></span></p> +<p style="width: 201.11px"><span></span><span></span><span></span></p> +<p style="width: 201.12px"><span></span><span></span><span></span></p> +<p style="width: 201.13px"><span></span><span></span><span></span></p> +<p style="width: 201.14px"><span></span><span></span><span></span></p> +<p style="width: 201.15px"><span></span><span></span><span></span></p> +<p style="width: 201.16px"><span></span><span></span><span></span></p> +<p style="width: 201.17px"><span></span><span></span><span></span></p> +<p style="width: 201.18px"><span></span><span></span><span></span></p> +<p style="width: 201.19px"><span></span><span></span><span></span></p> +<p style="width: 201.20px"><span></span><span></span><span></span></p> +<p style="width: 201.21px"><span></span><span></span><span></span></p> +<p style="width: 201.22px"><span></span><span></span><span></span></p> +<p style="width: 201.23px"><span></span><span></span><span></span></p> +<p style="width: 201.24px"><span></span><span></span><span></span></p> +<p style="width: 201.25px"><span></span><span></span><span></span></p> +<p style="width: 201.26px"><span></span><span></span><span></span></p> +<p style="width: 201.27px"><span></span><span></span><span></span></p> +<p style="width: 201.28px"><span></span><span></span><span></span></p> +<p style="width: 201.29px"><span></span><span></span><span></span></p> +<p style="width: 201.30px"><span></span><span></span><span></span></p> +<p style="width: 201.31px"><span></span><span></span><span></span></p> +<p style="width: 201.32px"><span></span><span></span><span></span></p> +<p style="width: 201.33px"><span></span><span></span><span></span></p> +<p style="width: 201.34px"><span></span><span></span><span></span></p> +<p style="width: 201.35px"><span></span><span></span><span></span></p> +<p style="width: 201.36px"><span></span><span></span><span></span></p> +<p style="width: 201.37px"><span></span><span></span><span></span></p> +<p style="width: 201.38px"><span></span><span></span><span></span></p> +<p style="width: 201.39px"><span></span><span></span><span></span></p> +<p style="width: 201.40px"><span></span><span></span><span></span></p> +<p style="width: 201.41px"><span></span><span></span><span></span></p> +<p style="width: 201.42px"><span></span><span></span><span></span></p> +<p style="width: 201.43px"><span></span><span></span><span></span></p> +<p style="width: 201.44px"><span></span><span></span><span></span></p> +<p style="width: 201.45px"><span></span><span></span><span></span></p> +<p style="width: 201.46px"><span></span><span></span><span></span></p> +<p style="width: 201.47px"><span></span><span></span><span></span></p> +<p style="width: 201.48px"><span></span><span></span><span></span></p> +<p style="width: 201.49px"><span></span><span></span><span></span></p> +<p style="width: 201.50px"><span></span><span></span><span></span></p> +<p style="width: 201.51px"><span></span><span></span><span></span></p> +<p style="width: 201.52px"><span></span><span></span><span></span></p> +<p style="width: 201.53px"><span></span><span></span><span></span></p> +<p style="width: 201.54px"><span></span><span></span><span></span></p> +<p style="width: 201.55px"><span></span><span></span><span></span></p> +<p style="width: 201.56px"><span></span><span></span><span></span></p> +<p style="width: 201.57px"><span></span><span></span><span></span></p> +<p style="width: 201.58px"><span></span><span></span><span></span></p> +<p style="width: 201.59px"><span></span><span></span><span></span></p> +<p style="width: 201.60px"><span></span><span></span><span></span></p> +<p style="width: 201.61px"><span></span><span></span><span></span></p> +<p style="width: 201.62px"><span></span><span></span><span></span></p> +<p style="width: 201.63px"><span></span><span></span><span></span></p> +<p style="width: 201.64px"><span></span><span></span><span></span></p> +<p style="width: 201.65px"><span></span><span></span><span></span></p> +<p style="width: 201.66px"><span></span><span></span><span></span></p> +<p style="width: 201.67px"><span></span><span></span><span></span></p> +<p style="width: 201.68px"><span></span><span></span><span></span></p> +<p style="width: 201.69px"><span></span><span></span><span></span></p> +<p style="width: 201.70px"><span></span><span></span><span></span></p> +<p style="width: 201.71px"><span></span><span></span><span></span></p> +<p style="width: 201.72px"><span></span><span></span><span></span></p> +<p style="width: 201.73px"><span></span><span></span><span></span></p> +<p style="width: 201.74px"><span></span><span></span><span></span></p> +<p style="width: 201.75px"><span></span><span></span><span></span></p> +<p style="width: 201.76px"><span></span><span></span><span></span></p> +<p style="width: 201.77px"><span></span><span></span><span></span></p> +<p style="width: 201.78px"><span></span><span></span><span></span></p> +<p style="width: 201.79px"><span></span><span></span><span></span></p> +<p style="width: 201.80px"><span></span><span></span><span></span></p> +<p style="width: 201.81px"><span></span><span></span><span></span></p> +<p style="width: 201.82px"><span></span><span></span><span></span></p> +<p style="width: 201.83px"><span></span><span></span><span></span></p> +<p style="width: 201.84px"><span></span><span></span><span></span></p> +<p style="width: 201.85px"><span></span><span></span><span></span></p> +<p style="width: 201.86px"><span></span><span></span><span></span></p> +<p style="width: 201.87px"><span></span><span></span><span></span></p> +<p style="width: 201.88px"><span></span><span></span><span></span></p> +<p style="width: 201.89px"><span></span><span></span><span></span></p> +<p style="width: 201.90px"><span></span><span></span><span></span></p> +<p style="width: 201.91px"><span></span><span></span><span></span></p> +<p style="width: 201.92px"><span></span><span></span><span></span></p> +<p style="width: 201.93px"><span></span><span></span><span></span></p> +<p style="width: 201.94px"><span></span><span></span><span></span></p> +<p style="width: 201.95px"><span></span><span></span><span></span></p> +<p style="width: 201.96px"><span></span><span></span><span></span></p> +<p style="width: 201.97px"><span></span><span></span><span></span></p> +<p style="width: 201.98px"><span></span><span></span><span></span></p> +<p style="width: 201.99px"><span></span><span></span><span></span></p> diff --git a/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html b/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html new file mode 100644 index 0000000000..819244746e --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border><tr><td> + <div>AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div>AA B</div> +</td></tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-block-intrinsic.html b/layout/reftests/box-properties/width-special-values-block-intrinsic.html new file mode 100644 index 0000000000..264e4e117d --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-block-intrinsic.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> +</head> +<body> + +<table border><tr><td> + <div style="width: max-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: max-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: min-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: min-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: -moz-available">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: -moz-available">AA B</div> +</td></tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-block-ref.html b/layout/reftests/box-properties/width-special-values-block-ref.html new file mode 100644 index 0000000000..35ccc45afd --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-block-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 1px; + float: left; + clear: left; + } + + div.fill { width: 37px; } + + </style> +</head> +<body style="width: 100px"> +<div class="">A B</div> +<div class="">A B</div> +<div class="">A B</div> +<div class="">A <br>B</div> +<div class="">A <br>B</div> +<div class="">A <br>B</div> +<div class="">A B</div> +<div class="">A B</div> +<div class="">A B</div> +<div class="fill">A B C D E F G H I J</div> +<div class="fill">A B C D E F G H I J</div> +<div class="fill">A B C D E F G H I J</div> +<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div> +<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div> +<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div> +<div class="fill">A B</div> +<div class="fill">A B</div> +<div class="fill">A B</div> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-block.html b/layout/reftests/box-properties/width-special-values-block.html new file mode 100644 index 0000000000..4bafc45652 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-block.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + margin-bottom: 1px; + } + + div.v1 { width: max-content; } + div.v2 { width: min-content; } + div.v3 { width: -moz-fit-content; } + div.v4 { width: -moz-available; } + + div.s1 { box-sizing: content; } + div.s2 { box-sizing: padding; } + div.s3 { box-sizing: border; } + + </style> +</head> +<body style="width: 100px"> +<div class="v1 s1">A B</div> +<div class="v1 s2">A B</div> +<div class="v1 s3">A B</div> +<div class="v2 s1">A B</div> +<div class="v2 s2">A B</div> +<div class="v2 s3">A B</div> +<div class="v3 s1">A B</div> +<div class="v3 s2">A B</div> +<div class="v3 s3">A B</div> +<div class="v3 s1">A B C D E F G H I J</div> +<div class="v3 s2">A B C D E F G H I J</div> +<div class="v3 s3">A B C D E F G H I J</div> +<div class="v3 s1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v3 s2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v3 s3">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v4 s1">A B</div> +<div class="v4 s2">A B</div> +<div class="v4 s3">A B</div> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-cell-auto-ref.html b/layout/reftests/box-properties/width-special-values-cell-auto-ref.html new file mode 100644 index 0000000000..48ce0005d2 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-cell-auto-ref.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: auto</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + td td { + border-left: 1px solid; + padding-left: 2px; + padding-right: 4px; + border-right: 8px solid; + + background: yellow; + } + + </style> +</head> +<body> + +<table border><tr> +<td> +<!-- width --> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> + +</td> +<td> +<!-- min-width --> + +<table border><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> + +<table border><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> + +</td> +<td> +<!-- max-width --> + +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> + +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td>A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> +<table border><tr><td style="width: 150px">A B</td></tr></table> +<table border width="1"><tr><td>A B</td></tr></table> + + +</td> +</tr></table> + + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-cell-auto.html b/layout/reftests/box-properties/width-special-values-cell-auto.html new file mode 100644 index 0000000000..d0d47c1891 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-cell-auto.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: auto</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + td td { + border-left: 1px solid; + padding-left: 2px; + padding-right: 4px; + border-right: 8px solid; + + background: yellow; + } + + </style> +</head> +<body> + +<table border><tr> +<td> +<!-- width --> +<table border><tr><td style="width: max-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: max-content">A B</td></tr></table> +<table border><tr><td style="width: min-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: min-content">A B</td></tr></table> +<table border><tr><td style="width: -moz-fit-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: -moz-fit-content">A B</td></tr></table> +<table border><tr><td style="width: -moz-available">A B</td></tr></table> +<table border width="1"><tr><td style="width: -moz-available">A B</td></tr></table> + +</td> +<td> +<!-- min-width --> + +<table border><tr><td style="min-width: max-content">A B</td></tr></table> +<table border width="1"><tr><td style="min-width: max-content">A B</td></tr></table> +<table border><tr><td style="min-width: min-content">A B</td></tr></table> +<table border width="1"><tr><td style="min-width: min-content">A B</td></tr></table> +<table border><tr><td style="min-width: -moz-fit-content">A B</td></tr></table> +<table border width="1"><tr><td style="min-width: -moz-fit-content">A B</td></tr></table> +<table border><tr><td style="min-width: -moz-available">A B</td></tr></table> +<table border width="1"><tr><td style="min-width: -moz-available">A B</td></tr></table> + +<table border><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table> +<table border><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table> +<table border><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table> +<table border><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table> +<table border width="1"><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table> + +</td> +<td> +<!-- max-width --> + +<table border><tr><td style="max-width: max-content">A B</td></tr></table> +<table border width="1"><tr><td style="max-width: max-content">A B</td></tr></table> +<table border><tr><td style="max-width: min-content">A B</td></tr></table> +<table border width="1"><tr><td style="max-width: min-content">A B</td></tr></table> +<table border><tr><td style="max-width: -moz-fit-content">A B</td></tr></table> +<table border width="1"><tr><td style="max-width: -moz-fit-content">A B</td></tr></table> +<table border><tr><td style="max-width: -moz-available">A B</td></tr></table> +<table border width="1"><tr><td style="max-width: -moz-available">A B</td></tr></table> + +<table border><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table> +<table border><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table> +<table border><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table> +<table border width="1"><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table> +<table border><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table> +<table border width="1"><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table> + + +</td> +</tr></table> + + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html b/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html new file mode 100644 index 0000000000..04cb8afc15 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: fixed</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + td table { width: 200px; } + td td:first-child { + border-left: 1px solid; + padding-left: 2px; + padding-right: 4px; + border-right: 8px solid; + + background: yellow; + } + + </style> +</head> +<body> + +<table border><tr> +<td> +<!-- width --> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> + +</td> +<td> +<!-- min-width --> + +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> + +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1"><div style="width: 1px">A B</div></td><td></td></tr></table> + +</td> +<td> +<!-- max-width --> + +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> +<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table> + +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="1">A B</td><td></td></tr></table> +<table border><tr><td width="150">A B</td><td></td></tr></table> + +</td> +</tr></table> + + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-cell-fixed.html b/layout/reftests/box-properties/width-special-values-cell-fixed.html new file mode 100644 index 0000000000..c258ce6e0f --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-cell-fixed.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: fixed</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + td table { table-layout: fixed; width: 200px; } + td td:first-child { + border-left: 1px solid; + padding-left: 2px; + padding-right: 4px; + border-right: 8px solid; + + background: yellow; + } + + </style> +</head> +<body> + +<table border><tr> +<td> +<!-- width --> +<table border><tr><td style="width: max-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: min-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: -moz-fit-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: -moz-available">A B</td><td></td></tr></table> + +</td> +<td> +<!-- min-width --> + +<table border><tr><td style="min-width: max-content">A B</td><td></td></tr></table> +<table border><tr><td style="min-width: min-content">A B</td><td></td></tr></table> +<table border><tr><td style="min-width: -moz-fit-content">A B</td><td></td></tr></table> +<table border><tr><td style="min-width: -moz-available">A B</td><td></td></tr></table> + +<table border><tr><td style="width: 1px; min-width: max-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 1px; min-width: min-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 1px; min-width: -moz-available">A B</td><td></td></tr></table> + +</td> +<td> +<!-- max-width --> + +<table border><tr><td style="max-width: max-content">A B</td><td></td></tr></table> +<table border><tr><td style="max-width: min-content">A B</td><td></td></tr></table> +<table border><tr><td style="max-width: -moz-fit-content">A B</td><td></td></tr></table> +<table border><tr><td style="max-width: -moz-available">A B</td><td></td></tr></table> + +<table border><tr><td style="width: 150px; max-width: max-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 150px; max-width: min-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td><td></td></tr></table> +<table border><tr><td style="width: 150px; max-width: -moz-available">A B</td><td></td></tr></table> + + +</td> +</tr></table> + + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-float-intrinsic.html b/layout/reftests/box-properties/width-special-values-float-intrinsic.html new file mode 100644 index 0000000000..e11c9d18de --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-float-intrinsic.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + div { float: left; clear: left; } + + </style> +</head> +<body> + +<table border><tr><td> + <div style="width: max-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: max-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: min-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: min-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: -moz-fit-content">AA B</div> +</td></tr></table> + +<table border><tr><td> + <div style="width: -moz-available">AA B</div> +</td></tr></table> + +<table border width="1"><tr><td> + <div style="width: -moz-available">AA B</div> +</td></tr></table> + +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-float.html b/layout/reftests/box-properties/width-special-values-float.html new file mode 100644 index 0000000000..d85a86bb30 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-float.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + body { font-size: 10px; line-height: 1; } + + div { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + + background: yellow; + float: left; + clear: left; + margin-bottom: 1px; + } + + div.v1 { width: max-content; } + div.v2 { width: min-content; } + div.v3 { width: -moz-fit-content; } + div.v4 { width: -moz-available; } + + div.s1 { box-sizing: content; } + div.s2 { box-sizing: padding; } + div.s3 { box-sizing: border; } + + </style> +</head> +<body style="width: 100px"> +<div class="v1 s1">A B</div> +<div class="v1 s2">A B</div> +<div class="v1 s3">A B</div> +<div class="v2 s1">A B</div> +<div class="v2 s2">A B</div> +<div class="v2 s3">A B</div> +<div class="v3 s1">A B</div> +<div class="v3 s2">A B</div> +<div class="v3 s3">A B</div> +<div class="v3 s1">A B C D E F G H I J</div> +<div class="v3 s2">A B C D E F G H I J</div> +<div class="v3 s3">A B C D E F G H I J</div> +<div class="v3 s1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v3 s2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v3 s3">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div> +<div class="v4 s1">A B</div> +<div class="v4 s2">A B</div> +<div class="v4 s3">A B</div> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-image-block-ref.html b/layout/reftests/box-properties/width-special-values-image-block-ref.html new file mode 100644 index 0000000000..eb355396f4 --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-image-block-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on block images</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + img { + display: block; + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + box-sizing: content; + margin-bottom: 1px; + } + + img.v1 { } + img.v2 { } + img.v3 { } + img.v4 { width: 37px; } + + </style> +</head> +<body style="width: 100px"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3"> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-image-block.html b/layout/reftests/box-properties/width-special-values-image-block.html new file mode 100644 index 0000000000..fece4995bb --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-image-block.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on block images</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + img { + display: block; + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + margin-bottom: 1px; + } + + img.v1 { width: max-content; } + img.v2 { width: min-content; } + img.v3 { width: -moz-fit-content; } + img.v4 { width: -moz-available; } + + img.s1 { box-sizing: content; } + img.s2 { box-sizing: padding; } + img.s3 { box-sizing: border; } + + </style> +</head> +<body style="width: 100px"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3"> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-image-ref.html b/layout/reftests/box-properties/width-special-values-image-ref.html new file mode 100644 index 0000000000..27abce494f --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-image-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on inline images</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + img { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + box-sizing: content; + margin-bottom: 1px; + } + + img.v1 { } + img.v2 { } + img.v3 { } + img.v4 { width: 37px; } + + </style> +</head> +<body style="width: 100px"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3"> +</body> +</html> diff --git a/layout/reftests/box-properties/width-special-values-image.html b/layout/reftests/box-properties/width-special-values-image.html new file mode 100644 index 0000000000..c3b09b60bf --- /dev/null +++ b/layout/reftests/box-properties/width-special-values-image.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on inline images</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + img { + margin-left: 1px; + border-left: 2px solid; + padding-left: 4px; + padding-right: 8px; + border-right: 16px solid; + margin-right: 32px; + margin-bottom: 1px; + } + + img.v1 { width: max-content; } + img.v2 { width: min-content; } + img.v3 { width: -moz-fit-content; } + img.v4 { width: -moz-available; } + + img.s1 { box-sizing: content; } + img.s2 { box-sizing: padding; } + img.s3 { box-sizing: border; } + + </style> +</head> +<body style="width: 100px"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2"> +<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3"> +</body> +</html> diff --git a/layout/reftests/box-shadow/1178575-2-ref.html b/layout/reftests/box-shadow/1178575-2-ref.html new file mode 100644 index 0000000000..2e2b09a57c --- /dev/null +++ b/layout/reftests/box-shadow/1178575-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:20px; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + height: 40px; + } + + span { + position: relative; + display: block; + overflow: hidden; + height: 100px; + } + + </style> +</head> +<body><span><div></div><span></body></html> diff --git a/layout/reftests/box-shadow/1178575-2.html b/layout/reftests/box-shadow/1178575-2.html new file mode 100644 index 0000000000..7bcdadcb8e --- /dev/null +++ b/layout/reftests/box-shadow/1178575-2.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:20px; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + } + + span { + position: relative; + display: block; + overflow: hidden; + height: 200px; + } + + </style> +<script> +function tweak() { + document.querySelector('div').style.height = "40px"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", tweak); +</script> +</head> +<body><span><div></div><span></body></html> diff --git a/layout/reftests/box-shadow/1178575-ref.html b/layout/reftests/box-shadow/1178575-ref.html new file mode 100644 index 0000000000..3a6442dddb --- /dev/null +++ b/layout/reftests/box-shadow/1178575-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + height: 3em; + } + + </style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/box-shadow/1178575.html b/layout/reftests/box-shadow/1178575.html new file mode 100644 index 0000000000..8b54c1c7e7 --- /dev/null +++ b/layout/reftests/box-shadow/1178575.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase for bug 1178575</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + div { + position: absolute; + left: 0; + right: 0; + box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5); + margin-top: 10px; + } + + </style> +<script> +function tweak() { + document.querySelector('div').style.height = "3em"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", tweak); +</script> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/box-shadow/1212823-1-ref.html b/layout/reftests/box-shadow/1212823-1-ref.html new file mode 100644 index 0000000000..91cf26d3cc --- /dev/null +++ b/layout/reftests/box-shadow/1212823-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="width:314px; height:16px; top:10px; position:absolute; left:200px; background-color:red; z-index:-1"></div> +<input style="width:300px; height:10px;"></input> +</body> +</html> diff --git a/layout/reftests/box-shadow/1212823-1.html b/layout/reftests/box-shadow/1212823-1.html new file mode 100644 index 0000000000..2337ddf75f --- /dev/null +++ b/layout/reftests/box-shadow/1212823-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> +<input style="width:300px; height:10px; box-shadow: 200px 0px 0px 0px red;"></input> +</body> +</html> diff --git a/layout/reftests/box-shadow/1212823-2-ref.html b/layout/reftests/box-shadow/1212823-2-ref.html new file mode 100644 index 0000000000..531d868bca --- /dev/null +++ b/layout/reftests/box-shadow/1212823-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<!-- This relies on the precise widget etc values. Feel free to adjust this as + needed as long as the bug itself doesn't regress. font-size: 0 and + vertical-align: top avoids depending on font metrics --> +<div style="width: 316px; height: 6px; position: absolute; left: 200px; border-radius: 2px; background-color: red; z-index:-1"></div> +<input style="width: 300px; font-size: 0; vertical-align: top"></input> diff --git a/layout/reftests/box-shadow/1212823-2.html b/layout/reftests/box-shadow/1212823-2.html new file mode 100644 index 0000000000..2736787d5f --- /dev/null +++ b/layout/reftests/box-shadow/1212823-2.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<input style="width: 300px; box-shadow: 200px 0px 0px 0px red; font-size: 0; vertical-align: top"></input> diff --git a/layout/reftests/box-shadow/611574-1-ref.html b/layout/reftests/box-shadow/611574-1-ref.html new file mode 100644 index 0000000000..53fce85e47 --- /dev/null +++ b/layout/reftests/box-shadow/611574-1-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html><head><style> +button,span,fieldset { background-color: #0F0; break-inside:avoid; } +body { font-size:12px; } +</style></head> +<body> +<div style="column-count:3;height:600px;column-fill:auto"> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> + +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> + +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span style="box-sizing:border-box;">No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> + +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span style="box-sizing:border-box;">2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> + +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset><legend>No</legend> Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> + +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-1.html b/layout/reftests/box-shadow/611574-1.html new file mode 100644 index 0000000000..b155f5a414 --- /dev/null +++ b/layout/reftests/box-shadow/611574-1.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html><head><style> +button,span,fieldset { background-color: #0F0; break-inside:avoid; } +body { font-size:12px; } +</style></head> +<body> +<div style="column-count:3;height:600px;column-fill:auto"> +<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button> + +<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button> + +<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span> + +<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span> + +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-2-ref.html b/layout/reftests/box-shadow/611574-2-ref.html new file mode 100644 index 0000000000..b6f50300d9 --- /dev/null +++ b/layout/reftests/box-shadow/611574-2-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html> +<head><style> +button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; } +button { border: none; outline: 3px solid black; outline-offset: -2px; } +</style></head> +<body style="margin:30px"> +<div style="column-count:3; column-fill:auto; height:600px"> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> +<p><button>No Blur Radius</button> + +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> +<p><button>2px Blur Radius</button> + +<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the test +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span style="box-sizing:border-box;">No Blur Radius</span> +<p><span>No Blur Radius</span> +<p><span>No Blur Radius</span> + +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span style="box-sizing:border-box;">2px Blur Radius</span> +<p><span>2px Blur Radius</span> +<p><span>2px Blur Radius</span> +--> + +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset><legend>No</legend> Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> +<p><fieldset>No Blur Radius</fieldset> + +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> +<p><fieldset>2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;">2px Blur Radius</fieldset> + +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/611574-2.html b/layout/reftests/box-shadow/611574-2.html new file mode 100644 index 0000000000..db9c2df899 --- /dev/null +++ b/layout/reftests/box-shadow/611574-2.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML> +<html> +<head><style> +button,span,fieldset { border-radius: 7px 3px; background-color: #0F0; } +button { border: none; outline: 3px solid black; outline-offset: -2px; } +</style></head> +<body style="margin:30px"> +<div style="column-count:3; column-fill:auto; height:600px"> +<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button> + +<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button> +<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button> + +<!-- XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference +<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span> + +<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</span> +<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span> +<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span> +--> + +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 20px 10px 0 #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset> + +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 20px 10px 2px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset> +<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset> + +</div> + + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-basic-ref.html b/layout/reftests/box-shadow/boxshadow-basic-ref.html new file mode 100644 index 0000000000..0a4639491b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-basic-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 2; +} + +#theshadow { + background-color: black; + width: 300px; + height: 100px; + position: absolute; + top: 23px; + left: 23px; + z-index: 1; +} +</style> + +<div id="theshadow"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-basic.html b/layout/reftests/box-shadow/boxshadow-basic.html new file mode 100644 index 0000000000..0870136d3d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-basic.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px black; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-notref.html b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html new file mode 100644 index 0000000000..130d921585 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> +<div style="position:absolute; background: white; top: 100px; left: 212px; height: 2px; width: 2px"></div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-ref.html b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html new file mode 100644 index 0000000000..73d192a7ee --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> +<div style="position:absolute; background: white; top: 100px; left: 215px; height: 2px; width: 2px"></div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-2.html b/layout/reftests/box-shadow/boxshadow-blur-2.html new file mode 100644 index 0000000000..173e724de3 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-2.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +body { margin: 0 } +p { +height: 1200px; +width: 100px; +box-shadow: 0px -100px 100px black; +} +</style> +<p> diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref.html b/layout/reftests/box-shadow/boxshadow-blur-notref.html new file mode 100644 index 0000000000..890c8e39ca --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px red; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref2.html b/layout/reftests/box-shadow/boxshadow-blur-notref2.html new file mode 100644 index 0000000000..fdfdc48f5f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur-notref2.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-blur.html b/layout/reftests/box-shadow/boxshadow-blur.html new file mode 100644 index 0000000000..f70c1cd1c0 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-blur.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px 2px red; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html new file mode 100644 index 0000000000..e797c61a26 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html @@ -0,0 +1,31 @@ +<html> +<style> +#boxShadow { + height: 210px; + width: 290px; + box-shadow: 0px 0px 2px graytext inset; +} + +#leftCover { + width: 30px; + height: 300px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; +} + +#rightCover { + width: 20px; + height: 300px; + background-color: white; + position: absolute; + top: 0px; + left: 280px; +} +</style> +<body> +<div id="boxShadow">test</div> +<div id="leftCover"></div> +<div id="rightCover"></div> +</body> diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int.html b/layout/reftests/box-shadow/boxshadow-border-radius-int.html new file mode 100644 index 0000000000..737641576a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-border-radius-int.html @@ -0,0 +1,32 @@ +<html> +<style> +#boxShadow { + height: 210px; + width: 290px; + border-radius: 11px; + box-shadow: 0px 0px 2px graytext inset; +} + +#leftCover { + width: 30px; + height: 300px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; +} + +#rightCover { + width: 20px; + height: 300px; + background-color: white; + position: absolute; + top: 0px; + left: 280px; +} +</style> +<body> +<div id="boxShadow">test</div> +<div id="leftCover"></div> +<div id="rightCover"></div> +</body> diff --git a/layout/reftests/box-shadow/boxshadow-button-ref.html b/layout/reftests/box-shadow/boxshadow-button-ref.html new file mode 100644 index 0000000000..9d026129d4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-button-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> +#a, #b { + width: 100px; + height: 100px; + background-color: grey; + -moz-appearance: none; + box-shadow: 4px 4px 3px black; + border: none !important; + position: absolute; +} + +#a { + top: 20px; + left: 20px; +} + +#b { + top: 170px; + left: 20px; +</style> + +<div id="a"> </div> +<div id="b"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-button.html b/layout/reftests/box-shadow/boxshadow-button.html new file mode 100644 index 0000000000..f1522536db --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-button.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> +#a, #b { + width: 100px; + height: 100px; + background-color: grey; + -moz-appearance: none; + box-shadow: 4px 4px 3px black; + border: none !important; + position: absolute; +} + +#a { + top: 20px; + left: 20px; +} + +#b { + top: 170px; + left: 20px; +</style> + +<input type="button" id="a" value=""></input> +<button id="b"></button> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html new file mode 100644 index 0000000000..aa2a57e81d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +#outerDiv { + width: 500px; + height: 500px; + background: lime; + position: absolute; +} + +#middleBlur { + width: 300px; + height: 300px; + margin-left: 100px; + margin-top: 100px; + background: black; + box-shadow: inset 0 0 20px 100px lime; +} +</style> + +<div id="outerDiv"> + <div id="middleBlur"> + </div> +</div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html new file mode 100644 index 0000000000..1693fb9a3d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 500px; + height: 500px; + background: black; + box-shadow: inset 0 0 20px 200px lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html new file mode 100644 index 0000000000..95fa9075ed --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 300px; + height: 300px; + background: lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding.html b/layout/reftests/box-shadow/boxshadow-color-rounding.html new file mode 100644 index 0000000000..057c077eb6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-color-rounding.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#thediv { + width: 300px; + height: 300px; + background: black; + box-shadow: inset 0 0 20px 200px lime; +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml new file mode 100644 index 0000000000..0aaddc1a18 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<hbox flex="1" + style="margin:50px; background:yellow; + box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255); + border-radius: 10px;"/> +</window> diff --git a/layout/reftests/box-shadow/boxshadow-dynamic.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml new file mode 100644 index 0000000000..97ad1c57ea --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0"?> +<?xml-stylesheet type="text/css" href="data:text/css, + +hbox { + margin: 50px; + background: yellow; +} + +hbox[x] { + box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255); + border-radius: 10px; +} + +"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + class="reftest-wait"> + + <script> + <![CDATA[ + + document.documentElement.addEventListener("MozReftestInvalidate", + doTest, false); + + function doTest() { + document.getElementById("hbox1").setAttribute("x",1); + document.documentElement.removeAttribute("class"); + } + + ]]> + </script> + + <hbox id="hbox1" flex="1"/> +</window> diff --git a/layout/reftests/box-shadow/boxshadow-fileupload-ref.html b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html new file mode 100644 index 0000000000..ab36e2af5c --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html><head> + +<style> +#s { + position: absolute; + top: 20px; + left: 20px; + display: block; + width: 400px; + height: 150px; +} + +#p { + background-color: black; + width: 400px; + height: 150px; + position: absolute; + top: 270px; + left: 20px; +} +</style> + +</head> +<body> + +<input type="file" id="s" /> +<div id="p"> </div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-fileupload.html b/layout/reftests/box-shadow/boxshadow-fileupload.html new file mode 100644 index 0000000000..28ca6ea4e4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-fileupload.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + +<style> +#s { + position: absolute; + top: 20px; + left: 20px; + display: block; + width: 400px; + height: 150px; + box-shadow: 0px 250px black; +} +</style> + +</head> +<body> + +<input type="file" id="s" /> + +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg new file mode 100644 index 0000000000..ed63f9a9ae --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> +<!-- This reference SVG must perform *exactly* the same path construction, + clipping, and filling operations that PaintBoxShadowInner does for + the HTML test file. If it doesn't match perfectly, antialiased + pixels at the curved edges will not agree. + + PaintBoxShadowInner defines both its second (nonrectangular) + clipping path and its fill path as the even-odd-rule compositions + of two rectangles, one with nonzero corner radius. It is + impossible to express "the path consisting of the even-odd-rule + composition of two |rect| elements" in SVG. This is a minor + nuisance because we have to write everything out using |path|, + plus a major nuisance because Gecko uses the same ellipse-to- + Bezier conversion for rounded rectangles in SVG and HTML, but the + SVG 'A' operator uses a different one. Therefore we cannot use 'A'. + The 'C' parameters here were obtained by dumping out the cairo + operations used to draw the HTML, using cairo-trace. --> + <defs> + <clipPath id="outer"> + <rect x="16" y="16" width="240" height="240"/> + </clipPath> + <clipPath id="inner"> + <path clip-rule="evenodd" + d="M 248 16 + H 24 C 19.58468 16 16 19.58468 16 24 + V 248 C 16 252.41532 19.58468 256 24 256 + H 248 C 252.41532 256 256 252.41532 256 248 + V 24 C 256 19.58468 252.41532 16 248 16 Z + M 48 56 H 272 V 296 H 48 Z"/> + </clipPath> + </defs> + <g clip-path="url(#outer)"> + <path fill="grey" fill-rule="evenodd" clip-path="url(#inner)" + d="M 16 16 H 256 V 256 H 16 Z + M 280 48 + H 56 C 51.58468 48 48 51.58468 48 56 + V 280 C 48 284.41532 51.58468 288 56 288 + H 280 C 284.41532 288 288 284.41532 288 280 + V 56 C 288 51.58468 284.41532 48 280 48 Z"/> + </g> +</svg> diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic.html b/layout/reftests/box-shadow/boxshadow-inner-basic.html new file mode 100644 index 0000000000..8ba6109657 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inner-basic.html @@ -0,0 +1,8 @@ +<!doctype html> +<div style=" + width: 240px; height: 240px; + border-radius: 8px; + box-shadow: 32px 32px grey inset; + position: absolute; + top: 16px; left: 16px; +"></div> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html new file mode 100644 index 0000000000..77c8d299b6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<style> +#ref { + background: black; + width: 575px; + height: 5px; + margin-left: 125px; +} + +</style> +</head> +<body> +<div id="ref"> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html new file mode 100644 index 0000000000..87ce0f01c6 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<style> +#boxShadow { + background: gray; + width: 700px; + height: 20px; + box-shadow: 15px 15px 3px black inset; + border-radius: 100px 0px 0px 0px; +} + +#cutLeft { + background: white; + width: 125px; + height: 20px; + position: absolute; +} + +#cutAcross { + background: white; + width: 700px; + height: 15px; + position: absolute; + margin-top: 5px; +} + +</style> +</head> +<body> +<div id="cutLeft"></div> +<div id="cutAcross"></div> +<div id="boxShadow"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html new file mode 100644 index 0000000000..f117b53ed9 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html @@ -0,0 +1,23 @@ +<html> +<head> +<style> +div.test { + width: 530px; + height: 500px; + background-color: black; +} + +div.cover { + width: 500px; + height: 500px; + background-color: black; + position: absolute; + margin-top: 0px; + margin-left: 30px; +} +</style> +<body> +<div class="test"> +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html new file mode 100644 index 0000000000..fe8db9f07a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html @@ -0,0 +1,26 @@ +<html> +<head> +<style> +div.test { + width: 500px; + height: 500px; + box-shadow: inset 70px 70px 50px 0px black; + position: absolute; +} + +div.cover { + width: 500px; + height: 500px; + background-color: black; + position: absolute; + margin-top: 0px; + margin-left: 30px; +} +</style> +<body> +<div class="test"> +</div> +<div class="cover"> +</div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html new file mode 100644 index 0000000000..b018ea062e --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html @@ -0,0 +1,17 @@ +<html> +<head> +<style> +div.neg +{ + margin: 35px auto 95px auto; + width: 200px; + height: 200px; + box-shadow: 0px 0px 15px -20px #808080 inset; +} +</style> +</head> + +<body> +<div class="neg"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html new file mode 100644 index 0000000000..b6b1a3dfc2 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html @@ -0,0 +1,16 @@ +<html> +<head> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 5em; + height: 5em; +} +</style> +</head> + +<body> +<div class="test"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html new file mode 100644 index 0000000000..b846f25aba --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html @@ -0,0 +1,20 @@ +<html> +<head> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 5em; + height: 5em; +} + +.first { + box-shadow: inset 0 0 1px -3px rgba(0,0,10,0.25); +} +</style> +</head> + +<body> +<div class="first test"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html new file mode 100644 index 0000000000..d914fb7abc --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html @@ -0,0 +1,37 @@ +<html> +<head> +<style> + #leftCover { + width: 30px; + height: 50px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; + } + + #rightCover { + width: 20px; + height: 120px; + background-color: white; + position: absolute; + top: 0px; + left: 150px; + } + + #boxShadowRegular { + width: 152px; + height: 19.5px; + box-shadow: 0px 0px 1px #3b99FC inset, + 0px 0px 4px 1px #3B99FC, + 0px 0px 1.5px 1px #3B99FC; + position: absolute; + } + +</style> +</head> +<html> + <div id="boxShadowRegular"></div> + <div id="leftCover"></div> + <div id="rightCover"></div> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-large-border-radius.html new file mode 100644 index 0000000000..90eee1db36 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-border-radius.html @@ -0,0 +1,37 @@ +<html> +<head> +<style> + #boxShadow { + width: 152px; + height: 19.5px; + box-shadow: 0px 0px 1px #3b99FC inset, + 0px 0px 4px 1px #3B99FC, + 0px 0px 1.5px 1px #3B99FC; + border-radius: 10000px 0px 0px 10000px; + position: absolute; + } + + #leftCover { + width: 30px; + height: 50px; + background-color: white; + position: absolute; + left: 0px; + top: 0px; + } + + #rightCover { + width: 20px; + height: 120px; + background-color: white; + position: absolute; + top: 0px; + left: 150px; + } +</style> +</head> +<html> + <div id="boxShadow"></div> + <div id="leftCover"></div> + <div id="rightCover"></div> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html new file mode 100644 index 0000000000..2160b81479 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<style> +.top { + background-color: red; + width: 800px; + height: 400px; +} + +.bottom { + background-color: #fec; + width: 800px; + height: 400px; +} + +.leftCut { + position: absolute; + margin-left: 0px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.rightCut { + position: absolute; + margin-left: 790px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.centerCut { + position: absolute; + margin-top: 395px; + width: 800px; + height: 20px; + background-color: black; +} +</style> + +<body> +<div class="leftCut"></div> +<div class="rightCut"></div> +<div class="centerCut"></div> +<div class="top"></div> +<div class="bottom"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-large-offset.html b/layout/reftests/box-shadow/boxshadow-large-offset.html new file mode 100644 index 0000000000..5df87c368b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-large-offset.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<style> +.test { + background-color: #fec; + display: inline-block; + width: 800px; + height: 800px; +} + +.second { + box-shadow: inset 0 400px 1px 0px red; +} + +.leftCut { + position: absolute; + margin-left: 0px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.rightCut { + position: absolute; + margin-left: 790px; + margin-top: 0px; + width: 10px; + height: 800px; + background-color: black; +} + +.centerCut { + position: absolute; + margin-top: 395px; + width: 800px; + height: 20px; + background-color: black; +} + +</style> + +<body> +<div class="leftCut"></div> +<div class="rightCut"></div> +<div class="centerCut"></div> +<div class="test second"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html new file mode 100644 index 0000000000..3b57608a23 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<title>Reference, bug 1402060</title> +<style> + +.blackAtTop { + width: 100px; + height: 90px; + border-top: 10px solid black; +} + +.blue { + width: 100px; + height: 100px; + background: blue; + margin-left: 10px; +} + +.white { + width: 90px; + height: 90px; + background: white; +} + +</style> + +<div class="blackAtTop"><div class="blue"><div class="white"></div></div></div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2.html b/layout/reftests/box-shadow/boxshadow-mixed-2.html new file mode 100644 index 0000000000..5e109524f1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-2.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1402060</title> +<style> + +div { + width: 100px; + height: 100px; + box-shadow: inset 0 10px black, 10px 10px blue; +} + +</style> + +<div></div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-ref.html new file mode 100644 index 0000000000..3c71b12e20 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed-ref.html @@ -0,0 +1 @@ +<div style="background: blue padding-box; border: 2px solid red; border-radius: 10px; width: 300px; height: 300px; position: absolute; top: 10px; left: 10px;">inset and outset</div><div style="border-radius: 10px; background-color: green; width: 304px; height: 304px; position: absolute; top: 10px; left: 360px;"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-mixed.html b/layout/reftests/box-shadow/boxshadow-mixed.html new file mode 100644 index 0000000000..796fd409e4 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-mixed.html @@ -0,0 +1 @@ +<div style="border: 2px red solid; border-radius: 10px; width: 300px; height: 300px; box-shadow: 500px 500px 0px 20px blue inset, 350px 0px green; position: absolute; top: 10px; left: 10px;">inset and outset</div> diff --git a/layout/reftests/box-shadow/boxshadow-multiple-ref.html b/layout/reftests/box-shadow/boxshadow-multiple-ref.html new file mode 100644 index 0000000000..9eefe7e746 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-multiple-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 4; +} + +#theshadow { + background-color: black; + width: 300px; + height: 100px; + position: absolute; + top: 29px; + left: 29px; + z-index: 1; +} + +#theshadow2 { + background-color: blue; + width: 300px; + height: 100px; + position: absolute; + top: 26px; + left: 26px; + z-index: 2; +} + +#theshadow3 { + background-color: red; + width: 300px; + height: 100px; + position: absolute; + top: 23px; + left: 23px; + z-index: 3; +} +</style> + +<div id="theshadow"> </div><div id="theshadow2"> </div><div id="theshadow3"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-multiple.html b/layout/reftests/box-shadow/boxshadow-multiple.html new file mode 100644 index 0000000000..6307c1020d --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-multiple.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px red, 6px 6px blue, 9px 9px black; +} +</style> + +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-onecorner-ref.html b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html new file mode 100644 index 0000000000..5a92e99517 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-onecorner.html b/layout/reftests/box-shadow/boxshadow-onecorner.html new file mode 100644 index 0000000000..1f0805b3bd --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-onecorner.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-opacity-ref.html b/layout/reftests/box-shadow/boxshadow-opacity-ref.html new file mode 100644 index 0000000000..4ff7d22395 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-opacity-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + opacity: 0.6; + box-shadow: 3px 3px 2px rgb(255,0,0); +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-opacity.html b/layout/reftests/box-shadow/boxshadow-opacity.html new file mode 100644 index 0000000000..585c3081fd --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-opacity.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + box-shadow: 3px 3px 2px rgba(255,0,0,0.6); +} +</style> + +<div id="thediv"></div> diff --git a/layout/reftests/box-shadow/boxshadow-rotated-ref.html b/layout/reftests/box-shadow/boxshadow-rotated-ref.html new file mode 100644 index 0000000000..9888d71f2b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rotated-ref.html @@ -0,0 +1,15 @@ +<html> +<head> +<style> +div.second { + margin: 35px auto 95px auto; + box-shadow: 0px 0px 15px 0px #808080; + width: 100; + height: 116.36px; +} +</style> +</head> +<body> +<div class="second"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-rotated.html b/layout/reftests/box-shadow/boxshadow-rotated.html new file mode 100644 index 0000000000..7cc8451f8a --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rotated.html @@ -0,0 +1,16 @@ +<html> +<head> +<style> +div.first { + margin: 35px auto 95px auto; + box-shadow: 0px 0px 15px 0px #808080; + transform: rotate(-180deg); + width: 100; + height: 116.36px; +} +</style> +</head> +<body> +<div class="first"></div> +</body> +</html> diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html new file mode 100644 index 0000000000..3b2e5a949c --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html @@ -0,0 +1 @@ +<div style="width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div><div style="border-radius: 100%; width: 320px; height: 320px; background-color: grey; position: absolute; top: 330px; left: 30px;"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread.html b/layout/reftests/box-shadow/boxshadow-rounded-spread.html new file mode 100644 index 0000000000..a43810bca1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounded-spread.html @@ -0,0 +1 @@ +<div style="box-shadow: 20px 320px 0 10px grey; width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div> diff --git a/layout/reftests/box-shadow/boxshadow-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-rounding-ref.html new file mode 100644 index 0000000000..8f785547ad --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounding-ref.html @@ -0,0 +1 @@ +<div style="width: 100px; height: 200px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div> diff --git a/layout/reftests/box-shadow/boxshadow-rounding.html b/layout/reftests/box-shadow/boxshadow-rounding.html new file mode 100644 index 0000000000..29d812a2cb --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-rounding.html @@ -0,0 +1 @@ +<div style="width: 100.2px; height: 200.2px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div> diff --git a/layout/reftests/box-shadow/boxshadow-skiprect-ref.html b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html new file mode 100644 index 0000000000..ecebb4bd6f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<style> + +#thediv { + width: 400px; + height: 250px; + position: absolute; + top: -500px; + left: -500px; + box-shadow: 540px 540px 10.5px black; +} + +#blankdiv { + width: 400px; + height: 250px; + background-color: white; + position: absolute; + top: 40px; + left: 40px; +} +</style> + +<div id="thediv"> </div> +<div id="blankdiv"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-skiprect.html b/layout/reftests/box-shadow/boxshadow-skiprect.html new file mode 100644 index 0000000000..f888f9d098 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-skiprect.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<style> + +#thediv { + width: 400px; + height: 250px; + position: absolute; + top: 40px; + left: 40px; + box-shadow: 0px 0px 10.5px black; +} +</style> + +<div id="thediv"> </div> diff --git a/layout/reftests/box-shadow/boxshadow-spread-ref.html b/layout/reftests/box-shadow/boxshadow-spread-ref.html new file mode 100644 index 0000000000..2636adc0b3 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-spread-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + background-color: green; + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + z-index: 2; +} + +#theshadow { + background-color: black; + width: 306px; + height: 106px; + position: absolute; + top: 20px; + left: 20px; + z-index: 1; +} +</style> + +<div id="theshadow"> </div><div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-spread.html b/layout/reftests/box-shadow/boxshadow-spread.html new file mode 100644 index 0000000000..a7c9a8c1df --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-spread.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} + +#thediv { + width: 300px; + height: 100px; + position: absolute; + top: 20px; + left: 20px; + color: black; + box-shadow: 3px 3px 0px 3px; +} +</style> +<div id="thediv">Foo</div> diff --git a/layout/reftests/box-shadow/boxshadow-threecorners-ref.html b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html new file mode 100644 index 0000000000..cd9f383e1f --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-left-radius: 40px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-threecorners.html b/layout/reftests/box-shadow/boxshadow-threecorners.html new file mode 100644 index 0000000000..f00135f959 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-threecorners.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-twocorners-ref.html b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html new file mode 100644 index 0000000000..bc3263cdb1 --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; background: red;"> </div> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/boxshadow-twocorners.html b/layout/reftests/box-shadow/boxshadow-twocorners.html new file mode 100644 index 0000000000..e62c316f2b --- /dev/null +++ b/layout/reftests/box-shadow/boxshadow-twocorners.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div> diff --git a/layout/reftests/box-shadow/fieldset-inset-ref.html b/layout/reftests/box-shadow/fieldset-inset-ref.html new file mode 100644 index 0000000000..6d02c04c8b --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-inset-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +field { + display:block; + overflow:hidden; + background:yellow; + + box-shadow: inset 0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; + border-box; +} + +.with-legend { + margin-top:8px; + height:42px; +} + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<field class="with-legend"> +1 +</field> + +<p></p> +<field class="with-legend" style="position:relative"> +2 +</field> + +<p></p> +<field> +3 +</field> + +<p></p> +<field class="with-legend" style="border-color:transparent"> +4 +</field> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset-inset.html b/layout/reftests/box-shadow/fieldset-inset.html new file mode 100644 index 0000000000..d49e2411f9 --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-inset.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +fieldset { + overflow:hidden; + background:yellow; + + box-shadow: inset 0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; +} + +legend { height:16px; } + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<fieldset><legend>Legend</legend> +1 +</fieldset> + +<p></p> +<fieldset style="position:relative;"><legend>Legend</legend> +2 +</fieldset> + +<p></p> +<fieldset> +3 +</fieldset> + +<p></p> +<fieldset><legend style="width:150px;"></legend> +4 +</fieldset> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset-ref.html b/layout/reftests/box-shadow/fieldset-ref.html new file mode 100644 index 0000000000..9196d50636 --- /dev/null +++ b/layout/reftests/box-shadow/fieldset-ref.html @@ -0,0 +1,95 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +field { + display:block; + overflow:hidden; + background:yellow; + + box-shadow:0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; + border-box; +} + +.with-legend { + margin-top:8px; + height:42px; +} + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<field class="with-legend"> +1 +</field> + +<p></p> +<field class="with-legend" style="position:relative"> +2 +</field> + +<p></p> +<field> +3 +</field> + +<p></p> +<field class="with-legend" style="border-color:transparent"> +4 +</field> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/fieldset.html b/layout/reftests/box-shadow/fieldset.html new file mode 100644 index 0000000000..581633f54b --- /dev/null +++ b/layout/reftests/box-shadow/fieldset.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 485149</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + +body {padding:20px;} + +fieldset { + overflow:hidden; + background:yellow; + + box-shadow:0 0 5px 5px #cccccc; + border:1px solid #000000; + border-radius:7px; + width:200px; + height:50px; + margin-left:5px; + margin-right:2px; + padding:10px; +} + +legend { height:16px; } + +p { height:40px; margin:0; } + +#mask1 { + position:absolute; + left:0; + top:0; + background:black; + z-index:1; + width:150px; + height:700px; +} + +#mask2 { + position:absolute; + left:170px; + top:330px; + background:black; + z-index:1; + width:150px; + height:300px; +} + +#mask3 { + position:absolute; + left:0; + top:380px; + background:black; + z-index:1; + width:300px; + height:300px; +} + +</style> +</head> +<body> + +<fieldset><legend>Legend</legend> +1 +</fieldset> + +<p></p> +<fieldset style="position:relative;"><legend>Legend</legend> +2 +</fieldset> + +<p></p> +<fieldset> +3 +</fieldset> + +<p></p> +<fieldset><legend style="width:150px;"></legend> +4 +</fieldset> + +<div id="mask1"></div> +<div id="mask2"></div> +<div id="mask3"></div> + +</body> +</html> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html new file mode 100644 index 0000000000..89906bb1c0 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + font-size: 50px; +} +span { + box-shadow: 210px 210px 2px gray; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html new file mode 100644 index 0000000000..03d34afd9f --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; + font-size: 50px; +} + +span { + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1.html b/layout/reftests/box-shadow/overflow-not-scrollable-1.html new file mode 100644 index 0000000000..94a4b7fe07 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: auto; + font-size: 50px; +} +span { + box-shadow: 210px 210px 2px gray; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html new file mode 100644 index 0000000000..8bac681910 --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + font-size: 50px; + font-weight: bold; +} +span { + box-shadow: 100px 100px 30px black; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2.html b/layout/reftests/box-shadow/overflow-not-scrollable-2.html new file mode 100644 index 0000000000..66dba48daf --- /dev/null +++ b/layout/reftests/box-shadow/overflow-not-scrollable-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: auto; + font-size: 50px; + font-weight: bold; +} +span { + box-shadow: 100px 100px 30px black; + + /* work around potential font overflow */ + margin-left: 5px; +} + +</style> +<div> +<span>text</span> +</div> diff --git a/layout/reftests/box-shadow/reftest.list b/layout/reftests/box-shadow/reftest.list new file mode 100644 index 0000000000..dfafa074ef --- /dev/null +++ b/layout/reftests/box-shadow/reftest.list @@ -0,0 +1,49 @@ +== boxshadow-basic.html boxshadow-basic-ref.html +!= boxshadow-blur.html boxshadow-blur-notref.html +!= boxshadow-blur.html boxshadow-blur-notref2.html +random == boxshadow-blur-2.html boxshadow-blur-2-ref.html # fixedpoint division in blur code makes this fail +random != boxshadow-blur-2.html boxshadow-blur-2-notref.html # fixedpoint division in blur code makes this fail +== boxshadow-multiple.html boxshadow-multiple-ref.html +== boxshadow-spread.html boxshadow-spread-ref.html +== tableboxshadow-basic.html tableboxshadow-basic-ref.html +== tableboxshadow-trshadow.html tableboxshadow-trshadow-ref.html +== tableboxshadow-tdshadow.html tableboxshadow-tdshadow-ref.html +== boxshadow-rounding.html boxshadow-rounding-ref.html +# One uses old path, one uses WR box shadow. +== boxshadow-button.html boxshadow-button-ref.html +fuzzy(0-14,0-179) fuzzy-if(swgl&&!Android,1-1,714-952) fuzzy-if(useDrawSnapshot&&swgl,14-14,54-54) == boxshadow-large-border-radius.html boxshadow-large-border-radius-ref.html # Bug 1209649 + +== boxshadow-fileupload.html boxshadow-fileupload-ref.html +fuzzy(13-19,28-49) == boxshadow-inner-basic.html boxshadow-inner-basic-ref.svg +fuzzy(0-1,0-18) random-if(layersGPUAccelerated) == boxshadow-mixed.html boxshadow-mixed-ref.html +fuzzy(0-1,0-17) == boxshadow-mixed-2.html boxshadow-mixed-2-ref.html +random-if(d2d) fuzzy(0-127,0-3528) == boxshadow-rounded-spread.html boxshadow-rounded-spread-ref.html +fuzzy(0-1,0-50) == chrome://reftest/content/box-shadow/boxshadow-dynamic.xhtml chrome://reftest/content/box-shadow/boxshadow-dynamic-ref.xhtml +random-if(d2d) fuzzy(0-1,0-14) == boxshadow-onecorner.html boxshadow-onecorner-ref.html +random-if(d2d) fuzzy(0-1,0-22) == boxshadow-twocorners.html boxshadow-twocorners-ref.html +random-if(d2d) fuzzy(0-1,0-36) == boxshadow-threecorners.html boxshadow-threecorners-ref.html +fuzzy(0-2,0-440) == boxshadow-skiprect.html boxshadow-skiprect-ref.html +fuzzy-if(useDrawSnapshot,1-1,1197-1197) == boxshadow-opacity.html boxshadow-opacity-ref.html +== boxshadow-color-rounding.html boxshadow-color-rounding-ref.html +== boxshadow-color-rounding-middle.html boxshadow-color-rounding-middle-ref.html +fuzzy(0-3,0-500) fuzzy-if(d2d,0-2,0-1080) == boxshadow-border-radius-int.html boxshadow-border-radius-int-ref.html +== boxshadow-inset-neg-spread.html about:blank +== boxshadow-inset-neg-spread2.html boxshadow-inset-neg-spread2-ref.html +fuzzy(0-26,0-3610) fuzzy-if(d2d,0-26,0-5910) fuzzy-if(!(swgl&&Android),0-6,378-4500) == boxshadow-rotated.html boxshadow-rotated-ref.html # Bug 1211264 +== boxshadow-inset-large-border-radius.html boxshadow-inset-large-border-radius-ref.html + +# fuzzy due to blur going inside, but as long as it's essentially black instead of a light gray its ok. +fuzzy(12-15,9400-13267) == boxshadow-inset-large-offset.html boxshadow-inset-large-offset-ref.html + +== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref.html +== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref2.html +== overflow-not-scrollable-2.html overflow-not-scrollable-2-ref.html +fuzzy(0-1,0-655) == 611574-1.html 611574-1-ref.html +fuzzy(0-4,0-144) fuzzy-if(d2d,0-1,0-36) == 611574-2.html 611574-2-ref.html +fuzzy(0-16,0-10) == fieldset.html fieldset-ref.html # minor anti-aliasing problem on Windows +fuzzy(0-16,0-10) == fieldset-inset.html fieldset-inset-ref.html # minor anti-aliasing problem on Windows +== 1178575.html 1178575-ref.html +== 1178575-2.html 1178575-2-ref.html +fuzzy(0-159,0-2) fails == 1212823-1.html 1212823-1-ref.html +fuzzy(0-93,0-8) == 1212823-2.html 1212823-2-ref.html +== boxshadow-large-offset.html boxshadow-large-offset-ref.html diff --git a/layout/reftests/box-shadow/tableboxshadow-basic-ref.html b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html new file mode 100644 index 0000000000..6a797820a2 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html @@ -0,0 +1 @@ +<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div><table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-basic.html b/layout/reftests/box-shadow/tableboxshadow-basic.html new file mode 100644 index 0000000000..4601d636a8 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-basic.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="0" style="box-shadow: 3px 3px black; position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html new file mode 100644 index 0000000000..972d315ed5 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html @@ -0,0 +1,5 @@ +<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 56px; background-color: rgba(0, 0, 0, 0.4);">s</div> + +<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 376px; background-color: rgba(0, 0, 0, 0.4);">s</div> + +<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; width: 300px; height: 300px;">s</td><td style="background-color: green; width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html new file mode 100644 index 0000000000..bc7abb8f0a --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html new file mode 100644 index 0000000000..d337519480 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html @@ -0,0 +1,5 @@ +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 330px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> + +<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div> + +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table> diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow.html b/layout/reftests/box-shadow/tableboxshadow-trshadow.html new file mode 100644 index 0000000000..c928402122 --- /dev/null +++ b/layout/reftests/box-shadow/tableboxshadow-trshadow.html @@ -0,0 +1 @@ +<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr style="box-shadow: 3px 3px black;"><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr><tr><td style="width: 300px; height: 300px;">s</td><td>s</td></tr></table> diff --git a/layout/reftests/box-sizing/computed-size-reporting-ref.html b/layout/reftests/box-sizing/computed-size-reporting-ref.html new file mode 100644 index 0000000000..f910417e59 --- /dev/null +++ b/layout/reftests/box-sizing/computed-size-reporting-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Bug 520992</title> + +<style> + #borderBox { + background:gold; + height:100px; + box-sizing:border-box; + } + +</style> + +<div id="borderBox"></div> +<p id="heightWidth1"></p> + +<script> + var divs = document.getElementsByTagName("div"); + var textEle1 = document.getElementById("heightWidth1"); + textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height; + textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width; +</script> diff --git a/layout/reftests/box-sizing/computed-size-reporting.html b/layout/reftests/box-sizing/computed-size-reporting.html new file mode 100644 index 0000000000..227ea2cfbd --- /dev/null +++ b/layout/reftests/box-sizing/computed-size-reporting.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Bug 520992</title> + +<style> + #borderBox { + background:gold; + height:100px; + box-sizing:border-box; + border: 20px solid gold; + } + +</style> + +<div id="borderBox"></div> +<p id="heightWidth1"></p> + +<script> + var divs = document.getElementsByTagName("div"); + var textEle1 = document.getElementById("heightWidth1"); + textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height; + textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width; +</script> diff --git a/layout/reftests/box-sizing/html-hr-1-ref.html b/layout/reftests/box-sizing/html-hr-1-ref.html new file mode 100644 index 0000000000..4108e13172 --- /dev/null +++ b/layout/reftests/box-sizing/html-hr-1-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body> + <div style="border: 1px solid black; background-color: blue; height: 10px;"></div> +</body> diff --git a/layout/reftests/box-sizing/html-hr-1.html b/layout/reftests/box-sizing/html-hr-1.html new file mode 100644 index 0000000000..774510735e --- /dev/null +++ b/layout/reftests/box-sizing/html-hr-1.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body> + <hr style="border: 1px solid black; background-color: blue; height: 10px;"> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1-ref.html b/layout/reftests/box-sizing/intrinsic-1-ref.html new file mode 100644 index 0000000000..d808239f2b --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; width: 200px; + height: 200px"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1a.html b/layout/reftests/box-sizing/intrinsic-1a.html new file mode 100644 index 0000000000..2a678176dd --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1a.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: 30px; + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1b.html b/layout/reftests/box-sizing/intrinsic-1b.html new file mode 100644 index 0000000000..0bb5af75f3 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1b.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; height: 200px"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: 15% 30px; + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1c.html b/layout/reftests/box-sizing/intrinsic-1c.html new file mode 100644 index 0000000000..43febc053e --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1c.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: 30px; border: 20px solid; + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1d.html b/layout/reftests/box-sizing/intrinsic-1d.html new file mode 100644 index 0000000000..08a982ff0c --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1d.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; height: 200px"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: calc(15%) 30px; + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1e.html b/layout/reftests/box-sizing/intrinsic-1e.html new file mode 100644 index 0000000000..c27cab66a1 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1e.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; height: 200px"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: calc(10% + 10px) 30px; + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1f.html b/layout/reftests/box-sizing/intrinsic-1f.html new file mode 100644 index 0000000000..a273761ab5 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1f.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue"> + <img src="lime100x100.png" + style="height: 200px; display: block; visibility: hidden; + padding: calc(30px); + box-sizing: border-box;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1g.html b/layout/reftests/box-sizing/intrinsic-1g.html new file mode 100644 index 0000000000..272d76720e --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1g.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 40px transparent solid"> + <img src="lime100x100.png" + style="height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1h.html b/layout/reftests/box-sizing/intrinsic-1h.html new file mode 100644 index 0000000000..55663f1636 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1h.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + height: 120px; + border: 40px transparent solid"> + <img src="lime100x100.png" + style="height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1i.html b/layout/reftests/box-sizing/intrinsic-1i.html new file mode 100644 index 0000000000..6d46b3d488 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1i.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 25px transparent solid"> + <div style="height: 100%; box-sizing: border-box; + border: 15px transparent solid;"> + <img src="lime100x100.png" + style="height: 100%; display: block; visibility: hidden;"> + </div> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1j.html b/layout/reftests/box-sizing/intrinsic-1j.html new file mode 100644 index 0000000000..ca398338ab --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1j.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 40px transparent solid"> + <!-- We need to be taller than intrinsic height, so use a min-height --> + <img src="lime100x100.png" + style="min-height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1k.html b/layout/reftests/box-sizing/intrinsic-1k.html new file mode 100644 index 0000000000..8ebaa24b91 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1k.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + height: 120px; + border: 40px transparent solid"> + <!-- We need to be taller than intrinsic height, so use a min-height --> + <img src="lime100x100.png" + style="min-height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1l.html b/layout/reftests/box-sizing/intrinsic-1l.html new file mode 100644 index 0000000000..38f4cef8b7 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1l.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 25px transparent solid"> + <div style="height: 100%; box-sizing: border-box; + border: 15px transparent solid;"> + <!-- We need to be taller than intrinsic height, so use a min-height --> + <img src="lime100x100.png" + style="min-height: 100%; display: block; visibility: hidden;"> + </div> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1m.html b/layout/reftests/box-sizing/intrinsic-1m.html new file mode 100644 index 0000000000..09dbc75bb9 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1m.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 80px transparent solid"> + <!-- We need to be shorter than intrinsic height, so use a max-height --> + <img src="lime100x100.png" + style="max-height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1n.html b/layout/reftests/box-sizing/intrinsic-1n.html new file mode 100644 index 0000000000..5328e03ab6 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1n.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + height: 40px; + border: 80px transparent solid"> + <!-- We need to be shorter than intrinsic height, so use a max-height --> + <img src="lime100x100.png" + style="max-height: 100%; display: block; visibility: hidden;"> + </div> +</body> diff --git a/layout/reftests/box-sizing/intrinsic-1o.html b/layout/reftests/box-sizing/intrinsic-1o.html new file mode 100644 index 0000000000..a463307057 --- /dev/null +++ b/layout/reftests/box-sizing/intrinsic-1o.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<body> + <div style="display: inline-block; background: blue; + box-sizing: border-box; height: 200px; + border: 50px transparent solid"> + <div style="height: 100%; box-sizing: border-box; + border: 30px transparent solid;"> + <!-- We need to be shorter than intrinsic height, so use a max-height --> + <img src="lime100x100.png" + style="max-height: 100%; display: block; visibility: hidden;"> + </div> + </div> +</body> diff --git a/layout/reftests/box-sizing/lime100x100.png b/layout/reftests/box-sizing/lime100x100.png Binary files differnew file mode 100644 index 0000000000..c9bb375943 --- /dev/null +++ b/layout/reftests/box-sizing/lime100x100.png diff --git a/layout/reftests/box-sizing/reftest.list b/layout/reftests/box-sizing/reftest.list new file mode 100644 index 0000000000..ca4b191018 --- /dev/null +++ b/layout/reftests/box-sizing/reftest.list @@ -0,0 +1,19 @@ +== intrinsic-1a.html intrinsic-1-ref.html +== intrinsic-1b.html intrinsic-1-ref.html +== intrinsic-1c.html intrinsic-1-ref.html +== intrinsic-1d.html intrinsic-1-ref.html +== intrinsic-1e.html intrinsic-1-ref.html +== intrinsic-1f.html intrinsic-1-ref.html +== intrinsic-1g.html intrinsic-1-ref.html +== intrinsic-1h.html intrinsic-1-ref.html +== intrinsic-1i.html intrinsic-1-ref.html +== intrinsic-1j.html intrinsic-1-ref.html +== intrinsic-1k.html intrinsic-1-ref.html +== intrinsic-1l.html intrinsic-1-ref.html +== intrinsic-1m.html intrinsic-1-ref.html +== intrinsic-1n.html intrinsic-1-ref.html +== intrinsic-1o.html intrinsic-1-ref.html +== computed-size-reporting.html computed-size-reporting-ref.html + +== html-hr-1.html html-hr-1-ref.html + 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 |
