fune/testing/web-platform/tests/css/css-scroll-anchoring/opt-out-inner-table.html
Ryan Hunt 2866d20a40 Bug 1518626 - Add scroll-anchoring tests for excluding certain elements from anchor selection. r=dholbert
This commit adds two tests around anchor selection.

The first tests that 'position: sticky' is an invalid subtree, which is new to
the spec. The second tests that implementations respect 'overflow-anchor' on
the table element, and don't get confused with the boxes generated by tables.

Differential Revision: https://phabricator.services.mozilla.com/D16274

--HG--
extra : rebase_source : 3c2e74a5765d3409a57aa892fe20aa208c5c0e84
extra : intermediate-source : 55addc12904b79f7300e47da96b1d33780a4cbfb
extra : source : 306393539feb1a3391c3a03baaee43e7058bc44a
2019-01-08 13:02:41 -06:00

47 lines
1.2 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#scroller {
height: 200px;
overflow: scroll;
}
#before { height: 50px; }
#table-row {
display: table-row;
overflow-anchor: none;
width: 100px;
height: 100px;
}
#after { margin-bottom: 500px; }
</style>
<div id="scroller">
<div id="before"></div>
<div id="table-row">content</div>
<div id="after"></div>
</div>
<script>
// Tests that the anchor exclusion API works with table parts that generate
// anonymous table box wrappers
test(() => {
let scroller = document.querySelector('#scroller');
let before = document.querySelector('#before');
// Scroll down so that #table-row is the only element in view
scroller.scrollTop = 50;
// Expand #before so that we might perform a scroll adjustment
before.style.height = "100px";
// We shouldn't have selected #table-row as an anchor as it is
// 'overflow-anchor: none'
assert_equals(scroller.scrollTop, 50);
}, "A table with anonymous wrappers and 'overflow-anchor: none' shouldn't generate any scroll anchor candidates.");
</script>