diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/position-sticky | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/position-sticky')
104 files changed, 3835 insertions, 0 deletions
diff --git a/layout/reftests/position-sticky/ahem.css b/layout/reftests/position-sticky/ahem.css new file mode 100644 index 000000000..884a41198 --- /dev/null +++ b/layout/reftests/position-sticky/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); +} diff --git a/layout/reftests/position-sticky/block-in-inline-1-ref.html b/layout/reftests/position-sticky/block-in-inline-1-ref.html new file mode 100644 index 000000000..ce6f25806 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, normal position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + .sticky { + position: relative; + top: 0; + } + .notsticky { + position: relative; + top: 0; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <span class="notsticky">before inline</span> + <span class="sticky">before block</span> + <div><span class="sticky">in block</span></div> + <span class="sticky">after block</span> + <span class="notsticky">after inline</span> + </div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-1.html b/layout/reftests/position-sticky/block-in-inline-1.html new file mode 100644 index 000000000..a613421d9 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, normal position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="match" href="block-in-inline-1-ref.html"> + <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + #sticky { + display: inline; + position: sticky; + top: 10px; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + before inline + <div id="sticky"> + before block + <div>in block</div> + after block + </div> + after inline + </div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-2-ref.html b/layout/reftests/position-sticky/block-in-inline-2-ref.html new file mode 100644 index 000000000..08239c50b --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-2-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, normal position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + .sticky { + position: relative; + top: -10px; + } + .notsticky { + position: relative; + top: -30px; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <span class="notsticky">before inline</span> + <span class="sticky">before block</span> + <div><span class="sticky">in block</span></div> + <span class="sticky">after block</span> + <span class="notsticky">after inline</span> + </div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-2.html b/layout/reftests/position-sticky/block-in-inline-2.html new file mode 100644 index 000000000..084f9b04f --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-2.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, stuck position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="match" href="block-in-inline-2-ref.html"> + <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + #sticky { + display: inline; + position: sticky; + top: 10px; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + before inline + <div id="sticky"> + before block + <div>in block</div> + after block + </div> + after inline + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 30; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-3-ref.html b/layout/reftests/position-sticky/block-in-inline-3-ref.html new file mode 100644 index 000000000..13e29a9f7 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-3-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, normal position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + .sticky { + position: relative; + top: -20px; + } + .notsticky { + position: relative; + top: -60px; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <span class="notsticky">before inline</span> + <span class="sticky">before block</span> + <div><span class="sticky">in block</span></div> + <span class="sticky">after block</span> + <span class="notsticky">after inline</span> + </div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-3.html b/layout/reftests/position-sticky/block-in-inline-3.html new file mode 100644 index 000000000..f4acbc7f1 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-3.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - block inside inline, contained position</title> + <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> + <link rel="match" href="block-in-inline-3-ref.html"> + <meta name="assert" content="Inline elements split because they contain blocks should always have all parts moved the same offset from their normal position"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #contain { + height: 100px; + } + #sticky { + display: inline; + position: sticky; + top: 10px; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + before inline + <div id="sticky"> + before block + <div>in block</div> + after block + </div> + after inline + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + // should start moving after 40px + document.getElementById("scroll").scrollTop = 60; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-inner.html b/layout/reftests/position-sticky/block-in-inline-continuations-inner.html new file mode 100644 index 000000000..316c959f9 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations-inner.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>iframe for CSS Test: Sticky Positioning - continuations have no effect when resizing</title> + <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #sticky { + display: inline; + position: sticky; + top: 20px; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="sticky"> + <div>in block</div> + after block + </div> + </div> +</body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html new file mode 100644 index 000000000..912a30e31 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref-inner.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>iframe for CSS Test Reference: Sticky Positioning - continuations have no effect when resizing</title> + <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div><span class="sticky">in block</span></div> + <span class="sticky">after block</span> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-continuations-ref.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html new file mode 100644 index 000000000..3aded638b --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test Reference: Sticky Positioning - continuations have no effect when resizing</title> + <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com"> + <script> + function run() { + document.getElementById("toresize").width = "750px"; + } + </script> + </head> + <body onload="run()"> + <iframe id="toresize" src="block-in-inline-continuations-ref-inner.html"> + </iframe> + </body> +</html> diff --git a/layout/reftests/position-sticky/block-in-inline-continuations.html b/layout/reftests/position-sticky/block-in-inline-continuations.html new file mode 100644 index 000000000..fc5cba5f5 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - continuations have no effect when resizing</title> + <link rel="author" title="Abel Lin" href="mailto:alin@mozilla.com"> + <link rel="match" href="block-in-inline-continuations-ref.html"> + <meta name="assert" content="Inline elements split and contain blocks should always have all parts moved the same offset from their normal position"> + <script> + function run() { + document.getElementById("toresize").width = "750px"; + } + </script> + </head> + <body onload="run()"> + <iframe id="toresize" src="block-in-inline-continuations-inner.html"> + </iframe> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-1-ref.html b/layout/reftests/position-sticky/bottom-1-ref.html new file mode 100644 index 000000000..ac107c0d0 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: relative; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-1.html b/layout/reftests/position-sticky/bottom-1.html new file mode 100644 index 000000000..183e012f0 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-1-ref.html"> + <meta name="assert" content="Bottom-sticky with a small amount of content above: should stay in its normal position"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-2-ref.html b/layout/reftests/position-sticky/bottom-2-ref.html new file mode 100644 index 000000000..368dc22d4 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-2-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: relative; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 80px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-2a.html b/layout/reftests/position-sticky/bottom-2a.html new file mode 100644 index 000000000..5a52cb904 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-2a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-2-ref.html"> + <meta name="assert" content="Bottom-sticky with some content above: should stay in its normal position (but will stick beyond this point)"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 80px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-2b.html b/layout/reftests/position-sticky/bottom-2b.html new file mode 100644 index 000000000..62ba2499b --- /dev/null +++ b/layout/reftests/position-sticky/bottom-2b.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-2-ref.html"> + <meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 90px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-2c.html b/layout/reftests/position-sticky/bottom-2c.html new file mode 100644 index 000000000..2408b7d7e --- /dev/null +++ b/layout/reftests/position-sticky/bottom-2c.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-2-ref.html"> + <meta name="assert" content="Bottom-sticky with content above: should stick at the bottom of the scroll container"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 200px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-3-ref.html b/layout/reftests/position-sticky/bottom-3-ref.html new file mode 100644 index 000000000..c40d5c965 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-3-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 200px; + background-color: gray; + } + #sticky { + position: relative; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div style="height: 60px"></div> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-3.html b/layout/reftests/position-sticky/bottom-3.html new file mode 100644 index 000000000..996b02268 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-3.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-3-ref.html"> + <meta name="assert" content="Bottom-sticky with content above and a containing block: should stick to the bottom of the scroll container"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 200px; + background-color: gray; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div style="height: 100px"></div> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-4-ref.html b/layout/reftests/position-sticky/bottom-4-ref.html new file mode 100644 index 000000000..822565bfd --- /dev/null +++ b/layout/reftests/position-sticky/bottom-4-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 5px; + background-color: gray; + padding: 10px 0 0; + border-width: 10px 0 0; + border-style: solid; + border-color: #333; + } + #sticky { + height: 3px; + margin-top: 2px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 75px"></div> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/bottom-4.html b/layout/reftests/position-sticky/bottom-4.html new file mode 100644 index 000000000..5a06b4ec9 --- /dev/null +++ b/layout/reftests/position-sticky/bottom-4.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - bottom, contained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="bottom-3-ref.html"> + <meta name="assert" content="Bottom-sticky with too much content above: should stay within the containing block"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 200px; + background-color: gray; + padding: 10px 0; + border-width: 10px 0; + border-style: solid; + border-color: #333; + } + #sticky { + position: sticky; + bottom: 10px; + height: 10px; + margin-top: 2px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 75px"></div> + <div id="contain"> + <div style="height: 100px"></div> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/column-contain-1-ref.html b/layout/reftests/position-sticky/column-contain-1-ref.html new file mode 100644 index 000000000..39ed2b1cb --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-1-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + overflow: hidden; + height: 200px; + line-height: 1; + } + #contain { + -moz-column-count: 2; + column-count: 2; + -moz-column-rule: 1px solid black; + column-rule: 1px solid black; + height: 200px; + width: 200px; + } + #fill { + height: 390px; + background: blue; + } + #sticky { + position: relative; + left: 190px; + width: 10px; + height: 10px; + background: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + <div id="fill"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/column-contain-1a.html b/layout/reftests/position-sticky/column-contain-1a.html new file mode 100644 index 000000000..136851dc9 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-1a.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - multiframe containing-block element</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="column-contain-1-ref.html"> + <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames"> + <style> + #scroll { + overflow: hidden; + height: 200px; + line-height: 1; + } + #contain { + -moz-column-count: 2; + column-count: 2; + -moz-column-rule: 1px solid black; + column-rule: 1px solid black; + height: 200px; + width: 200px; + } + #fill { + height: 390px; + background: blue; + } + #sticky { + position: sticky; + left: 190px; + width: 10px; + height: 10px; + background: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + <div id="fill"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/column-contain-1b.html b/layout/reftests/position-sticky/column-contain-1b.html new file mode 100644 index 000000000..f9e16681e --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-1b.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - multiframe containing-block element</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="column-contain-1-ref.html"> + <meta name="assert" content="Sticky positioning with a multiple-frame containing-block element should stay contained within the bounding box of all that element's frames"> + <style> + #scroll { + overflow: hidden; + height: 200px; + line-height: 1; + } + #columns { + -moz-column-count: 2; + column-count: 2; + -moz-column-rule: 1px solid black; + column-rule: 1px solid black; + height: 200px; + width: 200px; + } + #fill { + height: 390px; + background: blue; + } + #sticky { + position: sticky; + left: 190px; + width: 10px; + height: 10px; + background: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="columns"> + <div id="contain"> + <div id="sticky"></div> + <div id="fill"></div> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/column-contain-2-ref.html b/layout/reftests/position-sticky/column-contain-2-ref.html new file mode 100644 index 000000000..1a552d540 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-2-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <style> + #scroll { + overflow: hidden; + height: 200px; + line-height: 1; + } + #columns { + -moz-column-count: 2; + column-count: 2; + -moz-column-rule: 1px solid black; + column-rule: 1px solid black; + height: 200px; + width: 200px; + } + #contain { + padding-bottom: 10px; + border-bottom: 10px solid gray; + } + #fill { + height: 370px; + background: blue; + } + #sticky { + position: relative; + top: 190px; + width: 10px; + height: 10px; + background: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="columns"> + <div id="contain"> + <div id="sticky"></div> + <div id="fill"></div> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/column-contain-2.html b/layout/reftests/position-sticky/column-contain-2.html new file mode 100644 index 000000000..5538b7391 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-2.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - multiframe containing-block element</title> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="match" href="column-contain-2-ref.html"> + <meta name="assert" content="Sticky positioning where the containing-block element has multiple frames and border/padding should stay contained within the union of the content boxes of all frames"> + <style> + #scroll { + overflow: hidden; + height: 200px; + line-height: 1; + } + #columns { + -moz-column-count: 2; + column-count: 2; + -moz-column-rule: 1px solid black; + column-rule: 1px solid black; + height: 200px; + width: 200px; + } + #contain { + padding-bottom: 10px; + border-bottom: 10px solid gray; + } + #fill { + height: 370px; + background: blue; + } + #sticky { + position: sticky; + top: 195px; + width: 10px; + height: 10px; + background: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="columns"> + <div id="contain"> + <div id="sticky"></div> + <div id="fill"></div> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/containing-block-1-ref.html b/layout/reftests/position-sticky/containing-block-1-ref.html new file mode 100644 index 000000000..ccb25d810 --- /dev/null +++ b/layout/reftests/position-sticky/containing-block-1-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + height: 200px; + margin: 0; + } + #sticky { + position: relative; + top: 100px; + height: 10px; + background-color: black; + } + #absolute { + position: absolute; + top: 5px; + left: 5px; + width: 10px; + height: 10px; + background-color: blue; + } + </style> + <body> + <div id="sticky"> + <div id="absolute"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/containing-block-1.html b/layout/reftests/position-sticky/containing-block-1.html new file mode 100644 index 000000000..cb09717e5 --- /dev/null +++ b/layout/reftests/position-sticky/containing-block-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - absolute containing block</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="containing-block-1-ref.html"> + <meta name="assert" content="Sticky positioned elements should establish a containing block for absolutely positioned descendants"> + <style> + body { + height: 200px; + margin: 0; + } + #sticky { + position: sticky; + top: 100px; + height: 10px; + background-color: black; + } + #absolute { + position: absolute; + top: 5px; + left: 5px; + width: 10px; + height: 10px; + background-color: blue; + } + </style> + <body> + <div id="sticky"> + <div id="absolute"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/initial-1-ref.html b/layout/reftests/position-sticky/initial-1-ref.html new file mode 100644 index 000000000..70b0b6eb0 --- /dev/null +++ b/layout/reftests/position-sticky/initial-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + height: 100px; + margin: 0; + /* Without this, we do multiple passes of reflow, and + * the sticky element ends up positioned correctly. + */ + overflow-y: scroll; + } + #sticky { + position: relative; + top: 10px; + height: 10px; + margin-bottom: 10px; + background-color: black; + } + </style> + <body> + <div id="sticky"></div> + </body> +</html> diff --git a/layout/reftests/position-sticky/initial-1.html b/layout/reftests/position-sticky/initial-1.html new file mode 100644 index 000000000..6e0bb6705 --- /dev/null +++ b/layout/reftests/position-sticky/initial-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - initial reflow</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="initial-1-ref.html"> + <meta name="assert" content="Sticky positioning should be calculated correctly on initial page reflow"> + <style> + body { + height: 100px; + margin: 0; + /* Without this, we do multiple passes of reflow, and + * the sticky element ends up positioned correctly. + */ + overflow-y: scroll; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + margin-bottom: 10px; + background-color: black; + } + </style> + <body> + <div id="sticky"></div> + </body> +</html> diff --git a/layout/reftests/position-sticky/initial-scroll-1-ref.html b/layout/reftests/position-sticky/initial-scroll-1-ref.html new file mode 100644 index 000000000..bb021dbe7 --- /dev/null +++ b/layout/reftests/position-sticky/initial-scroll-1-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + direction: rtl; + } + #inner { + width: 200px; + height: 200px; + direction: ltr; + } + #sticky { + position: relative; + left: 110px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="inner"> + <div id="sticky"> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/initial-scroll-1.html b/layout/reftests/position-sticky/initial-scroll-1.html new file mode 100644 index 000000000..343c6295e --- /dev/null +++ b/layout/reftests/position-sticky/initial-scroll-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - initial scroll position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="initial-scroll-1-ref.html"> + <meta name="assert" content="When the initial scroll position of the scroll container is not (0, 0), a sticky element inside it should be positioned correctly"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + direction: rtl; + } + #inner { + width: 200px; + height: 200px; + direction: ltr; + } + #sticky { + position: sticky; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="inner"> + <div id="sticky"> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-1-ref.html b/layout/reftests/position-sticky/inline-1-ref.html new file mode 100644 index 000000000..2c3bc2470 --- /dev/null +++ b/layout/reftests/position-sticky/inline-1-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + position: relative; + font: 10px/1 Ahem; + } + #sticky { + position: absolute; + top: 20px; + left: 20px; + } + #hidden { + visibility: hidden; + } + </style> + </head> + <body> + <div id="scroll"> + hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-1.html b/layout/reftests/position-sticky/inline-1.html new file mode 100644 index 000000000..f2569fc79 --- /dev/null +++ b/layout/reftests/position-sticky/inline-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - inline</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="inline-1-ref.html"> + <meta name="assert" content="Sticky positioning on inline elements should use the bounding box of all continuations"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + font: 10px/1 Ahem; + } + #sticky { + position: sticky; + top: 20px; + left: 20px; + } + </style> + </head> + <body> + <div id="scroll"> + hello <span id="sticky">there<br>everyone</span> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-2-ref.html b/layout/reftests/position-sticky/inline-2-ref.html new file mode 100644 index 000000000..98aabacc7 --- /dev/null +++ b/layout/reftests/position-sticky/inline-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + position: relative; + font: 10px/1 Ahem; + } + #sticky { + position: absolute; + top: 30px; + left: 30px; + } + #hidden { + visibility: hidden; + } + </style> + </head> + <body> + <div id="scroll"> + hello <div id="sticky"><span id="hidden">hello </span>there<br>everyone</div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-2.html b/layout/reftests/position-sticky/inline-2.html new file mode 100644 index 000000000..7ebfa2a34 --- /dev/null +++ b/layout/reftests/position-sticky/inline-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html class="reftest-wait"> + <head> + <title>CSS Test: Sticky Positioning - inline, dynamic changes</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="inline-2-ref.html"> + <meta name="assert" content="Sticky positioning on inline elements should move all continuations when the offsets are changed"> + <meta name="flags" content="dom"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + font: 10px/1 Ahem; + } + #sticky { + position: sticky; + top: 20px; + left: 20px; + } + </style> + </head> + <body> + <div id="scroll"> + hello <span id="sticky">there<br>everyone</span> + </div> + <script type="text/javascript"> + document.addEventListener("MozReftestInvalidate", function() { + document.getElementById("sticky").style.top = "30px"; + document.getElementById("sticky").style.left = "30px"; + document.documentElement.removeAttribute("class"); + }, false); + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-3-ref.html b/layout/reftests/position-sticky/inline-3-ref.html new file mode 100644 index 000000000..847860a3c --- /dev/null +++ b/layout/reftests/position-sticky/inline-3-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + position: relative; + font: 10px/1 Ahem; + } + #sticky { + position: absolute; + top: 0; + left: 10px; + } + #hidden { + visibility: hidden; + } + </style> + </head> + <body> + <div id="scroll"> + test <span id="sticky"><span id="hidden">test </span>test<br>test</span> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-3.html b/layout/reftests/position-sticky/inline-3.html new file mode 100644 index 000000000..f06f55d53 --- /dev/null +++ b/layout/reftests/position-sticky/inline-3.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - inline with margins</title> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="match" href="inline-3-ref.html"> + <meta name="assert" content="Sticky positioning on inline elements should keep the bounding box of all continuations' margin boxes contained"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroll { + overflow: hidden; + height: 200px; + font: 10px/1 Ahem; + } + #sticky { + position: sticky; + left: 20px; + margin-right: 10px; + } + #contain { + width: 100px; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + test <span id="sticky">test<br>test</span> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-4-ref.html b/layout/reftests/position-sticky/inline-4-ref.html new file mode 100644 index 000000000..136ff0737 --- /dev/null +++ b/layout/reftests/position-sticky/inline-4-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroller { + margin-top: 100px; + height: 200px; + width: 500px; + overflow: hidden; + } + #container { + background: pink; + position: relative; + margin: 50px; + height: 400px; + margin-bottom: 1000px; + } + #sticky { + position: sticky; + left: 0px; + top: 75px; + outline: 1px dotted purple; + font: 10px/1 Ahem; + } + </style> + </head> + <body> + <div id="scroller"> + <div id="container"> + <span id="sticky"> + First line<br> + Second line<br> + Third line<br> + </span> + </div> + </div> + <script> + document.getElementById("scroller").scrollTop = 30; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/inline-4.html b/layout/reftests/position-sticky/inline-4.html new file mode 100644 index 000000000..2626d15af --- /dev/null +++ b/layout/reftests/position-sticky/inline-4.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-async-scroll> + <head> + <title>CSS Test: Sticky Positioning - inline, async scrolling</title> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="match" href="inline-4-ref.html"> + <meta name="assert" content="Sticky positioning on inline elements should keep continuations aligned during async scrolling"> + <link rel="stylesheet" type="text/css" href="ahem.css"> + <style> + #scroller { + margin-top: 100px; + height: 200px; + width: 500px; + overflow: hidden; + } + #container { + background: pink; + position: relative; + margin: 50px; + height: 400px; + margin-bottom: 1000px; + } + #sticky { + position: sticky; + left: 0px; + top: 75px; + outline: 1px dotted purple; + font: 10px/1 Ahem; + } + </style> + </head> + <body> + <div id="scroller" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="500" reftest-displayport-h="300" + reftest-async-scroll-y="30"> + <div id="container"> + <span id="sticky"> + First line<br> + Second line<br> + Third line<br> + </span> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/inner-table-1-ref.html b/layout/reftests/position-sticky/inner-table-1-ref.html new file mode 100644 index 000000000..379841fae --- /dev/null +++ b/layout/reftests/position-sticky/inner-table-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + </head> + <body> + <table> + <thead> + <tr> + <td>a</td> + </tr> + </thead> + <tr> + <td>b</td> + </tr> + <tr> + <td>c</td> + </tr> + <tr> + <td>d</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/position-sticky/inner-table-1.html b/layout/reftests/position-sticky/inner-table-1.html new file mode 100644 index 000000000..212e658fd --- /dev/null +++ b/layout/reftests/position-sticky/inner-table-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - inner table elements</title> + <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name"> + <link rel="match" href="inner-table-1-ref.html"> + <meta name="assert" content="Sticky positioning on inner table elements should have no effect (until bug 35168 is fixed)"> + <style> + .sticky { + position: sticky; + top: 1000px; + } + </style> + </head> + <body> + <table> + <thead class="sticky"> + <tr> + <td>a</td> + </tr> + </thead> + <tr class="sticky"> + <td>b</td> + </tr> + <tr> + <td class="sticky">c</td> + </tr> + <tr> + <td>d</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-1-ref.html b/layout/reftests/position-sticky/left-1-ref.html new file mode 100644 index 000000000..ebcf46f4f --- /dev/null +++ b/layout/reftests/position-sticky/left-1-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill" style="width: 20px"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-1.html b/layout/reftests/position-sticky/left-1.html new file mode 100644 index 000000000..779f93097 --- /dev/null +++ b/layout/reftests/position-sticky/left-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left, normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-1-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-left with not enough scrolling: should be in its normal position"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 80; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-2-ref.html b/layout/reftests/position-sticky/left-2-ref.html new file mode 100644 index 000000000..ca5c35a68 --- /dev/null +++ b/layout/reftests/position-sticky/left-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + #contain { + width: 100%; + height: 10px; + background-color: gray; + } + #sticky { + position: relative; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-2.html b/layout/reftests/position-sticky/left-2.html new file mode 100644 index 000000000..b3c3e4ee3 --- /dev/null +++ b/layout/reftests/position-sticky/left-2.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-left with scrolling: should stick to the left edge of the scrolling container"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 100; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-3-ref.html b/layout/reftests/position-sticky/left-3-ref.html new file mode 100644 index 000000000..1ae2eaf41 --- /dev/null +++ b/layout/reftests/position-sticky/left-3-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 5px; + height: 10px; + background-color: gray; + } + #sticky { + width: 5px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-3.html b/layout/reftests/position-sticky/left-3.html new file mode 100644 index 000000000..ef9e2b303 --- /dev/null +++ b/layout/reftests/position-sticky/left-3.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left, contained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-left with too much scrolling: should stay within the containing block"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 295; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-1-ref.html b/layout/reftests/position-sticky/left-right-1-ref.html new file mode 100644 index 000000000..89b7a0608 --- /dev/null +++ b/layout/reftests/position-sticky/left-right-1-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: relative; + right: 20px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-1.html b/layout/reftests/position-sticky/left-right-1.html new file mode 100644 index 000000000..ca7a77ff7 --- /dev/null +++ b/layout/reftests/position-sticky/left-right-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left+right, at left</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-right-1-ref.html"> + <meta name="assert" content="Left+right sticky, scrolled to the left: should act as right-sticky"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-2-ref.html b/layout/reftests/position-sticky/left-right-2-ref.html new file mode 100644 index 000000000..267068339 --- /dev/null +++ b/layout/reftests/position-sticky/left-right-2-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #sticky { + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill" style="width: 50px"></div + ><div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-2.html b/layout/reftests/position-sticky/left-right-2.html new file mode 100644 index 000000000..7d9068f2a --- /dev/null +++ b/layout/reftests/position-sticky/left-right-2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left+right, at middle</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-right-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Left+right sticky, scrolled to the middle: should stay in its normal position"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 50; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-3-ref.html b/layout/reftests/position-sticky/left-right-3-ref.html new file mode 100644 index 000000000..9648f4b28 --- /dev/null +++ b/layout/reftests/position-sticky/left-right-3-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #sticky { + position: relative; + left: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/left-right-3.html b/layout/reftests/position-sticky/left-right-3.html new file mode 100644 index 000000000..e62978220 --- /dev/null +++ b/layout/reftests/position-sticky/left-right-3.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left+right, at right</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="left-right-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Left+right sticky, scrolled to the right: should act as left-sticky"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 110; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/margin-1-ref.html b/layout/reftests/position-sticky/margin-1-ref.html new file mode 100644 index 000000000..f577b077a --- /dev/null +++ b/layout/reftests/position-sticky/margin-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 20px; + background-color: gray; + } + #sticky { + position: relative; + top: 5px; + height: 10px; + margin-bottom: 5px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/margin-1.html b/layout/reftests/position-sticky/margin-1.html new file mode 100644 index 000000000..7a084d804 --- /dev/null +++ b/layout/reftests/position-sticky/margin-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - element margin</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="margin-1-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with margin-bottom on the sticky element: the element's margin box should stay within the containing block"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + margin-bottom: 5px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 300; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-1-ref.html b/layout/reftests/position-sticky/overconstrained-1-ref.html new file mode 100644 index 000000000..f458c239d --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + height: 81px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 95px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-1.html b/layout/reftests/position-sticky/overconstrained-1.html new file mode 100644 index 000000000..95d46b241 --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top+bottom, overconstrained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="overconstrained-1-ref.html"> + <meta name="assert" content="Top+bottom-sticky with a tall element: should not act as bottom-sticky"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + top: 10px; + bottom: 10px; + height: 81px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 95px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-2-ref.html b/layout/reftests/position-sticky/overconstrained-2-ref.html new file mode 100644 index 000000000..8593fa3f5 --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-2-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 99px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + width: 81px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-2.html b/layout/reftests/position-sticky/overconstrained-2.html new file mode 100644 index 000000000..f399c912e --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-2.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left+right, overconstrained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="overconstrained-2-ref.html"> + <meta name="assert" content="Left+right-sticky with a wide element in an LTR container: should not act as right-sticky"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 99px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + right: 10px; + width: 81px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-3-ref.html b/layout/reftests/position-sticky/overconstrained-3-ref.html new file mode 100644 index 000000000..387c28eda --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-3-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + #sticky { + width: 1px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overconstrained-3.html b/layout/reftests/position-sticky/overconstrained-3.html new file mode 100644 index 000000000..852d35683 --- /dev/null +++ b/layout/reftests/position-sticky/overconstrained-3.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - left+right, overconstrained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="overconstrained-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Left+right-sticky with a wide element in an RTL container: should not act as left-sticky"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + direction: rtl; + } + #scroll div { + display: inline-block; + } + .fill { + width: 99px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + } + #sticky { + position: sticky; + left: 10px; + right: 10px; + width: 81px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="sticky"></div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 179; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/overcontain-1-ref.html b/layout/reftests/position-sticky/overcontain-1-ref.html new file mode 100644 index 000000000..fd9c2fc55 --- /dev/null +++ b/layout/reftests/position-sticky/overcontain-1-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + margin: 0; + } + #sticky { + height: 10px; + margin-bottom: 10px; + background-color: black; + } + </style> + <body> + <div id="sticky"></div> + </body> +</html> diff --git a/layout/reftests/position-sticky/overcontain-1.html b/layout/reftests/position-sticky/overcontain-1.html new file mode 100644 index 000000000..25f31dc59 --- /dev/null +++ b/layout/reftests/position-sticky/overcontain-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - containment and normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="overcontain-1-ref.html"> + <meta name="assert" content="Keeping the element's margin box within the containing block's content box should never move the element back past its normal position"> + <style> + body { + margin: 0; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + margin-bottom: 10px; + background-color: black; + } + </style> + <body> + <div id="sticky"></div> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-1-ref.html b/layout/reftests/position-sticky/padding-1-ref.html new file mode 100644 index 000000000..e23b7c9d3 --- /dev/null +++ b/layout/reftests/position-sticky/padding-1-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + overflow: scroll; + } + #scroll { + width: 130px; + height: 80px; + overflow: scroll; + border: 10px solid black; + padding: 10px; + } + #inner { + position: relative; + width: 100%; + height: 100%; + } + #sticky { + position: absolute; + width: 10px; + height: 10px; + top: 50%; + left: 50%; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="inner"> + <div id="sticky"> + </div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-1.html b/layout/reftests/position-sticky/padding-1.html new file mode 100644 index 000000000..1a154a2e5 --- /dev/null +++ b/layout/reftests/position-sticky/padding-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - percentage offsets</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="padding-1-ref.html"> + <meta name="assert" content="Percentage offsets should be resolved against the content box of the scrolling container"> + <style> + body { + /* Make sure it works on the first pass of reflow */ + overflow: scroll; + } + #scroll { + width: 130px; + height: 80px; + overflow: scroll; + border: 10px solid black; + padding: 10px; + } + #sticky { + position: sticky; + top: 50%; + left: 50%; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-2-ref.html b/layout/reftests/position-sticky/padding-2-ref.html new file mode 100644 index 000000000..643c50730 --- /dev/null +++ b/layout/reftests/position-sticky/padding-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 80px; + height: 80px; + overflow: hidden; + border: 10px solid black; + padding: 10px; + } + #sticky { + position: relative; + width: 10px; + height: 10px; + top: 20px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-2.html b/layout/reftests/position-sticky/padding-2.html new file mode 100644 index 000000000..03080bf10 --- /dev/null +++ b/layout/reftests/position-sticky/padding-2.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - offsets reference</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="padding-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Offsets should position the element with respect to the content box of the scrolling container"> + <style> + #scroll { + width: 80px; + height: 80px; + overflow: hidden; + border: 10px solid black; + padding: 10px; + } + #sticky { + position: sticky; + width: 10px; + height: 10px; + top: 20px; + background-color: black; + } + .fill { + width: 1000px; + height: 1000px; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div> + <div id="sticky"></div> + <div class="fill"></div> + </div> + <script type="application/javascript"> + document.getElementById('scroll').scrollTop = 1100; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-3-ref.html b/layout/reftests/position-sticky/padding-3-ref.html new file mode 100644 index 000000000..153560bb5 --- /dev/null +++ b/layout/reftests/position-sticky/padding-3-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + font-size: 0px; + } + #scroll { + width: 80px; + height: 80px; + overflow: scroll; + border: 10px solid black; + padding: 10px; + } + #inner { + position: relative; + width: 100%; + height: 100%; + } + #sticky { + position: absolute; + width: 10px; + height: 10px; + bottom: 20px; + right: 20px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="inner"> + <div style="width: 100px; height: 100px"></div> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/padding-3.html b/layout/reftests/position-sticky/padding-3.html new file mode 100644 index 000000000..fc84983d6 --- /dev/null +++ b/layout/reftests/position-sticky/padding-3.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - offsets reference, bottom/right</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="padding-3-ref.html"> + <meta name="assert" content="Bottom/right offsets should position the element with respect to the content box of the scrolling container"> + <style> + body { + font-size: 0px; + } + #scroll { + width: 80px; + height: 80px; + overflow: scroll; + border: 10px solid black; + padding: 10px; + white-space: nowrap; + } + #sticky { + position: sticky; + bottom: 20px; + right: 20px; + display: inline-block; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div style="height: 90px; width: 100px"></div> + <div style="display: inline-block; width: 90px; height: 10px"></div + ><div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/reftest-stylo.list b/layout/reftests/position-sticky/reftest-stylo.list new file mode 100644 index 000000000..490b11f63 --- /dev/null +++ b/layout/reftests/position-sticky/reftest-stylo.list @@ -0,0 +1,55 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== top-1.html top-1.html +fuzzy-if(Android,6,1568) == top-2.html top-2.html +fuzzy-if(Android,6,2729) == top-3.html top-3.html +== top-4.html top-4.html +== top-5.html top-5.html +fuzzy-if(Android,2,1568) == top-6.html top-6.html +== bottom-1.html bottom-1.html +== bottom-2a.html bottom-2a.html +== bottom-2b.html bottom-2b.html +== bottom-2c.html bottom-2c.html +== bottom-3.html bottom-3.html +== bottom-4.html bottom-4.html +fuzzy-if(Android,2,4) == left-1.html left-1.html +fuzzy-if(Android,2,4) == left-2.html left-2.html +== left-3.html left-3.html +== right-1.html right-1.html +fuzzy-if(Android,2,4) == right-2.html right-2.html +fuzzy-if(Android,2,4) == right-3.html right-3.html +== margin-1.html margin-1.html +== padding-1.html padding-1.html +== padding-2.html padding-2.html +random-if(B2G||Mulet) == padding-3.html padding-3.html +# Initial mulet triage: parity with B2G/B2G Desktop +== overcontain-1.html overcontain-1.html +== initial-1.html initial-1.html +== initial-scroll-1.html initial-scroll-1.html +== scrollframe-reflow-1.html scrollframe-reflow-1.html +== scrollframe-reflow-2.html scrollframe-reflow-2.html +== scrollframe-auto-1.html scrollframe-auto-1.html +== stacking-context-1.html stacking-context-1.html +== top-bottom-1.html top-bottom-1.html +== top-bottom-2.html top-bottom-2.html +== top-bottom-3.html top-bottom-3.html +== left-right-1.html left-right-1.html +== left-right-2.html left-right-2.html +== left-right-3.html left-right-3.html +fuzzy-if(Android,4,810) == containing-block-1.html containing-block-1.html +== overconstrained-1.html overconstrained-1.html +== overconstrained-2.html overconstrained-2.html +== overconstrained-3.html overconstrained-3.html +== inline-1.html inline-1.html +== inline-2.html inline-2.html +fuzzy-if(OSX==1006||OSX==1007,64,100) fuzzy-if(OSX>=1008,99,210) == inline-3.html inline-3.html +skip-if(!asyncPan) == inline-4.html inline-4.html +== column-contain-1a.html column-contain-1a.html +== column-contain-1b.html column-contain-1b.html +== column-contain-2.html column-contain-2.html +== block-in-inline-1.html block-in-inline-1.html +fuzzy-if(skiaContent,1,22) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,1533) skip-if((B2G&&browserIsRemote)||Mulet) == block-in-inline-2.html block-in-inline-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,630) fuzzy-if(OSX>=1008,1,11) skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(skiaContent,1,124) == block-in-inline-3.html block-in-inline-3.html +# Initial mulet triage: parity with B2G/B2G Desktop +== block-in-inline-continuations.html block-in-inline-continuations.html +fuzzy-if(winWidget&&!layersGPUAccelerated,121,111) == inner-table-1.html inner-table-1.html diff --git a/layout/reftests/position-sticky/reftest.list b/layout/reftests/position-sticky/reftest.list new file mode 100644 index 000000000..2705d08fd --- /dev/null +++ b/layout/reftests/position-sticky/reftest.list @@ -0,0 +1,51 @@ +== top-1.html top-1-ref.html +fuzzy-if(Android,6,1568) == top-2.html top-2-ref.html +fuzzy-if(Android,6,2729) == top-3.html top-3-ref.html +== top-4.html top-4-ref.html +== top-5.html top-5-ref.html +fuzzy-if(Android,2,1568) == top-6.html top-6-ref.html +== bottom-1.html bottom-1-ref.html +== bottom-2a.html bottom-2-ref.html +== bottom-2b.html bottom-2-ref.html +== bottom-2c.html bottom-2-ref.html +== bottom-3.html bottom-3-ref.html +== bottom-4.html bottom-4-ref.html +fuzzy-if(Android,2,4) == left-1.html left-1-ref.html +fuzzy-if(Android,2,4) == left-2.html left-2-ref.html +== left-3.html left-3-ref.html +== right-1.html right-1-ref.html +fuzzy-if(Android,2,4) == right-2.html right-2-ref.html +fuzzy-if(Android,2,4) == right-3.html right-3-ref.html +== margin-1.html margin-1-ref.html +== padding-1.html padding-1-ref.html +== padding-2.html padding-2-ref.html +== padding-3.html padding-3-ref.html +== overcontain-1.html overcontain-1-ref.html +== initial-1.html initial-1-ref.html +== initial-scroll-1.html initial-scroll-1-ref.html +== scrollframe-reflow-1.html scrollframe-reflow-1-ref.html +== scrollframe-reflow-2.html scrollframe-reflow-2-ref.html +== scrollframe-auto-1.html scrollframe-auto-1-ref.html +fuzzy-if(Android,2,3) == stacking-context-1.html stacking-context-1-ref.html +== top-bottom-1.html top-bottom-1-ref.html +== top-bottom-2.html top-bottom-2-ref.html +== top-bottom-3.html top-bottom-3-ref.html +== left-right-1.html left-right-1-ref.html +== left-right-2.html left-right-2-ref.html +== left-right-3.html left-right-3-ref.html +fuzzy-if(Android,4,810) == containing-block-1.html containing-block-1-ref.html +== overconstrained-1.html overconstrained-1-ref.html +== overconstrained-2.html overconstrained-2-ref.html +== overconstrained-3.html overconstrained-3-ref.html +== inline-1.html inline-1-ref.html +== inline-2.html inline-2-ref.html +fuzzy-if(OSX==1006||OSX==1007,64,100) fuzzy-if(OSX>=1008,99,210) == inline-3.html inline-3-ref.html +skip-if(!asyncPan) == inline-4.html inline-4-ref.html +fails == column-contain-1a.html column-contain-1-ref.html +== column-contain-1b.html column-contain-1-ref.html +== column-contain-2.html column-contain-2-ref.html +== block-in-inline-1.html block-in-inline-1-ref.html +fuzzy-if(skiaContent,1,22) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) fuzzy-if(Android,8,1533) == block-in-inline-2.html block-in-inline-2-ref.html +fuzzy-if(Android,8,630) fuzzy-if(OSX>=1008,1,11) fuzzy-if(skiaContent,1,220) fuzzy-if(winWidget&&!layersGPUAccelerated,116,1320) == block-in-inline-3.html block-in-inline-3-ref.html +== block-in-inline-continuations.html block-in-inline-continuations-ref.html +fuzzy-if(winWidget&&!layersGPUAccelerated,140,140) == inner-table-1.html inner-table-1-ref.html diff --git a/layout/reftests/position-sticky/right-1-ref.html b/layout/reftests/position-sticky/right-1-ref.html new file mode 100644 index 000000000..dc2457e87 --- /dev/null +++ b/layout/reftests/position-sticky/right-1-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 5px; + height: 10px; + background-color: gray; + } + #sticky { + width: 5px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill" style="width: 95px"></div + ><div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/right-1.html b/layout/reftests/position-sticky/right-1.html new file mode 100644 index 000000000..8e0d96a48 --- /dev/null +++ b/layout/reftests/position-sticky/right-1.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - right, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="right-1-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-right scrolled to the left: should stick to the right edge of the scrolling container"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + /* This puts the sticky element's "normal position" at + the right side of the containing block. */ + direction: rtl; + } + #sticky { + position: sticky; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 5; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/right-2-ref.html b/layout/reftests/position-sticky/right-2-ref.html new file mode 100644 index 000000000..6b3549293 --- /dev/null +++ b/layout/reftests/position-sticky/right-2-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 100px; + height: 10px; + background-color: gray; + } + #sticky { + position: relative; + left: 80px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/right-2.html b/layout/reftests/position-sticky/right-2.html new file mode 100644 index 000000000..a8d7a14fd --- /dev/null +++ b/layout/reftests/position-sticky/right-2.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - right, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="right-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-right scrolled to the middle: should stick to the right edge of the scrolling container"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + /* This puts the sticky element's "normal position" at + the right side of the containing block. */ + direction: rtl; + } + #sticky { + position: sticky; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 200; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/right-3-ref.html b/layout/reftests/position-sticky/right-3-ref.html new file mode 100644 index 000000000..a2462b40f --- /dev/null +++ b/layout/reftests/position-sticky/right-3-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + width: 100px; + height: 100px; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 80px; + height: 10px; + background-color: gray; + } + #sticky { + position: relative; + left: 70px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/right-3.html b/layout/reftests/position-sticky/right-3.html new file mode 100644 index 000000000..25b643142 --- /dev/null +++ b/layout/reftests/position-sticky/right-3.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - right, contained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="right-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-right with too much scrolling: should stay within the containing block"> + <style> + #scroll { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid black; + white-space: nowrap; + } + #scroll div { + display: inline-block; + } + .fill { + width: 100px; + height: 1px; + } + #contain { + width: 200px; + height: 10px; + background-color: gray; + /* This puts the sticky element's "normal position" at + the right side of the containing block. */ + direction: rtl; + } + #sticky { + position: sticky; + right: 10px; + width: 10px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div + ><div id="contain"> + <div id="sticky"></div> + </div + ><div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").scrollLeft = 220; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-auto-1-ref.html b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html new file mode 100644 index 000000000..f35afdf7f --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-auto-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Percentage sticky offsets should be computed correctly when + - the scroll container is auto-sized --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + overflow: scroll; + } + #scroll { + height: auto; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: relative; + height: 10px; + top: 105px; + background-color: black; + } + .fill { + height: 200px; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + <div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-auto-1.html b/layout/reftests/position-sticky/scrollframe-auto-1.html new file mode 100644 index 000000000..4132154ce --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-auto-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- Percentage sticky offsets should be computed correctly when + - the scroll container is auto-sized --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="scrollframe-auto-1-ref.html"> + <style> + body { + /* even on initial reflow */ + overflow: scroll; + } + #scroll { + height: auto; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: sticky; + height: 10px; + top: 50%; + background-color: black; + } + .fill { + height: 200px; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + <div class="fill"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html new file mode 100644 index 000000000..b3fa4f230 --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-reflow-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 120px; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: relative; + top: 100px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-reflow-1.html b/layout/reftests/position-sticky/scrollframe-reflow-1.html new file mode 100644 index 000000000..3feb1eca4 --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-reflow-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- When the scroll container is resized (without reflowing its contents), + - sticky elements inside it should be repositioned --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="scrollframe-reflow-1-ref.html"> + <meta name="flags" content="dom"> + <style> + #scroll { + height: 100px; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: sticky; + height: 10px; + bottom: 10px; + background-color: black; + } + .fill { + height: 1000px; + } + </style> + <body> + <div id="scroll"> + <div class="fill"></div> + <div id="sticky"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").style.height = "120px"; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html new file mode 100644 index 000000000..e5b029687 --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-reflow-2-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 120px; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: relative; + top: 60px; + height: 10px; + background-color: black; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/scrollframe-reflow-2.html b/layout/reftests/position-sticky/scrollframe-reflow-2.html new file mode 100644 index 000000000..b48fe0037 --- /dev/null +++ b/layout/reftests/position-sticky/scrollframe-reflow-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<!-- When the scroll container is resized (without reflowing its contents), + - offsets for sticky elements inside it should be recomputed --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="scrollframe-reflow-2-ref.html"> + <meta name="flags" content="dom"> + <style> + #scroll { + height: 100px; + overflow: hidden; + border: 1px solid black; + } + #sticky { + position: sticky; + height: 10px; + top: 50%; + background-color: black; + } + .fill { + height: 1000px; + } + </style> + <body> + <div id="scroll"> + <div id="sticky"></div> + <div class="fill"></div> + </div> + <script type="text/javascript"> + document.getElementById("scroll").style.height = "120px"; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/stacking-context-1-ref.html b/layout/reftests/position-sticky/stacking-context-1-ref.html new file mode 100644 index 000000000..7d7db098f --- /dev/null +++ b/layout/reftests/position-sticky/stacking-context-1-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + body { + margin: 0; + } + div { + width: 100px; + height: 100px; + } + #static { + position: absolute; + top: 20px; + left: 20px; + background-color: blue; + z-index: 3; + } + #sticky { + background-color: black; + } + #inner { + position: relative; + top: 40px; + left: 40px; + background-color: gray; + z-index: 2; + } + </style> + <body> + <div id="static"></div> + <div id="sticky"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/stacking-context-1.html b/layout/reftests/position-sticky/stacking-context-1.html new file mode 100644 index 000000000..103f32a12 --- /dev/null +++ b/layout/reftests/position-sticky/stacking-context-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - stacking context</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="stacking-context-1-ref.html"> + <meta name="assert" content="Sticky positioning should establish a stacking context"> + <style> + body { + margin: 0; + } + div { + width: 100px; + height: 100px; + } + #static { + position: absolute; + top: 20px; + left: 20px; + background-color: blue; + z-index: 1; + } + #sticky { + position: sticky; + top: 0; + left: 0; + background-color: black; + } + #inner { + position: relative; + top: 40px; + left: 40px; + background-color: gray; + z-index: 2; + } + </style> + <body> + <div id="static"></div> + <div id="sticky"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-1-ref.html b/layout/reftests/position-sticky/top-1-ref.html new file mode 100644 index 000000000..edb94fdbe --- /dev/null +++ b/layout/reftests/position-sticky/top-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 80px; + background-color: gray; + } + #sticky { + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-1.html b/layout/reftests/position-sticky/top-1.html new file mode 100644 index 000000000..a7bdb58e3 --- /dev/null +++ b/layout/reftests/position-sticky/top-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-1-ref.html"> + <meta name="assert" content="Sticky-top with no scrolling: should be in its normal position"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-2-ref.html b/layout/reftests/position-sticky/top-2-ref.html new file mode 100644 index 000000000..93788f3fe --- /dev/null +++ b/layout/reftests/position-sticky/top-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 90px; + background-color: gray; + } + #sticky { + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 10px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-2.html b/layout/reftests/position-sticky/top-2.html new file mode 100644 index 000000000..d3d14f4ed --- /dev/null +++ b/layout/reftests/position-sticky/top-2.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, normal position</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with not enough scrolling: should be in its normal position"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 10; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-3-ref.html b/layout/reftests/position-sticky/top-3-ref.html new file mode 100644 index 000000000..8e72c0803 --- /dev/null +++ b/layout/reftests/position-sticky/top-3-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 100px; + background-color: gray; + } + #sticky { + position: relative; + top: 10px; + height: 10px; + background-color: black; + z-index: 1; + } + #static { + position: relative; + bottom: 1px; + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-3.html b/layout/reftests/position-sticky/top-3.html new file mode 100644 index 000000000..a44baae2e --- /dev/null +++ b/layout/reftests/position-sticky/top-3.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with scrolling: should move to partially cover static positioned sibling"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 21; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-4-ref.html b/layout/reftests/position-sticky/top-4-ref.html new file mode 100644 index 000000000..8eaed8198 --- /dev/null +++ b/layout/reftests/position-sticky/top-4-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 20px; + background-color: gray; + } + #sticky { + position: relative; + top: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-4.html b/layout/reftests/position-sticky/top-4.html new file mode 100644 index 000000000..71f7ff01c --- /dev/null +++ b/layout/reftests/position-sticky/top-4.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, stuck</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-4-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with more scrolling: should continue to stick to the top of the scroll container"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 300; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-5-ref.html b/layout/reftests/position-sticky/top-5-ref.html new file mode 100644 index 000000000..70d821344 --- /dev/null +++ b/layout/reftests/position-sticky/top-5-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 10px; + background-color: gray; + } + #sticky { + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-5.html b/layout/reftests/position-sticky/top-5.html new file mode 100644 index 000000000..279580695 --- /dev/null +++ b/layout/reftests/position-sticky/top-5.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, contained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-5-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 310; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-6-ref.html b/layout/reftests/position-sticky/top-6-ref.html new file mode 100644 index 000000000..9e96ee8be --- /dev/null +++ b/layout/reftests/position-sticky/top-6-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #contain { + height: 5px; + background-color: gray; + padding: 0 0 10px; + border-width: 0 0 10px; + border-style: solid; + border-color: #333; + } + #sticky { + height: 5px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="contain"> + <div id="sticky"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-6.html b/layout/reftests/position-sticky/top-6.html new file mode 100644 index 000000000..1e2909561 --- /dev/null +++ b/layout/reftests/position-sticky/top-6.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top, contained</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-6-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Sticky-top with too much scrolling: should stay within the containing block"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #contain { + height: 300px; + background-color: gray; + padding: 10px 0; + border-width: 10px 0; + border-style: solid; + border-color: #333; + } + #sticky { + position: sticky; + top: 10px; + height: 10px; + background-color: black; + } + #static { + height: 10px; + background-color: blue; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 20px"></div> + <div id="contain"> + <div id="sticky"></div> + <div id="static"></div> + </div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 335; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-1-ref.html b/layout/reftests/position-sticky/top-bottom-1-ref.html new file mode 100644 index 000000000..3d1d6a35b --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: relative; + bottom: 20px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 100px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-1.html b/layout/reftests/position-sticky/top-bottom-1.html new file mode 100644 index 000000000..b73d40e82 --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top+bottom, at top</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-bottom-1-ref.html"> + <meta name="assert" content="Top+bottom sticky, scrolled to the top: should act as bottom-sticky"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + top: 10px; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 100px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-2-ref.html b/layout/reftests/position-sticky/top-bottom-2-ref.html new file mode 100644 index 000000000..3e440bc8f --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + } + #sticky { + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 50px"></div> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-2.html b/layout/reftests/position-sticky/top-bottom-2.html new file mode 100644 index 000000000..31443f5df --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-2.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top+bottom, at middle</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-bottom-2-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Top+bottom sticky, scrolled to the middle: should stay in its normal position"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + top: 10px; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 100px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 50; + </script> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-3-ref.html b/layout/reftests/position-sticky/top-bottom-3-ref.html new file mode 100644 index 000000000..d1a8e2429 --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-3-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: relative; + top: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div id="sticky"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/top-bottom-3.html b/layout/reftests/position-sticky/top-bottom-3.html new file mode 100644 index 000000000..b42f08919 --- /dev/null +++ b/layout/reftests/position-sticky/top-bottom-3.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <title>CSS Test: Sticky Positioning - top+bottom, at bottom</title> + <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> + <link rel="match" href="top-bottom-3-ref.html"> + <meta name="flags" content="dom"> + <meta name="assert" content="Top+bottom sticky, scrolled to the bottom: should act as top-sticky"> + <style> + #scroll { + height: 100px; + overflow: hidden; + } + #sticky { + position: sticky; + top: 10px; + bottom: 10px; + height: 10px; + background-color: black; + } + </style> + </head> + <body> + <div id="scroll"> + <div style="height: 100px"></div> + <div id="sticky"></div> + <div style="height: 100px"></div> + </div> + <script type="application/javascript"> + document.getElementById("scroll").scrollTop = 110; + </script> + </body> +</html> |