position-area-align-justify-wm-dir.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 40 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/position-area-align-justify-wm-dir.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Anchor Positioning: position-area positioning - alignment with writing-mode and direction</title>

<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">

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

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

<style>

  /* A 300x300 container with a 100x100 centered anchor */

  #container {

    position: relative;

    width: 300px;

    height: 300px;

  #anchor {

    position: absolute;

    top: 100px;

    left: 100px;

    width: 100px;

    height: 100px;

    anchor-name: --anchor;

  #anchored {

    position: absolute;

    width: 10px;

    height: 10px;

    inset: 10px;

    position-anchor: --anchor;

</style>

<div id="container">

  <div id="anchor"></div>

  <div id="anchored"></div>

</div>

<script>

  function test_position_area(writing_direction, position_area, expected_offsets) {

    anchored.style.positionArea = position_area;

    test(() => {

      assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft");

      assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop");

      assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth");

      assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight");

    }, "Offsets for: " + position_area + " with writing-mode / direction: " + writing_direction);

  const top_left = {left:80, top:80, width:10, height:10};

  const top_right = {left:210, top:80, width:10, height:10};

  const bottom_left = {left:80, top:210, width:10, height:10};

  const bottom_right = {left:210, top:210, width:10, height:10};

  anchored.style.writingMode = "horizontal-tb";

  anchored.style.direction = "ltr";

  // Writing-mode and direction on container

  let writing_direction = "containing-block: horizontal-tb / rtl";

  container.style.writingMode = "horizontal-tb";

  container.style.direction = "rtl";

  test_position_area(writing_direction, "start start", top_right);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", top_right);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // containing-block: vertical-lr / ltr

  // self: horizontal-tb / ltr

  writing_direction = "containing-block: vertical-lr / ltr";

  container.style.writingMode = "vertical-lr";

  container.style.direction = "ltr";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // containing-block: vertical-lr / rtl

  // self: horizontal-tb / ltr

  writing_direction = "containing-block: vertical-lr / rtl";

  container.style.writingMode = "vertical-lr";

  container.style.direction = "rtl";

  test_position_area(writing_direction, "start start", bottom_left);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", bottom_left);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // containing-block: vertical-rl / ltr

  // self: horizontal-tb / ltr

  writing_direction = "containing-block: vertical-rl / ltr";

  container.style.writingMode = "vertical-rl";

  container.style.direction = "ltr";

  test_position_area(writing_direction, "start start", top_right);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", top_right);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // containing-block: vertical-rl / rtl

  // self: horizontal-tb / ltr

  writing_direction = "containing-block: vertical-rl / rtl";

  container.style.writingMode = "vertical-rl";

  container.style.direction = "rtl";

  test_position_area(writing_direction, "start start", bottom_right);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", bottom_right);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // Writing-mode and direction on self

  container.style.writingMode = "horizontal-tb";

  container.style.direction = "ltr";

  // containing-block: horizontal-tb / ltr

  // self: horizontal-tb / rtl

  writing_direction = "self: horizontal-tb / rtl";

  anchored.style.writingMode = "horizontal-tb";

  anchored.style.direction = "rtl";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", top_right);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", top_right);

  // containing-block: horizontal-tb / ltr

  // self: vertical-lr / ltr

  writing_direction = "self: vertical-lr / ltr";

  anchored.style.writingMode = "vertical-lr";

  anchored.style.direction = "ltr";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", top_left);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", top_left);

  // containing-block: horizontal-tb / ltr

  // self: vertical-lr / rtl

  writing_direction = "self: vertical-lr / rtl";

  anchored.style.writingMode = "vertical-lr";

  anchored.style.direction = "rtl";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", bottom_left);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", bottom_left);

  // containing-block: horizontal-tb / ltr

  // self: vertical-rl / ltr

  writing_direction = "self: vertical-rl / ltr";

  anchored.style.writingMode = "vertical-rl";

  anchored.style.direction = "ltr";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", top_right);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", top_right);

  // containing-block: horizontal-tb / ltr

  // self: vertical-rl / rtl

  writing_direction = "self: vertical-rl / rtl";

  anchored.style.writingMode = "vertical-rl";

  anchored.style.direction = "rtl";

  test_position_area(writing_direction, "start start", top_left);

  test_position_area(writing_direction, "self-start self-start", bottom_right);

  test_position_area(writing_direction, "x-start y-start", top_left);

  test_position_area(writing_direction, "x-self-start y-self-start", bottom_right);

</script>