viewport-units-media-queries.html (2257B)
1 <!DOCTYPE html> 2 <title>Viewport units in @media</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_media_query(feature, result, description) { 22 test((t) => { 23 t.add_cleanup(() => { doc.body.innerHTML = ''; }) 24 doc.body.innerHTML = ` 25 <style> 26 body { 27 color: red; 28 } 29 @media (${feature}) { 30 body { 31 color: green; 32 } 33 } 34 </style> 35 `; 36 assert_equals(win.getComputedStyle(doc.body).color, result); 37 }, description); 38 } 39 40 function test_media_query_applies(feature) { 41 test_media_query(feature, 'rgb(0, 128, 0)', `@media(${feature}) applies`); 42 } 43 44 function test_media_query_does_not_apply(feature) { 45 test_media_query(feature, 'rgb(255, 0, 0)', `@media(${feature}) does not apply`); 46 } 47 48 test_media_query_applies('width:100vw'); 49 test_media_query_applies('width:100vi'); 50 test_media_query_applies('width:100vmax'); 51 test_media_query_applies('width:100svw'); 52 test_media_query_applies('width:100svi'); 53 test_media_query_applies('width:100svmax'); 54 test_media_query_applies('width:100lvw'); 55 test_media_query_applies('width:100lvi'); 56 test_media_query_applies('width:100lvmax'); 57 test_media_query_applies('width:100dvw'); 58 test_media_query_applies('width:100dvi'); 59 test_media_query_applies('width:100dvmax'); 60 61 test_media_query_applies('height:100vh'); 62 test_media_query_applies('height:100vb'); 63 test_media_query_applies('height:100vmin'); 64 test_media_query_applies('height:100svh'); 65 test_media_query_applies('height:100svb'); 66 test_media_query_applies('height:100svmin'); 67 test_media_query_applies('height:100lvh'); 68 test_media_query_applies('height:100lvb'); 69 test_media_query_applies('height:100lvmin'); 70 test_media_query_applies('height:100dvh'); 71 test_media_query_applies('height:100dvb'); 72 test_media_query_applies('height:100dvmin'); 73 74 test_media_query_does_not_apply('width:90vw'); 75 test_media_query_does_not_apply('height:90vh'); 76 77 </script>