unbounded-width-with-border-reftest-ref.html (2068B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset=utf-8> 4 <body> 5 <div> 6 The permission element width is allowed to be unbounded if there is a border which makes the 7 bounds of the permission element sufficiently clear. 8 The border should have enough width, enough contrast with the background-color and no transparency. 9 </div> 10 11 <style> 12 #unlimited-width { 13 font-size: 10px; 14 15 background-color: white; 16 border: solid 1px black; 17 width: 500px; 18 } 19 #no-border-width { 20 font-size: 10px; 21 background-color: white; 22 border: 0px; 23 24 /* Used to compute width which will then be set in JS */ 25 width: fit-content; 26 } 27 #no-contrast { 28 font-size: 10px; 29 background-color: white; 30 border: solid 1px yellow; 31 32 /* Used to compute width which will then be set in JS */ 33 width: fit-content; 34 } 35 #transparent { 36 font-size: 10px; 37 background-color: white; 38 border: solid 1px #000000ee; 39 40 /* Used to compute width which will then be set in JS */ 41 width: fit-content; 42 } 43 #top-no-contrast { 44 font-size: 10px; 45 background-color: white; 46 border: solid 1px black; 47 border-top-color: white; 48 49 /* Used to compute width which will then be set in JS */ 50 width: fit-content; 51 } 52 </style> 53 54 <div><permission id="unlimited-width" type="geolocation"></permission></div> 55 <div><permission id="no-border-width" type="camera"></permission></div> 56 <div><permission id="no-contrast" type="microphone"></permission></div> 57 <div><permission id="transparent" type="microphone camera"></permission></div> 58 <div><permission id="top-no-contrast" type="geolocation"></permission></div> 59 60 <script> 61 function setWidthToMax(el) { 62 let w = getComputedStyle(el).width; 63 el.style.width = `calc(${w} * 3)`; 64 } 65 66 setWidthToMax(document.getElementById("no-border-width")); 67 setWidthToMax(document.getElementById("no-contrast")); 68 setWidthToMax(document.getElementById("transparent")); 69 setWidthToMax(document.getElementById("top-no-contrast")); 70 </script> 71 </body> 72 </html>