bounded-sizes-reftest.tentative.html (2275B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <link rel="match" href="bounded-sizes-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 should have some limits for the min/max-width/height: 8 <ul> 9 <li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li> 10 <li>max-width should be at most 3x min-width</li> 11 <li>min-height should be sufficient to fit the element text (1em)</li> 12 <li>max-height should be at most 3x min-height</li> 13 <li>padding-left/top only work with width/height: auto and are at most 5em/1em</li> 14 <li>padding-right/bottom are copied over from padding-left/top in this case</li> 15 </ul> 16 </div> 17 18 <style> 19 #id1 { 20 font-size: 10px; 21 min-height: 1px; 22 max-height: 100px; 23 border: 0px; 24 25 /* These values are extreme enough that they should be out of bounds for any implementation */ 26 min-width: 10px; 27 max-width: 1000px; 28 29 /* This element will be as tiny as possible */ 30 width: 1px; 31 height: 1px; 32 } 33 #id2 { 34 font-size: 10px; 35 min-height: 1px; 36 max-height: 100px; 37 border: 0px; 38 39 /* These values are extreme enough that they should be out of bounds for any implementation */ 40 min-width: 10px; 41 max-width: 1000px; 42 43 /* This element will be as large as possible */ 44 width: 1000px; 45 height: 1000px; 46 } 47 #id3 { 48 font-size: 10px; 49 width: auto; 50 height: auto; 51 border: 0px; 52 53 /* There is a slight misalignment of the text (by 1px) when using 54 padding vs using width/height. Since this test's purpose is to 55 check that the bounds are identical, the color and background-color 56 are set to the same value to cover the slight text misalignment */ 57 color:black; 58 background-color: black; 59 border: 1em solid darkmagenta; 60 61 /* Only padding-top and padding-left are taken into account */ 62 padding-top: 5px; 63 padding-left: 1000px; 64 padding-bottom: 1px; 65 padding-right: 1px; 66 } 67 </style> 68 69 <div><permission id="id1" type="geolocation"></permission></div> 70 <div><permission id="id2" type="camera"></permission></div> 71 <div><permission id="id3" type="microphone"></permission></div> 72 </body>