<!DOCTYPE html>
<meta charset="utf-8">
<title>Logical properties with deferred <code>writing-mode</code></title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords">
<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time.">
<style>
#parent {
  writing-mode: vertical-lr;
}

@layer {
  .revert-layer {
    writing-mode: vertical-rl;
  }
}
@layer {
  .revert-layer {
    writing-mode: horizontal-tb;
    writing-mode: revert-layer;
  }
}
</style>
<div id="parent">
  <div id="target"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const target = document.getElementById("target");
const computedStyle = getComputedStyle(target);

function check(expected) {
  for (let [prop, value] of Object.entries(expected)) {
    assert_equals(computedStyle.getPropertyValue(prop), value, prop);
  }
}

test(function() {
  target.style.cssText = `
    --wm: vertical-rl;
    writing-mode: var(--wm);
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-right": "1px",
    "margin-left": "2px",
    "margin-top": "3px",
    "margin-bottom": "4px",
  });
}, "Writing mode with variable");

test(function() {
  target.style.cssText = `
    --wm1: vertical-rl;
    --wm2: var(--wm1);
    writing-mode: var(--wm2);
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-right": "1px",
    "margin-left": "2px",
    "margin-top": "3px",
    "margin-bottom": "4px",
  });
}, "Writing mode with nested variables");

test(function() {
  target.style.cssText = `
    writing-mode: inherit;
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-left": "1px",
    "margin-right": "2px",
    "margin-top": "3px",
    "margin-bottom": "4px",
  });
}, "Writing mode with 'inherit'");

test(function() {
  target.style.cssText = `
    writing-mode: initial;
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-top": "1px",
    "margin-bottom": "2px",
    "margin-left": "3px",
    "margin-right": "4px",
  });
}, "Writing mode with 'initial'");

test(function() {
  target.style.cssText = `
    writing-mode: revert;
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-left": "1px",
    "margin-right": "2px",
    "margin-top": "3px",
    "margin-bottom": "4px",
  });
}, "Writing mode with 'revert'");

test(function() {
  target.className = "revert-layer";
  target.style.cssText = `
    margin-block-start: 1px;
    margin-block-end: 2px;
    margin-inline-start: 3px;
    margin-inline-end: 4px;
  `;
  check({
    // Logicals
    "margin-block-start": "1px",
    "margin-block-end": "2px",
    "margin-inline-start": "3px",
    "margin-inline-end": "4px",
    // Physicals
    "margin-right": "1px",
    "margin-left": "2px",
    "margin-top": "3px",
    "margin-bottom": "4px",
  });
}, "Writing mode with 'revert-layer'");
</script>