Content - 3ea8cfc5720141bfb1ac5e81d9609a0d5ce85445 - 8d539a4/cssom-view/scrollIntoView-empty-args.html

visit type:

Tip revision: 2d080f1a7dd986dcd3f33a7676d30f367217d988 authored by Eric Willigers on 03 October 2017, 02:21:05 UTC
CSS Motion Path: begin path at offset-position

Tip revision: 2d080f1

scrollIntoView-empty-args.html

<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<title>Check End Position of scrollIntoView when arg is not fully specified</title>

<style>
  #container {
    position: relative;
    height: 1000px;
    width: 800px;
    overflow: scroll;
  }

  #content {
    position: absolute;
    height: 500px;
    width: 400px;
    left: 1000px;
    top: 1000px;
    background-color: red;
  }
</style>

<div id="container">
  <div id="filler" style="height: 2500px; width: 2500px"></div>
  <div id="content">I must become visible</div>
</div>

<script>
  add_completion_callback(() => document.getElementById("container").remove());
  var content = document.getElementById("content");
  var container = document.getElementById("container");

  var remaining_width = container.clientWidth - content.clientWidth;
  var remaining_height = container.clientHeight - content.clientHeight;

  function instantScrollToTestArgs(arg, expected_x, expected_y) {
    test(t => {
      container.scrollTop = container.scrollLeft = 0;

      assert_not_equals(container.scrollLeft, expected_x);
      assert_not_equals(container.scrollTop, expected_y);
      if (arg == "omitted")
        content.scrollIntoView();
      else
        content.scrollIntoView(arg);
      assert_approx_equals(container.scrollTop, expected_y, 1, "verify scroll top");
      assert_approx_equals(container.scrollLeft, expected_x, 1, "verify scroll left");

    }, "scrollIntoView should behave correctly when the arg is " + arg);
  }

  // expected alignment: inline => nearest, block => start
  instantScrollToTestArgs("omitted",
    content.offsetLeft - remaining_width,
    content.offsetTop);

  // expected alignment: inline => nearest, block => start
  instantScrollToTestArgs(true,
    content.offsetLeft - remaining_width,
    content.offsetTop);

  // expected alignment: inline => nearest, block => end
  instantScrollToTestArgs(false,
    content.offsetLeft - remaining_width,
    content.offsetTop - remaining_height);

  // expected alignment: inline => center, block => center
  instantScrollToTestArgs({},
    content.offsetLeft - remaining_width / 2,
    content.offsetTop - remaining_height / 2);

  // expected alignment: inline => center, block => center
  instantScrollToTestArgs(null,
    content.offsetLeft - remaining_width / 2,
    content.offsetTop - remaining_height / 2);

  // expected alignment: inline => nearest, block => start
  instantScrollToTestArgs(undefined,
    content.offsetLeft - remaining_width,
    content.offsetTop);

</script>

Browse the archive

https://github.com/web-platform-tests/wpt