Blitz - WPT: anchor-center-004.html

wpt / css / css-anchor-position / anchor-center-004.html

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

Subtest	Status	Message
.target 1	FAIL	assert_equals: data-offset-x expected 104 got 0
.target 2	FAIL	assert_equals: data-offset-y expected 86 got 50

Enable JavaScript in test iframe

/css/css-anchor-position/anchor-center-004.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
<link rel="author" href="mailto:dshin@mozilla.com">
<title>Tests the position of 'anchor-center' alignment with target margin: auto.</title>
<style>
.container {
  width: 100px;
  height: 100px;
  border: solid 3px;
  position: relative;
  margin: 50px;
}

.anchor {
  anchor-name: --anchor;
  position: relative;
  width: 50px;
  height: 50px;
  left: 30px;
  top: 20px;
  background: lime;
}

.target {
  position-anchor: --anchor;
  width: 24px;
  height: 24px;
  position: fixed;
  background: cyan;
}

.justify {
  justify-self: anchor-center;
  top: anchor(bottom);
  /* Should be overridden to 0. */
  margin-inline: auto;
}

.align {
  align-self: anchor-center;
  right: anchor(left);
  /* Should be overridden to 0. */
  margin-block: auto;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.target')">

<div class="container">
  <div class="anchor"></div>
  <div class="target justify" data-offset-x="104"></div>
  <div class="target align" data-offset-y="86"></div>
</div>