scroll-start-target-computed.html | Explore in Territory

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> CSS Scroll Snap 2 Test: scroll-start-target-* computed values</title>
  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/css/support/computed-testcommon.js"></script>
</head>

<body>
  <div id="target"></div>
  <script>
    test_computed_value("scroll-start-target-block", "auto");
    test_computed_value("scroll-start-target-block", "none");

    test_computed_value("scroll-start-target-inline", "auto");
    test_computed_value("scroll-start-target-inline", "none");

    test_computed_value("scroll-start-target-x", "auto");
    test_computed_value("scroll-start-target-x", "none");

    test_computed_value("scroll-start-target-y", "auto");
    test_computed_value("scroll-start-target-y", "none");

    target.style = "";

    // Test logical-physical mapping.
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetBlock = "auto";
      assert_equals(getComputedStyle(target).scrollStartTargetX, "none");
      assert_equals(getComputedStyle(target).scrollStartTargetY, "auto");
    }, "scroll-start-block maps to scroll-start-y in horizontal writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetInline = "auto";
      assert_equals(getComputedStyle(target).scrollStartTargetX, "auto");
      assert_equals(getComputedStyle(target).scrollStartTargetY, "none");
    }, "scroll-start-inline maps to scroll-start-x in horizontal writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetX = "auto";
      assert_equals(getComputedStyle(target).scrollStartTargetBlock, "none");
      assert_equals(getComputedStyle(target).scrollStartTargetInline, "auto");
    }, "scroll-start-x maps to scroll-start-inline in horizontal writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetY = "auto";
      assert_equals(getComputedStyle(target).scrollStartTargetBlock, "auto");
      assert_equals(getComputedStyle(target).scrollStartTargetInline, "none");
    }, "scroll-start-y maps to scroll-start-block in horizontal writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetBlock = "auto";
      target.style.writingMode = "vertical-lr";
      assert_equals(getComputedStyle(target).scrollStartTargetX, "auto");
      assert_equals(getComputedStyle(target).scrollStartTargetY, "none");
    }, "scroll-start-block maps to scroll-start-x in vertical writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetInline = "auto";
      target.style.writingMode = "vertical-lr";
      assert_equals(getComputedStyle(target).scrollStartTargetX, "none");
      assert_equals(getComputedStyle(target).scrollStartTargetY, "auto");
    }, "scroll-start-inline maps to scroll-start-y in vertical writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetX = "auto";
      target.style.writingMode = "vertical-lr";
      assert_equals(getComputedStyle(target).scrollStartTargetBlock, "auto");
      assert_equals(getComputedStyle(target).scrollStartTargetInline, "none");
    }, "scroll-start-x maps to scroll-start-block in vertical writing mode.");
    test((t) => {
      t.add_cleanup(() => { target.style = ""; });
      target.style.scrollStartTargetY = "auto";
      target.style.writingMode = "vertical-lr";
      assert_equals(getComputedStyle(target).scrollStartTargetBlock, "none");
      assert_equals(getComputedStyle(target).scrollStartTargetInline, "auto");
    }, "scroll-start-y maps to scroll-start-inline in vertical writing mode.");
    </script>
</body>

</html>
chromium/third_party/blink/web_tests/external/wpt/css/css-scroll-snap-2/parsing/scroll-start-target-computed.html
