<!DOCTYPE html><title>Viewport units are responsive to writing-mode changes</title><linkrel="help"href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><style>iframe{width:200px;height:100px;}</style><iframeid=iframe></iframe><script>constdoc=iframe.contentDocument;constwin=iframe.contentWindow;functiontest_writing_mode(value,expected_pre,expected_post){test((t)=>{t.add_cleanup(()=>{doc.body.innerHTML='';});doc.body.innerHTML=` <style> div { writing-mode: initial; height: ${value}; } .vertical { writing-mode: vertical-rl; } </style> <div></div> `;letdiv=doc.querySelector('div');assert_equals(win.getComputedStyle(div).height,expected_pre);// The writing-mode of the document element does not matter.t.add_cleanup(()=>{doc.documentElement.classList.remove('vertical');})doc.documentElement.classList.add('vertical');assert_equals(win.getComputedStyle(div).height,expected_pre);// The writing-mode of the target element is what matters.div.classList.add('vertical');assert_equals(win.getComputedStyle(div).height,expected_post);},`${value} computes to ${expected_post} with vertical writing-mode`);}test_writing_mode('100vi','200px','100px');test_writing_mode('100svi','200px','100px');test_writing_mode('100lvi','200px','100px');test_writing_mode('100dvi','200px','100px');test_writing_mode('100vb','100px','200px');test_writing_mode('100svb','100px','200px');test_writing_mode('100lvb','100px','200px');test_writing_mode('100dvb','100px','200px');</script>