viewport-segments-env-variables.https.html (5415B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <style> 7 /* The following styles set the margin top/left/bottom/right to the 8 values where the display feature between segments is, and the width and 9 height of the div to the width and height of the display feature */ 10 @media (horizontal-viewport-segments: 2) { 11 div { 12 margin: env(viewport-segment-top 0 0, 10px) 13 env(viewport-segment-left 1 0, 10px) 14 env(viewport-segment-bottom 0 0, 10px) 15 env(viewport-segment-right 0 0, 10px); 16 width: calc(env(viewport-segment-left 1 0, 10px) - 17 env(viewport-segment-right 0 0, 0px)); 18 height: env(viewport-segment-height 0 0, 10px); 19 } 20 } 21 22 @media (vertical-viewport-segments: 2) { 23 div { 24 margin: env(viewport-segment-bottom 0 0, 11px) 25 env(viewport-segment-right 0 1, 11px) 26 env(viewport-segment-top 0 1, 11px) 27 env(viewport-segment-left 0 0, 11px); 28 width: env(viewport-segment-width 0 0, 11px); 29 height: calc(env(viewport-segment-top 0 1, 11px) - 30 env(viewport-segment-bottom 0 0, 0px)); 31 } 32 } 33 34 @media (horizontal-viewport-segments: 1) and 35 (vertical-viewport-segments: 1) { 36 div { opacity: 0.1; margin: 1px; width: 1px; height: 1px; } 37 } 38 39 @media (horizontal-viewport-segments: 2) and 40 (vertical-viewport-segments: 1) { 41 div { opacity: 0.2; } 42 } 43 44 @media (horizontal-viewport-segments: 1) and 45 (vertical-viewport-segments: 2) { 46 div { opacity: 0.3; } 47 } 48 </style> 49 </head> 50 <body> 51 <div id='target'></div> 52 </body> 53 <script> 54 'use strict'; 55 56 promise_test(async (t) => { 57 t.add_cleanup(async () => { 58 await test_driver.clear_display_features(); 59 }); 60 61 const displayFeatureLength = 10; 62 const target = document.querySelector('#target'); 63 const targetComputedStyle = window.getComputedStyle(target); 64 assert_equals(targetComputedStyle.marginTop, '1px'); 65 assert_equals(targetComputedStyle.marginRight,'1px'); 66 assert_equals(targetComputedStyle.marginBottom,'1px'); 67 assert_equals(targetComputedStyle.marginLeft, '1px'); 68 assert_equals(targetComputedStyle.width, '1px'); 69 assert_equals(targetComputedStyle.height, '1px'); 70 assert_equals(targetComputedStyle.opacity, '0.1'); 71 72 const horizontalViewportSegmentsMQL = window.matchMedia('(horizontal-viewport-segments: 2)'); 73 let promise = new Promise(resolve => { 74 horizontalViewportSegmentsMQL.addEventListener( 75 'change', 76 () => { resolve(horizontalViewportSegmentsMQL.matches); }, 77 { once: true } 78 ); 79 }); 80 const leftOffset = 81 Math.round(window.innerWidth / 2 - displayFeatureLength / 2); 82 await test_driver.set_display_features([{ 83 orientation: 'vertical', 84 maskLength: displayFeatureLength, 85 offset: leftOffset 86 }]); 87 assert_true(await promise); 88 assert_equals(targetComputedStyle.marginTop, '0px'); 89 assert_equals(targetComputedStyle.marginRight, 90 Math.round(window.innerWidth / 2 + displayFeatureLength / 2) + 'px'); 91 assert_equals(targetComputedStyle.marginBottom, window.innerHeight + 'px'); 92 assert_equals(targetComputedStyle.marginLeft, leftOffset + 'px'); 93 assert_equals(targetComputedStyle.width, displayFeatureLength + 'px'); 94 assert_equals(targetComputedStyle.height, window.innerHeight + 'px'); 95 assert_equals(targetComputedStyle.opacity, '0.2'); 96 97 98 const verticalViewportSegmentsMQL = window.matchMedia('(vertical-viewport-segments: 2)'); 99 promise = new Promise(resolve => { 100 verticalViewportSegmentsMQL.addEventListener( 101 'change', 102 () => { resolve(verticalViewportSegmentsMQL.matches); }, 103 { once: true } 104 ); 105 }); 106 const topOffset = 107 Math.round(window.innerHeight / 2 - displayFeatureLength / 2); 108 await test_driver.set_display_features([{ 109 orientation: 'horizontal', 110 maskLength: displayFeatureLength, 111 offset: topOffset 112 }]); 113 assert_true(await promise); 114 assert_equals(targetComputedStyle.marginTop, topOffset + 'px'); 115 assert_equals(targetComputedStyle.marginRight, window.innerWidth + 'px'); 116 assert_equals(targetComputedStyle.marginBottom, 117 Math.round(window.innerHeight / 2 + displayFeatureLength / 2) + 'px'); 118 assert_equals(targetComputedStyle.marginLeft, '0px'); 119 assert_equals(targetComputedStyle.width, window.innerWidth + 'px'); 120 assert_equals(targetComputedStyle.height, displayFeatureLength + 'px'); 121 assert_equals(targetComputedStyle.opacity, '0.3'); 122 123 const oneSegmentMQL = window.matchMedia('(vertical-viewport-segments: 1)'); 124 promise = new Promise(resolve => { 125 oneSegmentMQL.addEventListener( 126 'change', 127 () => { resolve(oneSegmentMQL.matches); }, 128 { once: true } 129 ); 130 }); 131 await test_driver.clear_display_features(); 132 assert_true(await promise); 133 assert_equals(targetComputedStyle.marginTop, '1px'); 134 assert_equals(targetComputedStyle.marginRight,'1px'); 135 assert_equals(targetComputedStyle.marginBottom,'1px'); 136 assert_equals(targetComputedStyle.marginLeft, '1px'); 137 assert_equals(targetComputedStyle.width, '1px'); 138 assert_equals(targetComputedStyle.height, '1px'); 139 assert_equals(targetComputedStyle.opacity, '0.1'); 140 141 }, 'Tests the Viewport Segments Media Query change event handler.'); 142 </script> 143 </html>