<!DOCTYPE html>
<title>Test `frame-sizing` values and `writing-mode`s.</title>
<link rel="author" href="mailto:kojii@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-sizing/">
<meta name="variant" content="?value=,300,150">
<meta name="variant" content="?value=content-height,300,200">
<meta name="variant" content="?value=content-block-size,300,200">
<meta name="variant" content="?value=content-inline-size,300,200,vertical-rl">
<meta name="variant" content="?value=content-width,400,150">
<meta name="variant" content="?value=content-inline-size,400,150">
<meta name="variant" content="?value=content-block-size,400,150,vertical-rl">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<iframe id="target" frameborder=0 src="resources/iframe-contents-400x200root.html">
</iframe>
<script>
const target = document.getElementById('target');
const params = new URLSearchParams(window.location.search);
const values = params.get('value');
const [value, width, height, writing_mode] = values.split(',');
if (value) {
  target.style.setProperty('frame-sizing', value);
}
if (writing_mode) {
  target.style.writingMode = writing_mode;
}

async_test(t => {
  window.addEventListener('load', t.step_func_done(() => {
    assert_array_equals([target.offsetWidth, target.offsetHeight],
                        [parseInt(width), parseInt(height)]);
  }));
}, `Measure target with value=${value} and wm=${writing_mode}`);
</script>