responsive-iframe-value.tentative.html

Enable keyboard shortcuts

<!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>