bounded-sizes.tentative.html (3524B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <body> 7 <!--The permission element should have some limits for the min/max-width/height: 8 * min-width should be sufficient to fit the element text (depends on user agent implementation) 9 * max-width should be at most 3x min-width 10 * min-height should be sufficient to fit the element text (1em) 11 * max-height should be at most 3x min-height 12 --> 13 <style> 14 #el_outside_bounds { 15 font-size: 10px; 16 width: auto; 17 height: auto; 18 border: 0px; 19 20 min-height: 1px; 21 max-height: 100px; 22 23 padding-top: 12px; 24 padding-left: 60px; 25 padding-bottom: 1000px; 26 padding-right: 1000px; 27 28 /* These values are extreme enough that they should be out of bounds for any implementation */ 29 min-width: 10px; 30 max-width: 1000px; 31 } 32 #el_inside_bounds { 33 font-size: 10px; 34 width: auto; 35 height: auto; 36 border: 0px; 37 38 min-height: 11px; 39 max-height: 29px; 40 41 padding-top: 5px; 42 padding-left: 45px; 43 padding-bottom: 6px; 44 padding-right: 46px; 45 } 46 #el_large_min_size { 47 font-size: 10px; 48 width: auto; 49 height: auto; 50 border: 0px; 51 52 min-height: 50px; 53 min-width: 1000px; 54 } 55 </style> 56 57 58 <geolocation id="el_outside_bounds"></geolocation> 59 <geolocation id="el_inside_bounds"></geolocation> 60 <geolocation id="el_large_min_size"></geolocation> 61 62 <script> 63 test(function(){ 64 let min_height = getComputedStyle(el_outside_bounds).minHeight; 65 let max_height = getComputedStyle(el_outside_bounds).maxHeight; 66 assert_true(min_height === "calc(10px)" || min_height === "10px", "min-height"); 67 assert_true(max_height === "calc(30px)" || max_height === "30px", "max-height"); 68 assert_not_equals(getComputedStyle(el_outside_bounds).minWidth, "10px", "min-width"); 69 assert_not_equals(getComputedStyle(el_outside_bounds).maxWidth, "1000px", "max-width"); 70 assert_equals(getComputedStyle(el_outside_bounds).paddingLeft, "50px", "padding-left"); 71 assert_equals(getComputedStyle(el_outside_bounds).paddingRight, "50px", "padding-right"); 72 assert_equals(getComputedStyle(el_outside_bounds).paddingTop, "10px", "padding-top"); 73 assert_equals(getComputedStyle(el_outside_bounds).paddingBottom, "10px", "padding-bottom"); 74 }, "Properties with out-of-bounds values should be corrected"); 75 76 test(function(){ 77 assert_equals(getComputedStyle(el_inside_bounds).minHeight, "calc(11px)", "min-height"); 78 assert_equals(getComputedStyle(el_inside_bounds).maxHeight, "calc(29px)", "max-height"); 79 assert_equals(getComputedStyle(el_inside_bounds).paddingLeft, "45px", "padding-left"); 80 assert_equals(getComputedStyle(el_inside_bounds).paddingRight, "45px", "padding-right"); 81 assert_equals(getComputedStyle(el_inside_bounds).paddingTop, "5px", "padding-top"); 82 assert_equals(getComputedStyle(el_inside_bounds).paddingBottom, "5px", "padding-bottom"); 83 }, "Properties with values in bounds should not be modified"); 84 85 test(function() { 86 let min_height = getComputedStyle(el_large_min_size).minHeight; 87 assert_true(min_height === "calc(30px)" || min_height === "30px", "min-height"); 88 assert_not_equals(getComputedStyle(el_outside_bounds).minWidth, "1000px", "min-width"); 89 }, "'Min' properties should not be allowed to go over the maximum allowed values for 'max' properties"); 90 91 </script> 92 </body>