viewport-units-scrollbars-compute.html (2405B)
1 <!DOCTYPE html> 2 <title>Resolving viewport units</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_computed_value(value, expected) { 22 test((t) => { 23 t.add_cleanup(() => { doc.body.innerHTML = ''; }); 24 doc.body.innerHTML = ` 25 <!doctype html> 26 <style> 27 * { margin: 0; } 28 html { 29 overflow: scroll; 30 } 31 body { height: 100%; } 32 div { height: ${value}; } 33 </style> 34 <div></div> 35 `; 36 let div = doc.querySelector('div'); 37 assert_equals(win.getComputedStyle(div).height, expected); 38 }, `${value} computes to ${expected}`); 39 } 40 41 test_computed_value('100vw', '185px'); 42 test_computed_value('100vi', '185px'); 43 test_computed_value('100vmax', '185px'); 44 test_computed_value('100svw', '185px'); 45 test_computed_value('100svi', '185px'); 46 test_computed_value('100svmax', '185px'); 47 test_computed_value('100lvw', '185px'); 48 test_computed_value('100lvi', '185px'); 49 test_computed_value('100lvmax', '185px'); 50 test_computed_value('100dvw', '185px'); 51 test_computed_value('100dvi', '185px'); 52 test_computed_value('100dvmax', '185px'); 53 54 test_computed_value('100vh', '85px'); 55 test_computed_value('100vb', '85px'); 56 test_computed_value('100vmin', '85px'); 57 test_computed_value('100svh', '85px'); 58 test_computed_value('100svb', '85px'); 59 test_computed_value('100svmin', '85px'); 60 test_computed_value('100lvh', '85px'); 61 test_computed_value('100lvb', '85px'); 62 test_computed_value('100lvmin', '85px'); 63 test_computed_value('100dvh', '85px'); 64 test_computed_value('100dvb', '85px'); 65 test_computed_value('100dvmin', '85px'); 66 67 test_computed_value('1dvw', '1.84375px'); 68 test_computed_value('10dvw', '18.5px'); 69 test_computed_value('1dvh', '0.84375px'); 70 test_computed_value('10dvh', '8.5px'); 71 72 test_computed_value('calc(1dvw + 1dvw)', '3.6875px'); 73 test_computed_value('calc(1dvw + 1dvh)', '2.6875px'); 74 test_computed_value('calc(1dvw + 100px)', '101.844px'); 75 test_computed_value('max(1svw, 1svh)', '1.84375px'); 76 test_computed_value('min(1lvw, 1lvh)', '0.84375px'); 77 test_computed_value('calc(1dvw + 10%)', '10.3438px'); 78 79 </script>