diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html new file mode 100644 index 0000000000..604b536df1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html @@ -0,0 +1,170 @@ +<!doctype html> +<title>Table parts sticky containers</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org" /> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5020"/> +<style> + body { + margin: 0; + } + main * { + box-sizing: border-box; + } + + main .scroller { + width: 350px; + height: 302px; + overflow-y: scroll; + outline-offset: -1px; + outline: gray solid 1px; + } + main .padblock { + width: 300px; + height: 400px; + outline-offset: -2px; + outline: black dotted 2px; + } + main table { + border-spacing: 0; + } + + main td { + width: 100px; + height: 25px; + } + .sticky { + position:sticky; + top: 0; + background: rgba(0,255,0, 0.3); + } + +</style> +<main> + <div class="scroller"> + <div class="padblock">top</div> + <table> + <thead> + <tr> + <td>h:0,0</td> + <td>h:0,1</td> + <td>h:0,2</td> + </tr> + <tr > + <td>h:1,0</td> + <td >h:1,1</td> + <td>h:1,2</td> + </tr> + <tr> + <td>h:2,0</td> + <td>h:2,1</td> + <td>h:2,2</td> + </tr> + </thead> + <tbody> + <tr> + <td>b:0,0</td> + <td>b:0,1</td> + <td>b:0,2</td> + </tr> + <tr> + <td>b:1,0</td> + <td>b:1,1</td> + <td>b:1,2</td> + </tr> + <tr> + <td>b:2,0</td> + <td>b:2,1</td> + <td>b:2,2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>f:0,0</td> + <td>f:0,1</td> + <td>f:0,2</td> + </tr> + <tr> + <td>f:1,0</td> + <td>f:1,1</td> + <td>f:1,2</td> + </tr> + <tr> + <td>f:2,0</td> + <td>f:2,1</td> + <td>f:2,2</td> + </tr> + </tfoot> + </table> + <div class="padblock">bottom</div> + </div> +</main> +<script> + + function scrollTo(y) { + let scroller = document.querySelector("main .scroller"); + scroller.scrollTop = y; + } + + test( () => { + // Setup + let target = document.querySelector("main tbody tr:nth-child(2) td:nth-child(2)"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(640); + assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); + + // Teardown + target.classList.toggle("sticky"); + }, "TD sticky container is table"); + + test( () => { + // Setup + let target = document.querySelector("main tbody tr:nth-child(2)"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(640); + assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); + // Teardown + target.classList.toggle("sticky"); + }, "TR sticky container is table"); + + + test( () => { + // Setup + let target = document.querySelector("main tbody"); + let scroller = document.querySelector("main .scroller"); + target.classList.toggle("sticky"); + + // Tests + scrollTo(0); + assert_equals(target.getBoundingClientRect().top, 475, "intrinsic position"); + + scrollTo(550); + assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); + + scrollTo(600); + assert_equals(target.getBoundingClientRect().top, -50, "sticking to the table bottom"); + + // Teardown + target.classList.toggle("sticky"); + }, "TBODY sticky container is table"); + +</script> |