anchor-typed-om.html | Explore in Territory

<!DOCTYPE html>
<title>CSS Anchor Positioning Test: anchor()/anchor-size() functions in CSS Typed OM</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #cb {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  #anchor {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: coral;
    anchor-name: --a;
  }
  #target {
    position: absolute;
    background: skyblue;
    position-anchor: --a;
    left: anchor(right);
    top: calc(anchor(bottom) + 5px);
    width: anchor-size(--unknown width, 25px);
    height: calc(anchor-size(height) * 2);
  }
</style>

<div id=cb>
  <div id=anchor></div>
  <div id=target></div>
</div>
<script>
  function assert_unit_value(actual, expected) {
    assert_true(actual instanceof CSSUnitValue);
    assert_true(expected instanceof CSSUnitValue);
    assert_equals(actual.value, expected.value);
    assert_equals(actual.unit, expected.unit);
  }

  test(() => {
    assert_unit_value(target.computedStyleMap().get('left'), CSS.px(30));
    assert_unit_value(target.computedStyleMap().get('top'), CSS.px(35));
  }, 'anchor() computes to pixels');

  test(() => {
    assert_unit_value(target.computedStyleMap().get('width'), CSS.px(25));
    assert_unit_value(target.computedStyleMap().get('height'), CSS.px(40));
  }, 'anchor-size() computes to pixels');
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-anchor-position/anchor-typed-om.html
