unbounded-width-with-border-reftest.tentative.html (1897B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <link rel="match" href="unbounded-width-with-border-reftest-ref.html"> 4 <link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> 5 <body> 6 <div> 7 The permission element width is allowed to be unbounded if there is a border which makes the 8 bounds of the permission element sufficiently clear. 9 The border should have enough width, enough contrast with the background-color and no transparency. 10 </div> 11 12 <style> 13 /* This element passes all checks and therefore its width is not limited */ 14 #unlimited-width { 15 font-size: 10px; 16 background-color: white; 17 border: solid 1px black; 18 width: 500px; 19 } 20 /* This element's border width is too small */ 21 #no-border-width { 22 font-size: 10px; 23 background-color: white; 24 border: 0px; 25 width: 500px; 26 } 27 /* This element's border color is not sufficiently different from the background-color */ 28 #no-contrast { 29 font-size: 10px; 30 background-color: white; 31 border: solid 1px yellow; 32 width: 500px; 33 } 34 /* This element's border color has some transparency (alpha < 1) */ 35 #transparent { 36 font-size: 10px; 37 background-color: white; 38 border: solid 1px #000000ee; 39 width: 500px; 40 } 41 /* This element's border is good except the top part which has insuficient contrast */ 42 #top-no-contrast { 43 font-size: 10px; 44 background-color: white; 45 border: solid 1px black; 46 border-top-color: white; 47 width: 500px; 48 } 49 </style> 50 51 <div><permission id="unlimited-width" type="geolocation"></permission></div> 52 <div><permission id="no-border-width" type="camera"></permission></div> 53 <div><permission id="no-contrast" type="microphone"></permission></div> 54 <div><permission id="transparent" type="microphone camera"></permission></div> 55 <div><permission id="top-no-contrast" type="geolocation"></permission></div> 56 57 </body>