<!DOCTYPE html>
<title>Tests that @position-fallback rules are reordered by cascade layers</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { margin: 0; }
#anchor {
  width: 100px;
  height: 100px;
  margin-left: 200px;
  margin-top: 200px;
  color: orange;
  anchor-name: --a;
}

.target {
  position: absolute;
  width: 100px;
  height: 100px;
  color: lime;
  position-fallback: --fallback;
}
</style>

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

<script>
function createTargetWithStyle(test, style) {
  let styleElement = document.createElement('style');
  styleElement.textContent = style;
  let target = document.createElement('div');
  target.classList.add('target');

  test.add_cleanup(() => {
    styleElement.remove();
    target.remove();
  });

  document.head.appendChild(styleElement);
  document.body.appendChild(target);
  return target;
}

test(t => {
  const target = createTargetWithStyle(t, `
    @position-fallback --fallback {
      @try { right: anchor(--a left); }
    }
    @position-fallback --fallback {
      @try { left: anchor(--a right); }
    }
  `);
  assert_equals(target.offsetLeft, 300);
}, 'When in the same layer, the last rule of each name wins');

test(t => {
  const target = createTargetWithStyle(t, `
    @position-fallback --fallback {
      @try { bottom: anchor(--a top); }
    }
    @layer {
      @position-fallback --fallback {
        @try { top: anchor(--a bottom); }
      }
    }
  `);
  assert_equals(target.offsetTop, 100);
}, 'When in different layers, the rule of each name in the highest layer wins');
</script>
