anchor-position-writing-modes-002.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 48 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-position-writing-modes-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Tests logical `anchor` function for `writing-mode`/`direction`s</title>

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

<link rel="author" href="mailto:kojii@chromium.org">

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

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

<style>

.htb-ltr { writing-mode: horizontal-tb; direction: ltr; }

.htb-rtl { writing-mode: horizontal-tb; direction: rtl; }

.vlr-ltr { writing-mode: vertical-lr; direction: ltr; }

.vlr-rtl { writing-mode: vertical-lr; direction: rtl; }

.vrl-ltr { writing-mode: vertical-rl; direction: ltr; }

.vrl-rtl { writing-mode: vertical-rl; direction: rtl; }

.relpos {

  position: relative;

  outline: blue 1px solid;

.spacer {

  width: 10px;

  height: 10px;

  background: yellow;

.anchor {

  anchor-name: --a1;

  margin: 5px;

  width: 30px;

  height: 30px;

  background: orange;

.target {

  position: absolute;

  outline: 5px solid lime;

</style>

<body>

  <template id="template">

    <div class="relpos">

      <div class="spacer"></div>

      <div class="anchor"></div>

    </div>

  </template>

<script>

// Generate tests for all combinations.

// The first two entries are the side `start` and `end` should match in x-axis.

// The next two entries are the side `start` and `end` should match in y-axis.

const writingDirs = {

  'htb-ltr':['l', 'r', 't', 'b'],

  'htb-rtl':['r', 'l', 't', 'b'],

  'vrl-ltr':['r', 'l', 't', 'b'],

  'vrl-rtl':['r', 'l', 'b', 't'],

  'vlr-ltr':['l', 'r', 't', 'b'],

  'vlr-rtl':['l', 'r', 'b', 't'],

};

const container = document.body;

const cb_template = template.content.firstElementChild;

for (const [writingDir, matches] of Object.entries(writingDirs)) {

  const cb = cb_template.cloneNode(true);

  cb.classList.add(writingDir);

  createTarget(null, 'left: anchor(--a1 start)', matches[0], cb);

  createTarget(null, 'left: anchor(--a1 end)', matches[1], cb);

  createTarget(null, 'top: anchor(--a1 start)', matches[2], cb);

  createTarget(null, 'top: anchor(--a1 end)', matches[3], cb);

  createTarget(writingDir, 'left: anchor(--a1 self-start)', matches[0], cb);

  createTarget(writingDir, 'left: anchor(--a1 self-end)', matches[1], cb);

  createTarget(writingDir, 'top: anchor(--a1 self-start)', matches[2], cb);

  createTarget(writingDir, 'top: anchor(--a1 self-end)', matches[3], cb);

  container.appendChild(cb);

function createTarget(className, style, match, cb) {

  const target = document.createElement('div');

  target.classList.add('target');

  if (className)

    target.classList.add(className);

  target.style = style;

  target.dataset.name = style;

  target.dataset.match = match;

  cb.appendChild(target);

// Test all `.target`s.

for (const target of document.querySelectorAll('.target')) {

  const cb = target.parentElement;

  const anchor = cb.querySelector('.anchor');

  test(() => {

    switch (target.dataset.match) {

      case 'l':

        assert_equals(anchor.offsetLeft, target.offsetLeft);

        break;

      case 'r':

        assert_equals(anchor.offsetLeft + anchor.offsetWidth, target.offsetLeft);

        break;

      case 't':

        assert_equals(anchor.offsetTop, target.offsetTop);

        break;

      case 'b':

        assert_equals(anchor.offsetTop + anchor.offsetHeight, target.offsetTop);

        break;

  }, `${cb.classList}/${target.classList}/${target.dataset.name}`);

</script>

</body>