Auto merge of #18212 - mrobinson:position-sticky, r=emilio

Add support for position:sticky

This leverages the position:sticky support in WebRender to bring basic
support for position:sticky in Servo. There are still some issues with
nested sticky flows as well as a few other corner cases. Tests are
imported from WPT and can be removed once we update to the latest
version.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/18212)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-09-05 15:36:47 -05:00 committed by GitHub
commit f1fab036ab
84 changed files with 5729 additions and 50 deletions

View file

@ -1403,6 +1403,318 @@
{}
]
],
"css/css-position-3/position-sticky-bottom.html": [
[
"/_mozilla/css/css-position-3/position-sticky-bottom.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-flexbox.html": [
[
"/_mozilla/css/css-position-3/position-sticky-flexbox.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-flexbox-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-grid.html": [
[
"/_mozilla/css/css-position-3/position-sticky-grid.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-grid-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-inflow-position.html": [
[
"/_mozilla/css/css-position-3/position-sticky-inflow-position.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-inflow-position-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-inline.html": [
[
"/_mozilla/css/css-position-3/position-sticky-inline.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-inline-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-left.html": [
[
"/_mozilla/css/css-position-3/position-sticky-left.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-left-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-margins.html": [
[
"/_mozilla/css/css-position-3/position-sticky-margins.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-margins-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-bottom.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-bottom.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-inline.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-inline.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-inline-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-left.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-left.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-left-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-right.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-right.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-right-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-table.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-table.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-table-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-nested-top.html": [
[
"/_mozilla/css/css-position-3/position-sticky-nested-top.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-nested-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-overflow-padding.html": [
[
"/_mozilla/css/css-position-3/position-sticky-overflow-padding.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-overflow-padding-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-right.html": [
[
"/_mozilla/css/css-position-3/position-sticky-right.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-right-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-stacking-context.html": [
[
"/_mozilla/css/css-position-3/position-sticky-stacking-context.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-stacking-context-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-tfoot-bottom.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-tfoot-bottom.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-tfoot-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-th-bottom.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-th-bottom.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-th-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-th-left.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-th-left.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-th-left-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-th-right.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-th-right.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-th-right-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-th-top.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-th-top.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-th-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-thead-top.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-thead-top.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-thead-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-tr-bottom.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-tr-bottom.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-tr-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-table-tr-top.html": [
[
"/_mozilla/css/css-position-3/position-sticky-table-tr-top.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-table-tr-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-top.html": [
[
"/_mozilla/css/css-position-3/position-sticky-top.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position-3/position-sticky-writing-modes.html": [
[
"/_mozilla/css/css-position-3/position-sticky-writing-modes.html",
[
[
"/_mozilla/css/css-position-3/position-sticky-writing-modes-ref.html",
"=="
]
],
{}
]
],
"css/data_img_a.html": [
[
"/_mozilla/css/data_img_a.html",
@ -8101,6 +8413,136 @@
{}
]
],
"css/css-position-3/position-sticky-bottom-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-flexbox-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-grid-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-inflow-position-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-inline-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-left-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-margins-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-bottom-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-inline-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-left-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-right-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-table-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-nested-top-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-overflow-padding-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-right-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-stacking-context-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-tfoot-bottom-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-th-bottom-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-th-left-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-th-right-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-th-top-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-thead-top-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-tr-bottom-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-table-tr-top-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-top-ref.html": [
[
{}
]
],
"css/css-position-3/position-sticky-writing-modes-ref.html": [
[
{}
]
],
"css/css/ahem.css": [
[
{}
@ -13518,6 +13960,30 @@
{}
]
],
"css/css-position-3/position-sticky-get-bounding-client-rect.html": [
[
"/_mozilla/css/css-position-3/position-sticky-get-bounding-client-rect.html",
{}
]
],
"css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html": [
[
"/_mozilla/css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html",
{}
]
],
"css/css-position-3/position-sticky-offset-top-left.html": [
[
"/_mozilla/css/css-position-3/position-sticky-offset-top-left.html",
{}
]
],
"css/css-position-3/position-sticky-parsing.html": [
[
"/_mozilla/css/css-position-3/position-sticky-parsing.html",
{}
]
],
"css/empty-keyframes.html": [
[
"/_mozilla/css/empty-keyframes.html",
@ -22973,6 +23439,230 @@
"768744b9db67d625e4ba3ae1809a967648440503",
"support"
],
"css/css-position-3/position-sticky-bottom-ref.html": [
"726d6e927d84669e9355701ccd948349d377e6fd",
"support"
],
"css/css-position-3/position-sticky-bottom.html": [
"2a908e60a635dbf765987c0f93d0f33c8ea85de6",
"reftest"
],
"css/css-position-3/position-sticky-flexbox-ref.html": [
"f8dedb4a637ea3f4bf79eb621f52a8c4622f8c75",
"support"
],
"css/css-position-3/position-sticky-flexbox.html": [
"efb055a7efb5ee3aabd28e369d0bdc9ae98bd33d",
"reftest"
],
"css/css-position-3/position-sticky-get-bounding-client-rect.html": [
"5b9a1a29084f46228749c1b2b1a664be3ce02c43",
"testharness"
],
"css/css-position-3/position-sticky-grid-ref.html": [
"9748c25d3db9b5ec2753ff53ceb0b82db9453cdc",
"support"
],
"css/css-position-3/position-sticky-grid.html": [
"a06a40f39b4a748c111dc01281261c5451204f95",
"reftest"
],
"css/css-position-3/position-sticky-inflow-position-ref.html": [
"bcce2ded8073a7b5b3477bcf90157cb0e77c2b40",
"support"
],
"css/css-position-3/position-sticky-inflow-position.html": [
"c8e2bcdddf9e8ee93f9306d88b96c3bf1f1bfaf6",
"reftest"
],
"css/css-position-3/position-sticky-inline-ref.html": [
"9458cab53d2065e4893d127ee0097bbd53c6b898",
"support"
],
"css/css-position-3/position-sticky-inline.html": [
"9fe0b3407310fbe1ee8b1614db0801bdf93b38be",
"reftest"
],
"css/css-position-3/position-sticky-input-box-gets-focused-after-scroll.html": [
"6580451dddfd6f8865925326c170f630f343fbcd",
"testharness"
],
"css/css-position-3/position-sticky-left-ref.html": [
"9de7a8ba6019395d729b32e514cc3bd9fee25d2b",
"support"
],
"css/css-position-3/position-sticky-left.html": [
"5151bca08dff652ea728cb8bccbb6b7c6d364dd8",
"reftest"
],
"css/css-position-3/position-sticky-margins-ref.html": [
"0cdb788c913f47a121114ac5b8e6a140bb08c1ff",
"support"
],
"css/css-position-3/position-sticky-margins.html": [
"72fb6ae7d97bf2448ebd68ccf110edd6bae2c92f",
"reftest"
],
"css/css-position-3/position-sticky-nested-bottom-ref.html": [
"59a8e46358a8a5bf8638a2d1982c63becef5bc77",
"support"
],
"css/css-position-3/position-sticky-nested-bottom.html": [
"3604a921be04927dd19b805b7c9abaed6d0e7c72",
"reftest"
],
"css/css-position-3/position-sticky-nested-inline-ref.html": [
"8fb9378e91a20b71ef886b9aac0147b25d00a9a3",
"support"
],
"css/css-position-3/position-sticky-nested-inline.html": [
"50be9f2fb6ab9295081f6f13705be4853e48fdde",
"reftest"
],
"css/css-position-3/position-sticky-nested-left-ref.html": [
"52804c5589c3035818cd653c1801a70645a9fe99",
"support"
],
"css/css-position-3/position-sticky-nested-left.html": [
"c32881097147e285b6ee66e6239af4808d780c83",
"reftest"
],
"css/css-position-3/position-sticky-nested-right-ref.html": [
"5703ad6457deca332232e510dc479c39b7020d24",
"support"
],
"css/css-position-3/position-sticky-nested-right.html": [
"39683624316599779b0efcb347010b92694e02a6",
"reftest"
],
"css/css-position-3/position-sticky-nested-table-ref.html": [
"7b8956bc720e2e25e7ff0bc5889812c26837ab58",
"support"
],
"css/css-position-3/position-sticky-nested-table.html": [
"87a80629bcfcace28d4f13bce99325d55d317574",
"reftest"
],
"css/css-position-3/position-sticky-nested-top-ref.html": [
"66ea8b8c72023089d52e6ebdf5bfff5d56259bfc",
"support"
],
"css/css-position-3/position-sticky-nested-top.html": [
"88e35164b6ede3adf9727989cf59ff9956bdbae7",
"reftest"
],
"css/css-position-3/position-sticky-offset-top-left.html": [
"a25b64d016644c272ea92b6129a59eefb21d2fa0",
"testharness"
],
"css/css-position-3/position-sticky-overflow-padding-ref.html": [
"b3d81934cc90e70dff6bc5cd7789594a8fcd7ecf",
"support"
],
"css/css-position-3/position-sticky-overflow-padding.html": [
"588502dc7eb4a7f88f78dd1b2cdc857861c89f77",
"reftest"
],
"css/css-position-3/position-sticky-parsing.html": [
"224bc984bc6eb4a55931461cf7e51f7b04d219f4",
"testharness"
],
"css/css-position-3/position-sticky-right-ref.html": [
"9a4a11b22cb0ea13f38a7dded8469f4848550ed4",
"support"
],
"css/css-position-3/position-sticky-right.html": [
"f79c0e3e99085e483652950b141fe15c3c4d01d8",
"reftest"
],
"css/css-position-3/position-sticky-stacking-context-ref.html": [
"dd6e5d4734c924c1ad08d14db986fb89d7cb03f6",
"support"
],
"css/css-position-3/position-sticky-stacking-context.html": [
"ac1e643ac9f03d0fe415c3f52a4db7c407dd3537",
"reftest"
],
"css/css-position-3/position-sticky-table-tfoot-bottom-ref.html": [
"b902bec7e12fd6d9cad02c61f332a44f5818f8ee",
"support"
],
"css/css-position-3/position-sticky-table-tfoot-bottom.html": [
"4caf24ad5f783119598d52b40425ae3433b61da6",
"reftest"
],
"css/css-position-3/position-sticky-table-th-bottom-ref.html": [
"14d74f652a67cad449bd7ef75ed18bd906ba3bf0",
"support"
],
"css/css-position-3/position-sticky-table-th-bottom.html": [
"84df11e668ada7f89586b2b82774f3f43e07457c",
"reftest"
],
"css/css-position-3/position-sticky-table-th-left-ref.html": [
"a9057263cf68862de453cf857961ece6003eb589",
"support"
],
"css/css-position-3/position-sticky-table-th-left.html": [
"e58662697cbf38f24c38562417864ffa38a312ee",
"reftest"
],
"css/css-position-3/position-sticky-table-th-right-ref.html": [
"8d42e0ff2920782dbfbd060b23817e75125dfb5e",
"support"
],
"css/css-position-3/position-sticky-table-th-right.html": [
"6ea7a6d2e456022d3ebfb91869f751013e27991d",
"reftest"
],
"css/css-position-3/position-sticky-table-th-top-ref.html": [
"b30c817f263e6e7b695508983952a46eb32494f9",
"support"
],
"css/css-position-3/position-sticky-table-th-top.html": [
"ce4a56682101dc24c9170d3d265fc6a021b5b7ab",
"reftest"
],
"css/css-position-3/position-sticky-table-thead-top-ref.html": [
"a2b03215ddc3aed6bc81ed678f6339d72132d4df",
"support"
],
"css/css-position-3/position-sticky-table-thead-top.html": [
"2c3d4dd8028d7d79f74aa1460c57f10d087a45f0",
"reftest"
],
"css/css-position-3/position-sticky-table-tr-bottom-ref.html": [
"77fcc16040cff06c53f18cfe96296f495b752c18",
"support"
],
"css/css-position-3/position-sticky-table-tr-bottom.html": [
"f66365f4ceed9072bf25b98ecc36e49c89625b8b",
"reftest"
],
"css/css-position-3/position-sticky-table-tr-top-ref.html": [
"8a54752c532080b652ae5ffb384b34ad2c8d8cb4",
"support"
],
"css/css-position-3/position-sticky-table-tr-top.html": [
"7a030d17358067b78c879bf17171b60d1dc3acd9",
"reftest"
],
"css/css-position-3/position-sticky-top-ref.html": [
"e5a05c21494a2e2923d1ed37050ec75db7ab55cd",
"support"
],
"css/css-position-3/position-sticky-top.html": [
"30c0c00c6313a747b51c8b6d4f1301056af56560",
"reftest"
],
"css/css-position-3/position-sticky-writing-modes-ref.html": [
"407a1831479ccca61f6f7b268abcbf97f667f0bf",
"support"
],
"css/css-position-3/position-sticky-writing-modes.html": [
"b6d16a38b73d4c107e587194818a542fee9d0716",
"reftest"
],
"css/css/ahem.css": [
"16a4dd68da41156fbdd139b4a56547f94ad4dbe7",
"support"

View file

@ -0,0 +1,17 @@
[position-sticky-get-bounding-client-rect.html]
type: testharness
[Untitled]
expected: FAIL
[sticky positioned element should be observable by getBoundingClientRect.]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL
[getBoundingClientRect should be correct for sticky after script insertion]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL
[getBoundingClientRect should be correct for sticky after script-caused layout]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-grid.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18379
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-inline.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18379
[Untitled]
expected: FAIL

View file

@ -0,0 +1,8 @@
[position-sticky-nested-bottom.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-nested-inline.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-nested-left.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-nested-right.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-nested-table.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-nested-top.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18377
[Untitled]
expected: FAIL

View file

@ -0,0 +1,10 @@
[position-sticky-offset-top-left.html]
type: testharness
[offsetTop/offsetLeft should be correct for sticky after script insertion]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL
[offsetTop/offsetLeft should be correct for sticky after script-caused layout]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-overflow-padding.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18379
[Untitled]
expected: FAIL

View file

@ -0,0 +1,6 @@
[position-sticky-parsing.html]
type: testharness
[The value of sticky for the position property should be parsed correctly]
bug: https://github.com/servo/servo/issues/18378
expected: FAIL

View file

@ -0,0 +1,7 @@
[position-sticky-writing-modes.html]
type: reftest
expected: FAIL
bug: https://github.com/servo/servo/issues/18379
[Untitled]
expected: FAIL

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the top constraint</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: absolute;
left: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 100;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 250px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 300px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<title>position:sticky elements should respect the bottom constraint</title>
<link rel="match" href="position-sticky-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements obey their bottom anchor after scrolling" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.prepadding {
height: 200px;
}
.container {
height: 200px;
}
.filler {
height: 100px;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
bottom: 25px;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 100;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 250px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 300px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should work correctly with flexbox</title>
<style>
.scroller {
overflow: scroll;
width: 350px;
height: 100px;
margin-bottom: 15px;
}
.flex-container {
width: 600px;
position: relative;
display: flex;
flex-flow: row wrap;
}
.green {
background-color: green;
}
.flex-item {
height: 85px;
width: 100px;
display: flex;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div id="scroller1" class="scroller">
<div class="flex-container">
<div class="flex-item"></div>
<div class="green flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<div id="scroller2" class="scroller">
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<div id="scroller3" class="scroller">
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="green flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>

View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<title>position:sticky elements should work correctly with flexbox</title>
<link rel="match" href="position-sticky-flexbox-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with flexbox" />
<style>
.scroller {
overflow: scroll;
width: 350px;
height: 100px;
margin-bottom: 15px;
}
.flex-container {
width: 600px;
position: relative;
display: flex;
flex-flow: row wrap;
}
.sticky {
position: sticky;
left: 50px;
}
.green {
background-color: green;
}
.flex-item {
width: 100px;
height: 85px;
display: flex;
}
.indicator {
position: absolute;
background-color: red;
width: 100px;
height: 85px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div id="scroller1" class="scroller">
<div class="flex-container">
<div class="indicator" style="left: 100px;"></div>
<div class="flex-item"></div>
<div class="sticky green flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<div id="scroller2" class="scroller">
<div class="flex-container">
<div class="indicator" style="left: 200px;"></div>
<div class="flex-item"></div>
<div class="sticky green flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<div id="scroller3" class="scroller">
<div class="flex-container">
<div class="indicator" style="left: 300px;"></div>
<div class="flex-item"></div>
<div class="sticky green flex-item"></div>
<div class="green flex-item"></div>
</div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>

View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<title>Sticky positioned element should be observable by getBoundingClientRect.</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that sticky positioned element
should be observable by getBoundingClientRect." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
margin: 0;
}
.container {
overflow: scroll;
width: 200px;
height: 200px;
}
.spacer {
width: 2000px;
height: 2000px;
}
.box {
width: 100px;
height: 100px;
background-color: green;
}
.sticky {
position: sticky;
top: 50px;
left: 20px;
}
</style>
<div id="scroller1" class="container">
<div id="sticky1" class="sticky box"></div>
<div class="spacer"></div>
</div>
<script>
test(() => {
var sticky = document.getElementById('sticky1');
assert_equals(sticky.getBoundingClientRect().top, 50);
document.getElementById('scroller1').scrollTop = 100;
assert_equals(sticky.getBoundingClientRect().top, 50);
sticky.style.position = 'relative';
assert_equals(sticky.getBoundingClientRect().top, -50);
sticky.style.position = 'sticky';
assert_equals(sticky.getBoundingClientRect().top, 50);
}, 'sticky positioned element should be observable by getBoundingClientRect.');
</script>
<div id="scroller2" class="container">
<div class="spacer"></div>
</div>
<script>
test(() => {
var scroller = document.getElementById('scroller2');
scroller.scrollTop = 100;
scroller.scrollLeft = 75;
var sticky = document.createElement('div');
sticky.className = 'sticky box';
scroller.insertBefore(sticky, scroller.querySelector('.spacer'));
var sticky_bounds = sticky.getBoundingClientRect();
var scroller_bounds = scroller.getBoundingClientRect();
assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
}, 'getBoundingClientRect should be correct for sticky after script insertion');
</script>
<div id="scroller3" class="container">
<div id="sticky3" class="sticky box"></div>
<div class="spacer"></div>
</div>
<script>
test(() => {
var scroller = document.getElementById('scroller3');
var sticky = document.getElementById('sticky3');
scroller.scrollTop = 100;
scroller.scrollLeft = 75;
var div = document.createElement('div');
div.style.height = '65px';
scroller.insertBefore(div, sticky);
var sticky_bounds = sticky.getBoundingClientRect();
var scroller_bounds = scroller.getBoundingClientRect();
assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
}, 'getBoundingClientRect should be correct for sticky after script-caused layout');
</script>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should work correctly with grid layout</title>
<style>
.scroller {
position: relative;
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
height: 100px;
margin-bottom: 15px;
}
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 100%;
width: 400px;
height: 90px;
}
.green {
background-color: green;
}
.grid-item {
width: 100%;
height: 100%;
grid-row: 1;
}
.padding {
height: 1px;
width: 700px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 300;
});
</script>
<div id="scroller1" class="scroller">
<div class="grid-container">
<div class="grid-item" style="grid-column: 1;"></div>
<div class="green grid-item" style="grid-column: 2;"></div>
<div class="green grid-item" style="grid-column: 3;"></div>
</div>
<div class="padding"></div>
</div>
<div id="scroller2" class="scroller">
<div class="grid-container">
<div class="grid-item" style="grid-column: 1;"></div>
<div class="grid-item" style="grid-column: 2;"></div>
<div class="green grid-item" style="grid-column: 3;"></div>
</div>
<div class="padding"></div>
</div>
<div id="scroller3" class="scroller">
<div class="grid-container">
<div class="grid-item" style="grid-column: 1;"></div>
<div class="grid-item" style="grid-column: 2;"></div>
<div class="grid-item" style="grid-column: 3;"></div>
<div class="green grid-item" style="grid-column: 4;"></div>
</div>
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>

View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<title>position:sticky elements should work correctly with grid layout</title>
<link rel="match" href="position-sticky-grid-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements interoperate correctly with grid" />
<style>
.scroller {
position: relative;
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
height: 100px;
margin-bottom: 15px;
}
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 100%;
width: 400px;
height: 90px;
}
.sticky {
position: sticky;
left: 50px;
}
.green {
background-color: green;
}
.grid-item {
width: 100%;
height: 100%;
grid-row: 1;
}
.indicator {
position: absolute;
background-color: red;
width: 100px;
height: 90px;
}
.padding {
height: 1px;
width: 700px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 150;
document.getElementById('scroller3').scrollLeft = 300;
});
</script>
<div id="scroller1" class="scroller">
<div class="grid-container">
<div class="indicator" style="left: 100px;"></div>
<div class="grid-item" style="grid-column: 1;"></div>
<div class="sticky green grid-item" style="grid-column: 2;"></div>
<div class="green grid-item" style="grid-column: 3;"></div>
</div>
<div class="padding"></div>
</div>
<div id="scroller2" class="scroller">
<div class="grid-container">
<div class="indicator" style="left: 200px;"></div>
<div class="grid-item" style="grid-column: 1;"></div>
<div class="sticky green grid-item" style="grid-column: 2;"></div>
<div class="green grid-item" style="grid-column: 3;"></div>
</div>
<div class="padding"></div>
</div>
<div id="scroller3" class="scroller">
<div class="grid-container">
<div class="indicator" style="left: 300px;"></div>
<div class="grid-item" style="grid-column: 1;"></div>
<div class="sticky green grid-item" style="grid-column: 2;"></div>
<div class="green grid-item" style="grid-column: 3;"></div>
</div>
<div class="padding"></div>
</div>
<p>You should see three green boxes of varying size above. There should be no red.</p>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should not affect the flow position of other elements</title>
<style>
.scroller {
height: 200px;
width: 100px;
overflow-y: scroll;
margin-bottom: 15px;
}
.sticky {
background-color: green;
}
.box {
height: 50px;
width: 50px;
}
.before {
background-color: fuchsia;
}
.after {
background-color: orange;
}
.padding {
height: 450px;
}
</style>
<div class="scroller">
<div class="before box"></div>
<div class="box"></div>
<div class="after box"></div>
<div class="sticky box"></div>
<div class="padding"></div>
</div>
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>position:sticky elements should not affect the flow position of other elements</title>
<link rel="match" href="position-sticky-inflow-position-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements do not affect the flow position of other elements" />
<style>
.scroller {
height: 200px;
width: 100px;
overflow-y: scroll;
margin-bottom: 15px;
}
.sticky {
background-color: green;
position: sticky;
top: 150px;
}
.box {
height: 50px;
width: 50px;
}
.before {
background-color: fuchsia;
}
.after {
background-color: orange;
}
.padding {
height: 500px;
}
</style>
<div class="scroller">
<div class="before box"></div>
<div class="sticky box"></div>
<div class="after box"></div>
<div class="padding"></div>
</div>
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<title>Reference for position:sticky should work for inline elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
}
.indicator {
position: absolute;
left: 0;
color: green;
}
.inline {
display: inline;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator inline" style="top: 150px;">XXX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator inline" style="top: 175px;">XXX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator inline" style="top: 275px;">XXX</div>
</div>
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<title>position:sticky should work for inline elements</title>
<link rel="match" href="position-sticky-inline-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky works for inline elements" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.indicator {
position: absolute;
left: 0;
color: red;
}
.sticky {
position: sticky;
top: 50px;
color: green;
}
.inline {
display: inline;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator inline" style="top: 150px;">XXX</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky inline">XXX</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator inline" style="top: 175px;">XXX</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky inline">XXX</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator inline" style="top: 275px;">XXX</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky inline">XXX</div>
</div>
</div>
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>Focusing on visible sticky input box should not scroll the page.</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that focusing on visible sticky
positioned input box should not scroll the page." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
height: 2000px;
}
input {
position: sticky;
top: 10px;
}
</style>
<input type="text" id="input"/>
<script>
test(() => {
var input = document.getElementById('input');
window.scrollTo(0, 100);
input.focus();
assert_equals(window.scrollY, 100);
}, 'Focusing on visible sticky input box should not scroll the page.');
</script>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the left constraint</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.indicator {
background-color: green;
position: absolute;
top: 0;
}
.box {
height: 100%;
width: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 175px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 200px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<title>position:sticky elements should respect the left constraint</title>
<link rel="match" href="position-sticky-left-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements obey their left anchor after scrolling" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.prepadding {
display: inline-block;
height: 100%;
width: 100px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.innerpadding {
display: inline-block;
height: 100%;
width: 50px;
}
.indicator {
background-color: red;
position: absolute;
top: 0;
}
.sticky {
background-color: green;
position: sticky;
left: 50px;
}
.box {
display: inline-block;
height: 100%;
width: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="left: 150px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="left: 175px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="left: 200px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="innerpadding"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should properly interact with margins</title>
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 400px;
}
.scroller {
width: 150px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
.indicator {
position: relative;
background-color: green;
margin: 15px;
}
.box {
width: 100px;
height: 100px;
}
.padding {
height: 385px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 60;
document.getElementById('scroller3').scrollTop = 120;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 0;"></div>
<div class="padding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 50px;"></div>
<div class="padding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 85px;"></div>
<div class="padding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<title>position:sticky elements should properly interact with margins</title>
<link rel="match" href="position-sticky-margins-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="position:sticky elements should ignore margins when sticking, but consider them when making sure sticky elements do not escape their containing block" />
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 400px;
}
.scroller {
position: relative;
width: 150px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
.holder {
width: 130px;
height: 200px;
}
.sticky {
position: sticky;
background-color: green;
top: 5px;
margin: 15px;
}
.indicator {
left: 15px;
position: absolute;
background-color: red;
}
.box {
width: 100px;
height: 100px;
}
.padding {
height: 300px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 60;
document.getElementById('scroller3').scrollTop = 120;
});
</script>
<!-- Before sticking, the margin should be obeyed. -->
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 15px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<!-- Whilst stuck, the margin is irrelevant. -->
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 65px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<!-- The margin does count when making sure the sticky element does not escape
its containing block. -->
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 100px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<title>Reference for nested bottom-constrained position:sticky elements should render correctly</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.outerIndicator {
background-color: green;
position: absolute;
left: 0;
width: 100%;
height: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
left: 0;
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 75;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="innerIndicator" style="top: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 250px;"></div>
<div class="innerIndicator" style="top: 290px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 300px;"></div>
<div class="innerIndicator" style="top: 350px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,135 @@
<!DOCTYPE html>
<title>Nested bottom-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a bottom constraint render correctly" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.prepadding {
height: 200px;
}
.container {
height: 200px;
}
.filler {
height: 100px;
}
.outerIndicator {
background-color: red;
position: absolute;
left: 0;
width: 100%;
height: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
left: 0;
width: 100%;
height: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
bottom: 25px;
width: 100%;
height: 100px;
}
.innerFiller {
height: 50px;
}
.innerSticky {
background-color: blue;
position: sticky;
bottom: 35px;
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 75;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 0;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="top: 250px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 40px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="top: 300px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 50px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<title>Reference for nested inline position:sticky elements should render correctly</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
}
.outerIndicator {
color: green;
position: absolute;
left: 0;
}
.innerIndicator {
color: blue;
position: absolute;
left: 25px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 150px;">X</div>
<div class="innerIndicator" style="top: 150px;">XX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 175px;">X</div>
<div class="innerIndicator" style="top: 185px;">XX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 275px;">X</div>
<div class="innerIndicator" style="top: 275px;">XX</div>
</div>
</div>
</div>
<div>You should see three green and three blue rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,114 @@
<!DOCTYPE html>
<title>Nested inline position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-inline-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested inline position:sticky elements render correctly" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.outerIndicator {
color: red;
position: absolute;
left: 0;
}
.innerIndicator {
color: red;
position: absolute;
left: 25px;
}
.outerSticky {
display: inline;
color: green;
position: sticky;
top: 50px;
}
.innerSticky {
display: inline;
color: blue;
position: sticky;
top: 60px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 150px;">X</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="top: 175px;">X</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">X<div class="innerIndicator" style="top: 10px;">XX</div><div class="innerSticky">XX</div></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="top: 200px;">X</div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<title>Reference for nested left-constrained position:sticky elements should render correctly</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.outerIndicator {
background-color: green;
position: absolute;
top: 0;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
top: 0;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 150px;"></div>
<div class="innerIndicator" style="left: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 175px;"></div>
<div class="innerIndicator" style="left: 185px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="innerIndicator" style="left: 250px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,141 @@
<!DOCTYPE html>
<title>Nested left-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-left-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a left constraint render correctly" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
font-size: 0;
}
.prepadding {
display: inline-block;
height: 100%;
width: 100px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.innerpadding {
display: inline-block;
height: 100%;
width: 50px;
}
.outerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
left: 50px;
display: inline-block;
height: 100%;
width: 100px;
}
.innerSticky {
background-color: blue;
position: sticky;
left: 60px;
display: inline-block;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="left: 150px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 0;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="left: 175px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding">
</div><div class="outerSticky">
<div class="innerIndicator" style="left: 10px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 50px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the right constraint</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.outerIndicator {
background-color: green;
position: absolute;
top: 0;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
top: 0;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 75;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="innerIndicator" style="left: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 250px;"></div>
<div class="innerIndicator" style="left: 290px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 300px;"></div>
<div class="innerIndicator" style="left: 350px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,149 @@
<!DOCTYPE html>
<title>Nested right-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-right-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a right constraint render correctly" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
font-size: 0;
}
.prepadding {
display: inline-block;
height: 100%;
width: 200px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.filler {
display: inline-block;
height: 100%;
width: 100px;
}
.outerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
right: 25px;
display: inline-block;
height: 100%;
width: 100px;
}
.innerFiller {
display: inline-block;
height: 100%;
width: 50px;
}
.innerSticky {
background-color: blue;
position: sticky;
right: 35px;
display: inline-block;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 75;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 0;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="left: 250px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 40px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="left: 300px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 50px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<title>Reference for nested position:sticky table elements should render correctly</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 700px;
}
.indicator {
position: absolute;
left: 0;
background-color: green;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator" style="top: 100px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator" style="top: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator" style="top: 250px;"></div>
</div>
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,131 @@
<!DOCTYPE html>
<title>Nested position:sticky table elements should render correctly</title>
<link rel="match" href="position-sticky-nested-table-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 700px;
}
.prepadding {
height: 100px;
}
table {
border-collapse: collapse;
}
td, th {
height: 50px;
width: 50px;
padding: 0;
}
th {
background: green;
}
.sticky {
position: sticky;
top: 25px;
}
.indicator {
position: absolute;
left: 0;
background-color: red;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr class="sticky">
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr class="sticky">
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr class="sticky">
<th class="sticky"></th>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div>You should see three green rectangles above. No red should be visible.</div>

View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<title>Reference for nested top-constrained position:sticky elements should render correctly</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.indicator {
position: absolute;
left: 0;
}
.bigBox {
width: 100%;
height: 100px;
}
.smallBox {
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 150px;"></div>
<div class="blue indicator smallBox" style="top: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 175px;"></div>
<div class="blue indicator smallBox" style="top: 185px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 200px;"></div>
<div class="blue indicator smallBox" style="top: 250px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<title>Nested top-constrainted position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a top constraint render correctly" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.outerIndicator {
background-color: red;
position: absolute;
left: 0;
height: 100px;
width: 100%;
}
.innerIndicator {
background-color: red;
position: absolute;
left: 0;
height: 50px;
width: 100%;
}
.outerSticky {
background-color: green;
position: sticky;
top: 50px;
width: 100%;
height: 100px;
}
.innerSticky {
background-color: blue;
position: sticky;
top: 60px;
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 150px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 0;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="top: 175px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 10px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 50px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<title>Sticky positioned element should be observable by offsetTop and offsetLeft</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that a sticky positioned element
should be observable by offsetTop/offsetLeft." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
margin: 0;
}
.container {
position: relative; /* Required for offsetTop/offsetLeft tests. */
overflow: scroll;
width: 200px;
height: 200px;
}
.spacer {
width: 2000px;
height: 2000px;
}
.box {
width: 100px;
height: 100px;
background-color: green;
}
.sticky {
position: sticky;
top: 50px;
left: 20px;
}
</style>
<div id="scroller1" class="container">
<div class="spacer"></div>
</div>
<script>
test(() => {
var scroller = document.getElementById('scroller1');
scroller.scrollTop = 100;
scroller.scrollLeft = 75;
var sticky = document.createElement('div');
sticky.className = 'sticky box';
scroller.insertBefore(sticky, scroller.querySelector('.spacer'));
assert_equals(sticky.offsetTop, scroller.scrollTop + 50);
assert_equals(sticky.offsetLeft, scroller.scrollLeft + 20);
}, 'offsetTop/offsetLeft should be correct for sticky after script insertion');
</script>
<div id="scroller2" class="container">
<div id="sticky2" class="sticky box"></div>
<div class="spacer"></div>
</div>
<script>
test(function() {
var scroller = document.getElementById('scroller2');
var sticky = document.getElementById('sticky2');
scroller.scrollTop = 100;
scroller.scrollLeft = 75;
var div = document.createElement('div');
div.style.height = '65px';
scroller.insertBefore(div, sticky);
assert_equals(sticky.offsetTop, scroller.scrollTop + 50);
assert_equals(sticky.offsetLeft, scroller.scrollLeft + 20);
}, 'offsetTop/offsetLeft should be correct for sticky after script-caused layout');
</script>

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect padding on their ancestor overflow element</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
padding: 20px 0;
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: absolute;
left: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 220;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 170px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 195px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 220px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<title>position:sticky elements should respect padding on their ancestor overflow element</title>
<link rel="match" href="position-sticky-overflow-padding-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements respect padding on their ancestor overflow element" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
/* The target sticky position should be offset by this padding. */
padding: 20px 0;
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
top: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 220;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 170px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 195px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 220px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<title>Position value 'sticky' should be a valid value</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#position-property" />
<meta name="assert" content="This test checks that setting position to 'sticky'
should be allowed." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- We need something to create elements in. -->
<body></body>
<script>
// Sticky is valid for all elements except table-column-group and table-column.
const VALID_STICKY_DISPLAY_TYPES = [
'block',
'inline',
'run-in',
'flow',
'flow-root',
'table',
'flex',
'grid',
'ruby',
'subgrid',
'list-item',
'table-row-group',
'table-header-group',
'table-footer-group',
'table-row',
'table-cell',
'table-caption',
'ruby-base',
'ruby-text',
'ruby-base-container',
'ruby-text-container',
'contents',
'none',
];
const INVALID_STICKY_DISPLAY_TYPES = [
'table-column-group',
'table-column',
];
test(() => {
for (displayValue of VALID_STICKY_DISPLAY_TYPES) {
let div = document.createElement('div');
let style = `position: sticky; display: ${displayValue};`;
div.setAttribute('style', style);
document.body.appendChild(div);
// We only check display values that the browser under test recognizes.
if (div.style.display == displayValue) {
assert_equals(getComputedStyle(div).position, 'sticky',
`Expected sticky to be valid for display: ${displayValue}`);
}
document.body.removeChild(div);
}
for (displayValue of INVALID_STICKY_DISPLAY_TYPES) {
let div = document.createElement('div');
let style = `position: sticky; display: ${displayValue};`;
div.setAttribute('style', style);
document.body.appendChild(div);
assert_not_equals(getComputedStyle(div).position, 'sticky',
`Expected sticky to be invalid for display: ${displayValue}`);
document.body.removeChild(div);
}
}, 'The value of sticky for the position property should be parsed correctly');
</script>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the right constraint</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.indicator {
background-color: green;
position: absolute;
top: 0;
}
.box {
height: 100%;
width: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 100;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 250px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="left: 300px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,102 @@
<!DOCTYPE html>
<title>position:sticky elements should respect the right constraint</title>
<link rel="match" href="position-sticky-right-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements obey their right anchor after scrolling" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.prepadding {
display: inline-block;
height: 100%;
width: 200px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.filler {
display: inline-block;
height: 100%;
width: 100px;
}
.indicator {
background-color: red;
position: absolute;
top: 0;
}
.sticky {
background-color: green;
position: sticky;
right: 25px;
}
.box {
display: inline-block;
height: 100%;
width: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 100;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="left: 200px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="left: 250px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="left: 300px;"></div>
<div class="contents">
<!-- As these elements are inline, they are whitespace sensitive. -->
<div class="prepadding"></div><div class="container"><div class="filler"></div><div class="sticky box"></div></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Reference for position: sticky should create a stacking context</title>
<style>
.indicator {
background-color: green;
}
.box {
width: 200px;
height: 200px;
}
</style>
<div class="indicator box"></div>
<div>You should see a single green box above. No red should be visible.</div>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>position: sticky should create a stacking context</title>
<link rel="match" href="position-sticky-stacking-context-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="position:sticky elements should create a stacking context" />
<style>
.indicator {
position: absolute;
background-color: green;
z-index: 1;
}
.sticky {
position: sticky;
z-index: 0;
}
.child {
position: relative;
background-color: red;
z-index: 2;
}
.box {
width: 200px;
height: 200px;
}
</style>
<div class="indicator box"></div>
<div class="sticky box">
<!-- Because sticky forms a stacking context, this child remains on bottom
even though it has a higher z-index than the indicator box. -->
<div class="child box"></div>
</div>
<div>You should see a single green box above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky bottom constraint should behave correctly for &lt;tfoot&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<title>position:sticky bottom constraint should behave correctly for &lt;tfoot&gt; elements</title>
<link rel="match" href="position-sticky-table-tfoot-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for &lt;tfoot&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
bottom: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot class="sticky">
<tr><th><div></div></th></tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot class="sticky">
<tr><th><div></div></th></tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot class="sticky">
<tr><th><div></div></th></tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky bottom constraint should behave correctly for &lt;th&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,127 @@
<!DOCTYPE html>
<title>position:sticky bottom constraint should behave correctly for &lt;th&gt; elements</title>
<link rel="match" href="position-sticky-table-th-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for &lt;th&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
bottom: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot>
<tr>
<th class="sticky"><div></div></th>
</tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot>
<tr>
<th class="sticky"><div></div></th>
</tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
<tfoot>
<tr>
<th class="sticky"><div></div></th>
</tr>
</tfoot>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky left constraint should behave correctly for &lt;th&gt; elements</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 10px;
width: 500px;
}
.indicator {
position: absolute;
background-color: green;
top: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="left: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="left: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<title>position:sticky left constraint should behave correctly for &lt;th&gt; elements</title>
<link rel="match" href="position-sticky-table-th-left-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky left constraint behaves correctly for &lt;th&gt; elements" />
<style>
table {
border-collapse: collapse;
margin-left: 100px;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.postpadding {
height: 10px;
width: 500px;
}
.indicator {
position: absolute;
background-color: red;
top: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
left: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 100px;"></div>
<table>
<tbody>
<tr>
<th class="sticky"><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="left: 150px;"></div>
<table>
<tbody>
<tr>
<th class="sticky"><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="left: 250px;"></div>
<table>
<tbody>
<tr>
<th class="sticky"><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky right constraint should behave correctly for &lt;th&gt; elements</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 10px;
width: 500px;
}
.indicator {
position: absolute;
background-color: green;
top: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 75;
document.getElementById('scroller3').scrollLeft = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="left: 200px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="left: 300px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<title>position:sticky right constraint should behave correctly for &lt;th&gt; elements</title>
<link rel="match" href="position-sticky-table-th-right-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky right constraint behaves correctly for &lt;th&gt; elements" />
<style>
table {
border-collapse: collapse;
margin-left: 150px;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.postpadding {
height: 10px;
width: 500px;
}
.indicator {
position: absolute;
background-color: red;
top: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
right: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 0;
document.getElementById('scroller2').scrollLeft = 75;
document.getElementById('scroller3').scrollLeft = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="left: 150px;"></div>
<table>
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<th class="sticky"><div></div></th>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="left: 200px;"></div>
<table>
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<th class="sticky"><div></div></th>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="left: 300px;"></div>
<table>
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<th class="sticky"><div></div></th>
</tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky top constraint should behave correctly for &lt;th&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,127 @@
<!DOCTYPE html>
<title>position:sticky top constraint should behave correctly for &lt;th&gt; elements</title>
<link rel="match" href="position-sticky-table-th-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;th&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
top: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<thead>
<tr>
<th class="sticky"><div></div></th>
</tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding" style="background: pink;"></div>
<table>
<thead>
<tr>
<th class="sticky"><div></div></th>
</tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<thead>
<tr>
<th class="sticky"><div></div></th>
</tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky top constraint should behave correctly for &lt;thead&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<title>position:sticky top constraint should behave correctly for &lt;thead&gt; elements</title>
<link rel="match" href="position-sticky-table-thead-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;thead&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td, th {
padding: 0;
}
td > div, th > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
top: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr><th><div></div></th></tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr><th><div></div></th></tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<thead class="sticky">
<tr><th><div></div></th></tr>
</thead>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky bottom constraint should behave correctly for &lt;tr&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<title>position:sticky bottom constraint should behave correctly for &lt;tr&gt; elements</title>
<link rel="match" href="position-sticky-table-tr-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky bottom constraint behaves correctly for &lt;tr&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td {
padding: 0;
}
td > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
bottom: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 75;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<!-- .sticky element pushed as far up as possible to table edge -->
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr class="sticky"><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<!-- .sticky element stuck to bottom of .scroller -->
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr class="sticky"><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<!-- .sticky element unstuck -->
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr class="sticky"><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<title>Reference for position:sticky top constraint should behave correctly for &lt;tr&gt; elements</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 550px;
}
.indicator {
position: absolute;
background-color: green;
left: 0;
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="contents"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="contents"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,119 @@
<!DOCTYPE html>
<title>position:sticky top constraint should behave correctly for &lt;tr&gt; elements</title>
<link rel="match" href="position-sticky-table-tr-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;tr&gt; elements" />
<style>
table {
border-collapse:collapse;
}
td {
padding: 0;
}
td > div {
height: 50px;
width: 50px;
}
.group {
display: inline-block;
position: relative;
width: 150px;
height: 200px;
}
.scroller {
position: relative;
width: 100px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
.prepadding {
height: 100px;
}
.postpadding {
height: 250px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
top: 25px;
background-color: green;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<!-- .sticky element not yet stuck -->
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator" style="top: 100px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr class="sticky"><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<!-- .sticky element stuck to top of .scroller -->
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator" style="top: 150px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr class="sticky"><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<!-- .sticky element pushed as down as possible to table edge -->
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator" style="top: 250px;"></div>
<div class="prepadding"></div>
<table>
<tbody>
<tr class="sticky"><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
<tr><td><div></div></td></tr>
</tbody>
</table>
<div class="postpadding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the top constraint</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: absolute;
left: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 175px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 200px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<title>position:sticky elements should respect the top constraint</title>
<link rel="match" href="position-sticky-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky elements obey their top anchor after scrolling" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
top: 50px;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 200;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 150px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 175px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<title>Reference for position:sticky constraints are independent of writing mode</title>
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 250px;
}
.scroller {
position: relative;
width: 130px;
height: 200px;
overflow: scroll;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
width: 200px;
}
.indicator {
display: inline;
color: green;
position: relative;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller1').scrollLeft = 20;
document.getElementById('scroller2').scrollTop = 50;
document.getElementById('scroller2').scrollLeft = 60;
});
</script>
<div class="group">
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
<div class="contents">
<div class="indicator" style="left: 40px; top: 100px;">XXX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller" style="writing-mode: vertical-rl;">
<div class="contents">
<div class="indicator" style="right: 45px; top: 100px;">XXX</div>
</div>
</div>
</div>
<div>You should see two green blocks above. No red should be visible.</div>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<title>position:sticky constraints are independent of writing mode</title>
<link rel="match" href="position-sticky-writing-modes-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that position:sticky constraints are independent of the writing mode" />
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 250px;
}
.scroller {
position: relative;
width: 130px;
height: 200px;
overflow: scroll;
font: 25px/1 Ahem;
}
.contents {
height: 500px;
width: 200px;
}
.indicator {
position: absolute;
color: red;
}
.sticky {
display: inline;
color: green;
position: sticky;
top: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller1').scrollLeft = 20;
document.getElementById('scroller2').scrollTop = 50;
document.getElementById('scroller2').scrollLeft = 60;
});
</script>
<div class="group">
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
<div class="indicator" style="left: 40px; top: 100px;">XXX</div>
<div class="contents">
<div class="sticky" style="left: 20px;">XXX</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller" style="writing-mode: vertical-rl;">
<div class="contents">
<div class="indicator" style="left: 45px; top: 100px;">XXX</div>
<div class="sticky" style="right: 20px;">XXX</div>
</div>
</div>
</div>
<div>You should see two green blocks above. No red should be visible.</div>