viewport-units-writing-mode.html (1831B)
1 <!DOCTYPE html> 2 <title>Viewport units are responsive to writing-mode changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 iframe { 9 width: 200px; 10 height: 100px; 11 } 12 </style> 13 14 <iframe id=iframe></iframe> 15 16 <script> 17 18 const doc = iframe.contentDocument; 19 const win = iframe.contentWindow; 20 21 function test_writing_mode(value, expected_pre, expected_post) { 22 test((t) => { 23 t.add_cleanup(() => { doc.body.innerHTML = ''; }); 24 doc.body.innerHTML = ` 25 <style> 26 div { 27 writing-mode: initial; 28 height: ${value}; 29 } 30 .vertical { 31 writing-mode: vertical-rl; 32 } 33 </style> 34 <div></div> 35 `; 36 let div = doc.querySelector('div'); 37 assert_equals(win.getComputedStyle(div).height, expected_pre); 38 39 // The writing-mode of the document element does not matter. 40 t.add_cleanup(() => { doc.documentElement.classList.remove('vertical'); }) 41 doc.documentElement.classList.add('vertical'); 42 assert_equals(win.getComputedStyle(div).height, expected_pre); 43 44 // The writing-mode of the target element is what matters. 45 div.classList.add('vertical'); 46 assert_equals(win.getComputedStyle(div).height, expected_post); 47 }, `${value} computes to ${expected_post} with vertical writing-mode`); 48 } 49 50 test_writing_mode('100vi', '200px', '100px'); 51 test_writing_mode('100svi', '200px', '100px'); 52 test_writing_mode('100lvi', '200px', '100px'); 53 test_writing_mode('100dvi', '200px', '100px'); 54 55 test_writing_mode('100vb', '100px', '200px'); 56 test_writing_mode('100svb', '100px', '200px'); 57 test_writing_mode('100lvb', '100px', '200px'); 58 test_writing_mode('100dvb', '100px', '200px'); 59 60 </script>