position-try-order-basic.html | Explore in Territory

<!DOCTYPE html>
<title>CSS Anchor Positioning: Basic position-try-order behavior</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #cb {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid black;
  }
  #anchor {
    position: absolute;
    left: 150px;
    top: 200px;
    width: 150px;
    height: 150px;
    background-color: coral;
    anchor-name: --a;
  }
  #target, #ref {
    position: absolute;
    left: 450px; /* force fallback */
    width: 40px;
    height: 40px;
    background-color: skyblue;
    position-anchor: --a;
  }
  #ref {
    background-color: seagreen;
  }

/*

The IMCB for --right is the whole area to the right of the anchor, and similarly
for --left, etc.

  ┌──────────────┐
  │          xxxx│
  │          xxxx│
  │    ┌────┐xxxx│
  │    │    │xxxx│
  │    └────┘xxxx│
  │          xxxx│
  │          xxxx│
  └──────────────┘

**/

  @position-try --right {
    inset: unset;
    left: anchor(right);
  }
  @position-try --left {
    inset: unset;
    right: anchor(left);
  }
  @position-try --top {
    inset: unset;
    bottom: anchor(top);
  }
  @position-try --bottom {
    inset: unset;
    top: anchor(bottom);
  }

/*

The IMCB for --right-sweep is the area that would be "swept" by the anchor if it
moved right, and similarly for --left-sweep, etc.

   ┌──────────────┐
   │              │
   │              │
   │    ┌────┐xxxx│
   │    │    │xxxx│
   │    └────┘xxxx│
   │              │
   │              │
   └──────────────┘

*/

  @position-try --right-sweep {
    inset: unset;
    top: anchor(top);
    bottom: anchor(bottom);
    left: anchor(right);
    align-self: center;
  }

  @position-try --left-sweep {
    inset: unset;
    top: anchor(top);
    bottom: anchor(bottom);
    right: anchor(left);
    align-self: center;
  }

  @position-try --bottom-sweep {
    left: anchor(left);
    right: anchor(right);
    top: anchor(bottom);
    justify-self: center;
  }

  @position-try --top-sweep {
    left: anchor(left);
    right: anchor(right);
    bottom: anchor(top);
    justify-self: center;
  }

</style>
<style id=style>
</style>
<div id=cb>
  <div id=anchor></div>
  <div id=target></div>
  <div id=ref></div>
</div>
<script>

// Test that an element with the specified `position_try` gets the same
// position as a reference element with `position_try_expected`.
function test_order(position_try, position_try_expected) {
  test((t) => {
    style.textContent = `
      #target {
        position-try: ${position_try};
      }
      #ref {
        position-try: ${position_try_expected};
      }
    `;
    assert_true(CSS.supports('position-try', 'normal --x'));
    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
  }, `${position_try} | ${position_try_expected}`);
}

// Note: --right, --left, --top, and --bottom all fit, but have different
// inset-modifed containing blocks.
test_order('--right', '--right');
test_order('--left', '--left');
test_order('--top', '--top');
test_order('--bottom', '--bottom');

// position-try-order:normal just picks the first fallback.
test_order('--right, --left, --bottom, --top', '--right');
test_order('normal --right, --left, --bottom, --top', '--right');
test_order('normal --top, --left, --bottom, --right', '--top');

// --right and --left have the same IMCB block-size.
test_order('most-block-size --right, --left', '--right');
test_order('most-height --right, --left', '--right');
// --left has more inline-size than --right.
test_order('most-inline-size --right, --left', '--left');
test_order('most-width --right, --left', '--left');

// --bottom and --top have the same IMCB inline-size.
test_order('most-inline-size --bottom, --top', '--bottom');
test_order('most-width --bottom, --top', '--bottom');
// --top has more block-size than --bottom.
test_order('most-block-size --bottom, --top', '--top');
test_order('most-height --bottom, --top', '--top');

// --bottom/--top has more IMBC inline-size than --right/--left.
test_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
test_order('most-inline-size --right, --left, --top, --bottom', '--top');

// --right/--left has more IMBC block-size than --bottom/--top.
test_order('most-block-size --bottom, --top, --right, --left', '--right');
test_order('most-block-size --bottom, --top, --left, --right', '--left');

// --left-sweep and --bottom-sweep has the same IMBC inline-size ...
test_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
test_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
// ... but not the same block-size.
test_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
test_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');

test_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
test_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');

test_order(`most-inline-size
  --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
  --right, --left, --bottom, --top
  `, '--left-sweep');

test_order(`most-block-size
  --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
  --right, --left, --bottom, --top
  `, '--right');

</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-anchor-position/position-try-order-basic.html
