wpt / css / css-sizing / responsive-iframe / responsive-iframe-value.html?value=content-inline-size,300,200,vertical-rl

Open test on wpt.live | wpt.fyi

Runs: Chrome 159.0.8151.0 (wpt@3a4bbe672, 2026-11-09) | Firefox 162.0a1 (wpt@3a4bbe672, 2026-11-09) | Safari 256 preview (wpt@3a4bbe672, 2026-11-09) | Ladybird 1.0-da9df (wpt@f556782c2, 2026-11-09) | Servo Servo 0.8 (wpt@fea36e49d, 2026-11-08) | Blitz b6ace6a0c (wpt@f6789b0b5, 2026-11-09)

ChromeFirefoxSafariLadybirdServoBlitz
Total1/10/10/10/10/10/1
SubtestChromeFirefoxSafariLadybirdServoBlitzBlitz error message
Measure target with value=content-inline-size and wm=vertical-rlPASSFAILFAILFAILFAILFAIL
assert_array_equals expected property 0 to be 300 got 304 (expected array [300, 200] got [304, 154])

/css/css-sizing/responsive-iframe/responsive-iframe-value.html

<!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-height,300,100">
<meta name="variant" content="?value=content-block-size,300,200">
<meta name="variant" content="?value=content-block-size,300,100">
<meta name="variant" content="?value=content-inline-size,300,200,vertical-rl">
<meta name="variant" content="?value=content-inline-size,300,100,vertical-rl">
<meta name="variant" content="?value=content-width,400,150">
<meta name="variant" content="?value=content-width,200,150">
<meta name="variant" content="?value=content-inline-size,400,150">
<meta name="variant" content="?value=content-inline-size,200,150">
<meta name="variant" content="?value=content-block-size,400,150,vertical-rl">
<meta name="variant" content="?value=content-block-size,200,150,vertical-rl">
<meta name="variant" content="?value=content-width,200,150,,vertical-rl">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<iframe id="target" frameborder=0>
</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, content_wm] = values.split(',');
if (value) {
  target.style.setProperty('frame-sizing', value);
}
if (writing_mode) {
  target.style.writingMode = writing_mode;
}
const is_shrink = parseInt(width) < 300 || parseInt(height) < 150;
const src_params = new URLSearchParams();
if (is_shrink) {
  src_params.set('size', '200,100');
}
if (content_wm) {
  src_params.set('wm', content_wm);
}
target.src = `resources/iframe-contents-400x200root.html?${src_params}`;

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>