diff options
Diffstat (limited to 'layout/reftests/position-sticky')
110 files changed, 3912 insertions, 0 deletions
diff --git a/layout/reftests/position-sticky/ahem.css b/layout/reftests/position-sticky/ahem.css new file mode 100644 index 0000000000..884a41198b --- /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 0000000000..ce6f258062 --- /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 0000000000..a613421d92 --- /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 0000000000..08239c50b2 --- /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 0000000000..084f9b04f3 --- /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 0000000000..13e29a9f77 --- /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 0000000000..f4acbc7f15 --- /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-ref.html b/layout/reftests/position-sticky/block-in-inline-continuations-ref.html new file mode 100644 index 0000000000..8ac42e85b4 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations-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> + <title>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" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + </style> + <script> + function run() { + document.getElementById("scroll").style.width = "750px"; + } + </script> + </head> + <body onload="run()"> + <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.html b/layout/reftests/position-sticky/block-in-inline-continuations.html new file mode 100644 index 0000000000..62cad478b2 --- /dev/null +++ b/layout/reftests/position-sticky/block-in-inline-continuations.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 - 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"> + <link rel="stylesheet" href="ahem.css"> + <style> + #scroll { + height: 100px; + overflow: hidden; + font: 20px/1 Ahem; + } + #sticky { + display: inline; + position: sticky; + top: 20px; + } + </style> + <script> + function run() { + document.getElementById("scroll").style.width = "750px"; + } + </script> + </head> + <body onload="run()"> + <div id="scroll"> + <div id="sticky"> + <div>in block</div> + after block + </div> + </div> + </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 0000000000..ac107c0d03 --- /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 0000000000..183e012f02 --- /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 0000000000..368dc22d4c --- /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 0000000000..5a52cb9048 --- /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 0000000000..62ba2499b9 --- /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 0000000000..2408b7d7e0 --- /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 0000000000..c40d5c9659 --- /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 0000000000..996b022683 --- /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 0000000000..822565bfd1 --- /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 0000000000..5a06b4ec9a --- /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 0000000000..97ee55f273 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-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 { + overflow: hidden; + height: 200px; + line-height: 1; + } + #contain { + column-count: 2; + 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 0000000000..1e696c6249 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-1a.html @@ -0,0 +1,43 @@ +<!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 { + column-count: 2; + 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 0000000000..c6f7e83780 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-1b.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; + } + #columns { + column-count: 2; + 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 0000000000..42771486db --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-2-ref.html @@ -0,0 +1,46 @@ +<!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 { + column-count: 2; + 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 0000000000..ec29285609 --- /dev/null +++ b/layout/reftests/position-sticky/column-contain-2.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 - 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 { + column-count: 2; + 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 0000000000..ccb25d8109 --- /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 0000000000..cb09717e5a --- /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/iframe-1-helper.html b/layout/reftests/position-sticky/iframe-1-helper.html new file mode 100644 index 0000000000..9f71b50c42 --- /dev/null +++ b/layout/reftests/position-sticky/iframe-1-helper.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + html, body { + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div style="overflow: auto; width: 150px; height: 200px"> + <div style="position: sticky; top: 0; width: 100px; height: 100px; background-color: green"></div> + <div style="height: 300px; width: 100px"></div> + </div> + </body> +</html> diff --git a/layout/reftests/position-sticky/iframe-1-ref.html b/layout/reftests/position-sticky/iframe-1-ref.html new file mode 100644 index 0000000000..d3254ac576 --- /dev/null +++ b/layout/reftests/position-sticky/iframe-1-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Sticky-positioned item inside a scrollframe inside an iframe</title> + <style> + html, body { + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div style="overflow: auto; margin-top: 100px; width: 150px; height: 200px"> + <div style="width: 100px; height: 100px; background-color: green"></div> + <div style="height: 300px; width: 100px"></div> + </div> + </body> +</html> + </body> +</html> diff --git a/layout/reftests/position-sticky/iframe-1.html b/layout/reftests/position-sticky/iframe-1.html new file mode 100644 index 0000000000..164f5ac4cd --- /dev/null +++ b/layout/reftests/position-sticky/iframe-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>Sticky-positioned item inside a scrollframe inside an iframe</title> + <style> + html, body { + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <iframe src="iframe-1-helper.html" style="margin-top: 100px; border: none; height: 300px"></iframe> + </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 0000000000..70b0b6eb03 --- /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 0000000000..6e0bb67057 --- /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 0000000000..bb021dbe7a --- /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 0000000000..343c6295ee --- /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 0000000000..2c3bc2470f --- /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 0000000000..f2569fc794 --- /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 0000000000..98aabacc75 --- /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 0000000000..f3fbbc0d61 --- /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"); + }); + </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 0000000000..847860a3cf --- /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 0000000000..f06f55d530 --- /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 0000000000..136ff07371 --- /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 0000000000..9913cfe25b --- /dev/null +++ b/layout/reftests/position-sticky/inline-4.html @@ -0,0 +1,49 @@ +<!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: scroll; + scrollbar-width: none; + } + #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/left-1-ref.html b/layout/reftests/position-sticky/left-1-ref.html new file mode 100644 index 0000000000..ebcf46f4fb --- /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 0000000000..779f930977 --- /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 0000000000..ca5c35a688 --- /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 0000000000..b3c3e4ee37 --- /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 0000000000..1ae2eaf411 --- /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 0000000000..ef9e2b303d --- /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 0000000000..89b7a06081 --- /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 0000000000..ca7a77ff75 --- /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 0000000000..2670683391 --- /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 0000000000..7d9068f2a0 --- /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 0000000000..9648f4b284 --- /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 0000000000..e62978220b --- /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 0000000000..f577b077a5 --- /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 0000000000..7a084d8048 --- /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/nested-sticky-1-ref.html b/layout/reftests/position-sticky/nested-sticky-1-ref.html new file mode 100644 index 0000000000..4c08d36cd4 --- /dev/null +++ b/layout/reftests/position-sticky/nested-sticky-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +html, body { + margin: 0; +} +thead tr { + position: relative; + top: 50px; +} +th { + background-color: green; + height: 20px; +} +td { + background-color: blue; +} +</style> +<body> +<table cellspacing=0> + <thead> + <tr><th></th></tr> + </thead> + <tbody> + <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr> + </tbody> +</table> +<script> + addEventListener('load', function() { + document.scrollingElement.scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }, false); +</script> +</html> diff --git a/layout/reftests/position-sticky/nested-sticky-1.html b/layout/reftests/position-sticky/nested-sticky-1.html new file mode 100644 index 0000000000..6125f4263a --- /dev/null +++ b/layout/reftests/position-sticky/nested-sticky-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html reftest-async-scroll reftest-async-scroll-y="50"> +<style> +html, body { + margin: 0; +} +thead tr { + position: sticky; + top: 0; +} +th { + position: sticky; + top: -2px; + background-color: green; + height: 20px; +} +td { + background-color: blue; +} +</style> +<body> +<table cellspacing=0> + <thead> + <tr><th></th></tr> + </thead> + <tbody> + <tr><td style="height: 2000px; vertical-align: top">table cell</td></tr> + </tbody> +</table> +</html> diff --git a/layout/reftests/position-sticky/nested-sticky-2-ref.html b/layout/reftests/position-sticky/nested-sticky-2-ref.html new file mode 100644 index 0000000000..c49d088960 --- /dev/null +++ b/layout/reftests/position-sticky/nested-sticky-2-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +html, body { + margin: 0; +} +thead tr { + position: relative; + top: 50px; +} +th { + background-color: green; + height: 20px; +} +th:first-child { + position: relative; + top: 10px; +} +td { + background-color: blue; +} +</style> +<body> +<table cellspacing=0> + <thead> + <tr><th></th><th></th></tr> + </thead> + <tbody> + <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr> + </tbody> +</table> +<script> + addEventListener('load', function() { + document.scrollingElement.scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }, false); +</script> +</html> diff --git a/layout/reftests/position-sticky/nested-sticky-2.html b/layout/reftests/position-sticky/nested-sticky-2.html new file mode 100644 index 0000000000..b37885d7ad --- /dev/null +++ b/layout/reftests/position-sticky/nested-sticky-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html reftest-async-scroll reftest-async-scroll-y="50"> +<style> +html, body { + margin: 0; +} +thead tr { + position: sticky; + top: 0; +} +th { + background-color: green; + height: 20px; +} +th:first-child { + position: sticky; + top: 10px; +} +td { + background-color: blue; +} +</style> +<body> +<table cellspacing=0> + <thead> + <tr><th></th><th></th></tr> + </thead> + <tbody> + <tr><td style="height: 2000px; vertical-align: top">table cell</td><td>sibling</td></tr> + </tbody> +</table> +</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 0000000000..f458c239d9 --- /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 0000000000..95d46b2412 --- /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 0000000000..8593fa3f5a --- /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 0000000000..f399c912e9 --- /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 0000000000..387c28eda8 --- /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 0000000000..852d356835 --- /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 0000000000..fd9c2fc551 --- /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 0000000000..25f31dc593 --- /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 0000000000..e23b7c9d39 --- /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 0000000000..1a154a2e53 --- /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 0000000000..643c507307 --- /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 0000000000..03080bf101 --- /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 0000000000..54b81e9b53 --- /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: 110px"></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 0000000000..fc84983d69 --- /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.list b/layout/reftests/position-sticky/reftest.list new file mode 100644 index 0000000000..cd47d90a45 --- /dev/null +++ b/layout/reftests/position-sticky/reftest.list @@ -0,0 +1,55 @@ +== top-1.html top-1-ref.html +fuzzy-if(Android,0-6,0-1568) == top-2.html top-2-ref.html +fuzzy-if(Android,0-6,0-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,0-2,0-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,0-2,0-4) == left-1.html left-1-ref.html +fuzzy-if(Android,0-2,0-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,0-2,0-4) == right-2.html right-2-ref.html +fuzzy-if(Android,0-2,0-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,0-2,0-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,0-4,0-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,0-99,0-210) == inline-3.html inline-3-ref.html +skip-if(!asyncPan) fuzzy-if(swgl&&!Android,0-1,0-3) fails-if(useDrawSnapshot) == inline-4.html inline-4-ref.html +== 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(0-1,0-22) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) fuzzy-if(Android,0-8,0-1533) == block-in-inline-2.html block-in-inline-2-ref.html +fuzzy(0-1,0-220) fuzzy-if(winWidget&&!layersGPUAccelerated,0-116,0-1320) == block-in-inline-3.html block-in-inline-3-ref.html +== block-in-inline-continuations.html block-in-inline-continuations-ref.html +== iframe-1.html iframe-1-ref.html +== transformed-1.html transformed-1-ref.html +fuzzy-if(Android,0-8,0-9) fuzzy-if(gtkWidget,10-17,12-32) fuzzy-if(cocoaWidget,7-8,18-42) skip-if(!asyncPan) fails-if(useDrawSnapshot) == transformed-2.html transformed-2-ref.html # Bug 1604644 +skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-1.html nested-sticky-1-ref.html # Bug 1604644 +skip-if(!asyncPan) fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,19-30,12-32) fuzzy-if(cocoaWidget,13-16,20-44) fails-if(useDrawSnapshot) == nested-sticky-2.html nested-sticky-2-ref.html # Bug 1604644 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 0000000000..dc2457e871 --- /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 0000000000..8e0d96a48f --- /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 0000000000..6b3549293c --- /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 0000000000..a8d7a14fd6 --- /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 0000000000..a2462b40f2 --- /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 0000000000..25b6431425 --- /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 0000000000..f35afdf7fe --- /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 0000000000..4132154ceb --- /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 0000000000..b3fa4f230d --- /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 0000000000..3feb1eca44 --- /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 0000000000..e5b029687c --- /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 0000000000..b48fe00379 --- /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 0000000000..7d7db098fe --- /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 0000000000..103f32a124 --- /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 0000000000..edb94fdbe8 --- /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 0000000000..a7bdb58e36 --- /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 0000000000..93788f3fe2 --- /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 0000000000..d3d14f4ed9 --- /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 0000000000..8e72c08039 --- /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 0000000000..a44baae2e6 --- /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 0000000000..8eaed81980 --- /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 0000000000..71f7ff01c1 --- /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 0000000000..70d821344e --- /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 0000000000..2795806956 --- /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 0000000000..9e96ee8bec --- /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 0000000000..1e2909561e --- /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 0000000000..3d1d6a35b5 --- /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 0000000000..b73d40e825 --- /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 0000000000..3e440bc8fe --- /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 0000000000..31443f5dff --- /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 0000000000..d1a8e2429c --- /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 0000000000..b42f08919b --- /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> diff --git a/layout/reftests/position-sticky/transformed-1-ref.html b/layout/reftests/position-sticky/transformed-1-ref.html new file mode 100644 index 0000000000..0d08d67aec --- /dev/null +++ b/layout/reftests/position-sticky/transformed-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="margin: 0"> + <body style="margin: 0"> + <div style="height: 70px; background-color: blue"></div> + <div style="height: 2000px;"> + <div style="margin-top: 50px; width: 100px; height: 100px; background-color: green"></div> + </div> +</html> diff --git a/layout/reftests/position-sticky/transformed-1.html b/layout/reftests/position-sticky/transformed-1.html new file mode 100644 index 0000000000..98f82b1150 --- /dev/null +++ b/layout/reftests/position-sticky/transformed-1.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="margin: 0"> + <body style="margin: 0"> + <div style="height: 70px; background-color: blue"></div> + <div style="height: 2000px; transform: translateY(50px)"> + <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div> + </div> +</html> diff --git a/layout/reftests/position-sticky/transformed-2-ref.html b/layout/reftests/position-sticky/transformed-2-ref.html new file mode 100644 index 0000000000..bf2dc6704c --- /dev/null +++ b/layout/reftests/position-sticky/transformed-2-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html style="margin: 0" class="reftest-wait"> + <body style="margin: 0"> + <div style="height: 70px; background-color: blue"></div> + <div style="height: 1950px;"> + <div style="margin-top: 100px; width: 100px; height: 100px; background-color: green"></div> + </div> + <script> + addEventListener('load', function() { + document.scrollingElement.scrollTop = 50; + document.documentElement.classList.remove('reftest-wait'); + }, false); + </script> +</html> diff --git a/layout/reftests/position-sticky/transformed-2.html b/layout/reftests/position-sticky/transformed-2.html new file mode 100644 index 0000000000..8d549fcfde --- /dev/null +++ b/layout/reftests/position-sticky/transformed-2.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="margin: 0" reftest-async-scroll reftest-async-scroll-y="50"> + <body style="margin: 0"> + <div style="height: 70px; background-color: blue"></div> + <div style="height: 2000px; transform: translateY(50px)"> + <div style="position:sticky; top: 70px; width: 100px; height: 100px; background-color: green"></div> + </div> +</html> |