Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 00:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision c12517985bca8a3fafd1d3f4f78df75ea4ea79cf

Browse source
This commit is contained in:
WPT Sync Bot 2020-11-19 08:20:44 +00:00
parent e2687b5da8
commit 927b34500f
121 changed files with 2408 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

170
tests/wpt/web-platform-tests/css/css-tables/tentative/position-sticky-container.html Normal file
View file

@ -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>