summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-scroll-anchoring/abspos-containing-block-outside-scroller.html
blob: 76a4952383e2a99a704b8527b664f0ca506fb3eb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>

body { margin: 0; }
#scroller { overflow: scroll; width: 500px; height: 400px; }
#space { height: 1000px; }
#abs {
  position: absolute; background-color: red;
  width: 100px; height: 100px;
  left: 25px; top: 25px;
}
#rel {
  position: relative; background-color: green;
  left: 50px; top: 100px; width: 100px; height: 75px;
}

</style>
<div id="scroller">
  <div id="space">
    <div id="abs"></div>
    <div id="before"></div>
    <div id="rel"></div>
  </div>
</div>
<script>

// Tests that anchor node selection skips an absolute-positioned descendant of
// the scroller if and only if its containing block is outside the scroller.

test(() => {
  var scroller = document.querySelector("#scroller");
  var abs = document.querySelector("#abs");
  var before = document.querySelector("#before");
  var rel = document.querySelector("#rel");

  // We should not anchor to #abs, because it does not move with the scroller.
  scroller.scrollTop = 25;
  before.style.height = "25px";
  assert_equals(scroller.scrollTop, 50);

  // Reset, make #scroller a containing block.
  before.style.height = "0";
  scroller.scrollTop = 0;
  scroller.style.position = "relative";

  // This time we should anchor to #abs.
  scroller.scrollTop = 25;
  before.style.height = "25px";
  assert_equals(scroller.scrollTop, 25);

}, "Abs-pos descendant with containing block outside the scroller.");

</script>