mirror of
https://github.com/servo/servo.git
synced 2025-09-30 00:29:14 +01:00
Enable CSS position tests and add results
This also removes imported position: sticky tests from the Mozilla directory. These were only supposed to be temporary until the upstream version from WPT were imported.
This commit is contained in:
Martin Robinson
parent
cfef75c99b
commit
2770b4c9bb
421 changed files with 2989 additions and 5347 deletions
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-flexbox.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
[position-sticky-get-bounding-client-rect.html]
|
||||
[sticky positioned element should be observable by getBoundingClientRect.]
|
||||
expected: FAIL
|
||||
|
||||
[getBoundingClientRect should be correct for sticky after script insertion]
|
||||
expected: FAIL
|
||||
|
||||
[getBoundingClientRect should be correct for sticky after script-caused layout]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-grid.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-inflow-position.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-inline.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-left.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-margins.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-bottom.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-inline.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-left.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-right.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-table.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-nested-top.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-offset-top-left.html]
|
||||
[offsetTop/offsetLeft should be correct for sticky after script insertion]
|
||||
expected: FAIL
|
||||
|
||||
[offsetTop/offsetLeft should be correct for sticky after script-caused layout]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-overflow-padding.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[position-sticky-parsing.html]
|
||||
[The value of sticky for the position property should be parsed correctly]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-stacking-context.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-tfoot-bottom.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-th-bottom.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-th-left.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-th-right.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-th-top.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-thead-top.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-tr-bottom.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-table-tr-top.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-top.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[position-sticky-writing-modes.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1611,346 +1611,6 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css-position-3": {
|
||||
"position-sticky-bottom.html": [
|
||||
"18c5cc415c56c444fb9ba7298af1cceb1f412606",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-flexbox.html": [
|
||||
"cf4e8cbcdaad83ba9ef45ade2ec147f8e0698c2b",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-flexbox-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-grid.html": [
|
||||
"c2c1b8ec74c62f8f707909cd560f1492b6def603",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-grid-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-inflow-position.html": [
|
||||
"fc7e8290b15309690d178e5a03750742a69e0425",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inflow-position-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-inline.html": [
|
||||
"6e6ea9ef91ed17820dc1e272820c4288e02cfae4",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-inline-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-left.html": [
|
||||
"40a4d7282dbe503ceb56c49c5133cca87b206e61",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-margins.html": [
|
||||
"5b38ab4c9961991ded95aa2cd291c78517a07f8f",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-margins-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-bottom.html": [
|
||||
"d4d20e571a3724a37b307cd4fbaf9674cca2dcf9",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-inline.html": [
|
||||
"d31bf6617cbf358b4983120ba1265abbf65f788f",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-inline-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-left.html": [
|
||||
"b5a23abeccf5445b128b1ed6196cfe7e75101625",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-right.html": [
|
||||
"411f722eec779ebb61653e28d5b6bf795df60e85",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-table.html": [
|
||||
"be3fbce1560f787c37967e1077098d157133cd96",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-table-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-nested-top.html": [
|
||||
"1ed9dc2a210b8c2510f2d88ae90d6500536751f5",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-nested-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-overflow-padding.html": [
|
||||
"0324861219b414c7ad10a9db501fba0493cad278",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-overflow-padding-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-right.html": [
|
||||
"6c4e696de8d427a342e457a9907d76b45ca5d456",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-stacking-context.html": [
|
||||
"36acf82f4f94f0920146689687cd5dca23cffa30",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-stacking-context-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-tfoot-bottom.html": [
|
||||
"17fe359948c1354cc802c104a865556f6279b10d",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tfoot-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-th-bottom.html": [
|
||||
"878732fd5bc7c28f048d8079f9d7a19d0e7c0f22",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-th-left.html": [
|
||||
"45643506dc9504dc6982bae4c28e0616082d8e1c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-left-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-th-right.html": [
|
||||
"204b6e5d043233664e017303060d3fe3b0691b2c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-right-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-th-top.html": [
|
||||
"7e57a6900842c4874935ba355396bb6b88655111",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-th-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-thead-top.html": [
|
||||
"560a45efeb105584dbd4ad1743a80e51c1b60f36",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-thead-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-tr-bottom.html": [
|
||||
"e306d9654a27414759dc55068df6b566304e57e6",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-bottom-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-table-tr-top.html": [
|
||||
"361535c99c2e38ea41cc01ca5a7ba49840ebbb43",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-table-tr-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-top.html": [
|
||||
"fc07313a20da4b32bd632e6fc8fa20ae98e51ec3",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-top-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-writing-modes.html": [
|
||||
"9672d093a8f2d4b5500063b4ed1d7f591017cb3c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/_mozilla/css/css-position-3/position-sticky-writing-modes-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"data_img_a.html": [
|
||||
"f93c93f27d2011a0fc7ba26a5e73813e4eadbb81",
|
||||
[
|
||||
|
|
@ -8922,112 +8582,6 @@
|
|||
[]
|
||||
]
|
||||
},
|
||||
"css-position-3": {
|
||||
"position-sticky-bottom-ref.html": [
|
||||
"7d4953d77971bf054c91b9f0f3906321b7f6cd52",
|
||||
[]
|
||||
],
|
||||
"position-sticky-flexbox-ref.html": [
|
||||
"554ffa6d6bc9a7d76087b45649c1a69824eb2e59",
|
||||
[]
|
||||
],
|
||||
"position-sticky-grid-ref.html": [
|
||||
"9af81129a630acecd755d9f1c05a728247d44a22",
|
||||
[]
|
||||
],
|
||||
"position-sticky-inflow-position-ref.html": [
|
||||
"beebd7e5aeb7c79200907f3d0f909f41c10c8e75",
|
||||
[]
|
||||
],
|
||||
"position-sticky-inline-ref.html": [
|
||||
"1e467bdd71171a175ca22c56882ff178ee77e6a9",
|
||||
[]
|
||||
],
|
||||
"position-sticky-left-ref.html": [
|
||||
"e0de6fbb812affcd92d86204a19fae498c8145d2",
|
||||
[]
|
||||
],
|
||||
"position-sticky-margins-ref.html": [
|
||||
"30490398923a64e6dc62390f0e30f230cfa9b583",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-bottom-ref.html": [
|
||||
"6be2b5a7b1d0aad2a8e37a7e39bfee401afe8a0a",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-inline-ref.html": [
|
||||
"914ff82d73f73de667497cc85487e1ca0aa94616",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-left-ref.html": [
|
||||
"d3ab0d593d6a29193e4ba3805eb62e0a8aea0338",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-right-ref.html": [
|
||||
"07852ba60415bacdfd7011c890b4ec1103072b4b",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-table-ref.html": [
|
||||
"9327d04e83f979f58489f77feecb39525a902042",
|
||||
[]
|
||||
],
|
||||
"position-sticky-nested-top-ref.html": [
|
||||
"f4696ce7d0ab1a7d625b8a9a6fc2b10538ae70c9",
|
||||
[]
|
||||
],
|
||||
"position-sticky-overflow-padding-ref.html": [
|
||||
"b0e1d4680bcf6ed58b8fb0798f649f0db54d6f0e",
|
||||
[]
|
||||
],
|
||||
"position-sticky-right-ref.html": [
|
||||
"14ed476834bb5eb31e80e85e252424c7b9679685",
|
||||
[]
|
||||
],
|
||||
"position-sticky-stacking-context-ref.html": [
|
||||
"0fe20bd3c339a1a92a3481653d6ea6d85ec054df",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-tfoot-bottom-ref.html": [
|
||||
"a89dd6a485eda34abdf4f28bcbee0636b6dc43b0",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-th-bottom-ref.html": [
|
||||
"2aa5c08a55d29a089d57e4303d893dfd15920abf",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-th-left-ref.html": [
|
||||
"cef7539c16c18ea118831ea107e2f8a2e74380cf",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-th-right-ref.html": [
|
||||
"5d778d1bfc162bc2c480000ebd602855056b3801",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-th-top-ref.html": [
|
||||
"692dbcfdffdc9e23f019a74042feaa5a7eb29736",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-thead-top-ref.html": [
|
||||
"f313d60859c10c46d8ac9d2aa1545e5a8c8c3220",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-tr-bottom-ref.html": [
|
||||
"7f9ef0749629a3f29d0fae56723cbbd2e639ac53",
|
||||
[]
|
||||
],
|
||||
"position-sticky-table-tr-top-ref.html": [
|
||||
"9aa9242d9ceab8e41e6126d0c3b5049dc412121c",
|
||||
[]
|
||||
],
|
||||
"position-sticky-top-ref.html": [
|
||||
"3003b94e5dbe13bf537ed81a3bdb2e62907cb9e4",
|
||||
[]
|
||||
],
|
||||
"position-sticky-writing-modes-ref.html": [
|
||||
"e79c639b43ab65d125e399b13366df15f952412b",
|
||||
[]
|
||||
]
|
||||
},
|
||||
"data_img_b.html": [
|
||||
"265d57ec76ba91e99de0431975a87de46087dad8",
|
||||
[]
|
||||
|
|
@ -12950,36 +12504,6 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css-position-3": {
|
||||
"position-sticky-get-bounding-client-rect.html": [
|
||||
"18b2acfe16f77f3242b51e3a64c9b39d6a4f50b5",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-input-box-gets-focused-after-scroll.html": [
|
||||
"5b2d705e2d0721c072bedf1dcc489fae25b2014f",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-offset-top-left.html": [
|
||||
"ade9e108cf45039173066cedec39462fa37e5d95",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"position-sticky-parsing.html": [
|
||||
"f6f587e615f5759f7a706a57defdd8bfaa836aa6",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"css-transition-cancel-event.html": [
|
||||
"23400c556d58bb21b78a9cbed3b56028c7d299c3",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
disabled: Sending multiple scrolling positions to WebRender is very flaky in the test harness
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
[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
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-grid.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-inline.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-bottom.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-inline.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-left.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-right.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-table.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-nested-top.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18377
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
[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
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-overflow-padding.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[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
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[position-sticky-writing-modes.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
bug: https://github.com/servo/servo/issues/18379
|
||||
[Untitled]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky should work for inline elements</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
|
||||
<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>
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<!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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<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>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for nested inline position:sticky elements should render correctly</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
|
||||
<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>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<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>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <tfoot> 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>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <tfoot> 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 <tfoot> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <th> 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>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <th> 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 <th> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky left constraint should behave correctly for <th> 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>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky left constraint should behave correctly for <th> 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 <th> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky right constraint should behave correctly for <th> 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>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky right constraint should behave correctly for <th> 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 <th> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <th> 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>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <th> 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 <th> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <thead> 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>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <thead> 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 <thead> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky bottom constraint should behave correctly for <tr> 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>
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky bottom constraint should behave correctly for <tr> 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 <tr> 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>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky top constraint should behave correctly for <tr> 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>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>position:sticky top constraint should behave correctly for <tr> 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 <tr> 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>
|
||||
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for position:sticky constraints are independent of writing mode</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
|
||||
<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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<!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" />
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue