multicol-002.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap/multicol-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#overview">

<link rel="help" href="https://drafts.csswg.org/css-multicol/">

<meta name="assert" content="Scroll snapping on fragmented block inside nested multicol">

<div id="scrollable" style="overflow:hidden; margin:13px; width:300px; height:350px;">

  <div style="columns:2; column-gap:10px; column-fill:auto; width:690px; height:300px; margin:100px;">

    <div style="height:200px; background:hotpink;"></div>

    <div style="columns:3; column-gap:20px; column-fill:auto; width:340px; height:200px;">

      <div style="height:200px; background:blue;"></div>

      <div id="target" style="height:120px; background:cyan;"></div>

      <div style="height:200px; background:gray;"></div>

    </div>

  </div>

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

  // #target is fragmented across two columns - the third (and last) column of

  // the first row of the inner multicol container, and the first column of the

  // second row.

//

  // The left offset of the first fragment of #target (relatively to the scroll

  // port) is 340px (2 columns of 100px width and gaps of 20px width, which is

  // 240px, plus the multicol left margin of 100px). The top offset is 300px

  // (200px hotpink block, plus the multicol top margin of 100px). The fragment

  // is 100px wide and tall.

//

  // The left offset of the second fragment of #target is 450px (outer column

  // width of 340px, plus outer column gap of 10px, plus multicol left margin of

  // 100px). The top offset is 100px (multicol top margin). It is 100px wide and

  // 20px tall.

//

  // The bounding box of #target thus becomes left:340px, top:100px,

  // width:210px, height:300px.

  test(()=> {

    target.style.scrollSnapAlign = "start";

    scrollable.style.scrollSnapType = "x mandatory";

    assert_equals(scrollable.scrollLeft, 340);

    scrollable.style.scrollSnapType = "y mandatory";

    assert_equals(scrollable.scrollTop, 100);

  }, "start");

  test(()=> {

    target.style.scrollSnapAlign = "end";

    scrollable.style.scrollSnapType = "x mandatory";

    assert_equals(scrollable.scrollLeft, 250);

    scrollable.style.scrollSnapType = "y mandatory";

    assert_equals(scrollable.scrollTop, 50);

  }, "end");

  test(()=> {

    target.style.scrollSnapAlign = "center";

    scrollable.style.scrollSnapType = "x mandatory";

    assert_equals(scrollable.scrollLeft, 295);

    scrollable.style.scrollSnapType = "y mandatory";

    assert_equals(scrollable.scrollTop, 75);

  }, "center");

</script>