forked from Floorp-Projects/Floorp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 886646 - Part 7: Reftests for sticky positioning. r=dbaron
- Loading branch information
1 parent
802adbc
commit 80bd356
Showing
83 changed files
with
2,922 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
32 changes: 32 additions & 0 deletions
32
layout/reftests/position-sticky/containing-block-1-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.