Commit 2866d20a authored by Ryan Hunt's avatar Ryan Hunt
Browse files

Bug 1518626 - Add scroll-anchoring tests for excluding certain elements from... 

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
parent 83a2dc7f

testing/web-platform/tests/css/css-scroll-anchoring/exclude-sticky.html

0 → 100644
+28 −0
Original line number Diff line number Diff line 
<!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>



body { height: 400vh; margin: 0; }

#sticky, #content { width: 200px; height: 100px; }

#sticky { position: sticky; left: 100px; top: 50px; }

#before { height: 50px; }

#content { margin-top: 100px; }



</style>

<div id="sticky">sticky</div>

<div id="before"></div>

<div id="content">content</div>

<script>



// Tests that the anchor selection algorithm skips sticky-positioned elements.



test(() => {

  document.scrollingElement.scrollTop = 150;

  document.querySelector("#before").style.height = "100px";

  assert_equals(document.scrollingElement.scrollTop, 200);

}, "Sticky-positioned headers shouldn't be chosen as scroll anchors (we should use 'content' instead)");



</script>

testing/web-platform/tests/css/css-scroll-anchoring/opt-out-inner-table.html

0 → 100644
+47 −0
Original line number Diff line number Diff line 
<!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>

testing/web-platform/tests/css/css-scroll-anchoring/opt-out-table.html

0 → 100644
+45 −0
Original line number Diff line number Diff line 
<!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 {

    display: table;

    overflow-anchor: none;

    width: 100px;

    height: 100px;

    margin-bottom: 500px;

}



</style>

<div id="scroller">

    <div id="before"></div>

    <div id="table">content</div>

</div>

<script>



// Tests that the anchor exclusion API works with tables



test(() => {

  let scroller = document.querySelector('#scroller');

  let before = document.querySelector('#before');



  // Scroll down so that #table 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 as an anchor as it is

  // 'overflow-anchor: none'

  assert_equals(scroller.scrollTop, 50);

}, "A table with 'overflow-anchor: none' shouldn't generate any scroll anchor candidates.");



</script>