viewport-units-compute.html (2318B)
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 body { height: 100%; } 29 div { height: ${value}; } 30 </style> 31 <div></div> 32 `; 33 let div = doc.querySelector('div'); 34 assert_equals(win.getComputedStyle(div).height, expected); 35 }, `${value} computes to ${expected}`); 36 } 37 38 test_computed_value('100vw', '200px'); 39 test_computed_value('100vi', '200px'); 40 test_computed_value('100vmax', '200px'); 41 test_computed_value('100svw', '200px'); 42 test_computed_value('100svi', '200px'); 43 test_computed_value('100svmax', '200px'); 44 test_computed_value('100lvw', '200px'); 45 test_computed_value('100lvi', '200px'); 46 test_computed_value('100lvmax', '200px'); 47 test_computed_value('100dvw', '200px'); 48 test_computed_value('100dvi', '200px'); 49 test_computed_value('100dvmax', '200px'); 50 51 test_computed_value('100vh', '100px'); 52 test_computed_value('100vb', '100px'); 53 test_computed_value('100vmin', '100px'); 54 test_computed_value('100svh', '100px'); 55 test_computed_value('100svb', '100px'); 56 test_computed_value('100svmin', '100px'); 57 test_computed_value('100lvh', '100px'); 58 test_computed_value('100lvb', '100px'); 59 test_computed_value('100lvmin', '100px'); 60 test_computed_value('100dvh', '100px'); 61 test_computed_value('100dvb', '100px'); 62 test_computed_value('100dvmin', '100px'); 63 64 test_computed_value('1dvw', '2px'); 65 test_computed_value('10dvw', '20px'); 66 test_computed_value('1dvh', '1px'); 67 test_computed_value('10dvh', '10px'); 68 69 test_computed_value('calc(1dvw + 1dvw)', '4px'); 70 test_computed_value('calc(1dvw + 1dvh)', '3px'); 71 test_computed_value('calc(1dvw + 100px)', '102px'); 72 test_computed_value('max(1svw, 1svh)', '2px'); 73 test_computed_value('min(1lvw, 1lvh)', '1px'); 74 test_computed_value('calc(1dvw + 10%)', '12px'); 75 76 </script>