bounded-css-properties.tentative.html (2822B)
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 geolocation element should have some limits for specific properties: 8 * font-weight is adjusted to be at least 200. 9 * font-style should only have "normal" or "italic" values. 10 * word-spacing should be at most 0.5 of the font size, and non-negative. 11 * letter-spacing should be between -0.05 and 0.2 of the font size. 12 --> 13 <style> 14 #id-over-bounds { 15 font-weight: 100; 16 font-style: oblique 30deg; 17 word-spacing: 1em; 18 font-size: 100px; 19 letter-spacing: 21px; 20 box-shadow: 5px 5px inset; 21 } 22 #id-under-bounds { 23 word-spacing: -1px; 24 font-size: 100px; 25 letter-spacing: -6px; 26 box-shadow: rgb(255, 0, 0) 5px 4px 3px 2px, 5px 5px inset; 27 } 28 #id-within-bounds { 29 font-weight: 300; 30 font-style: italic; 31 word-spacing: 0.4em; 32 font-size: 100px; 33 letter-spacing: 15px; 34 box-shadow: rgb(255, 0, 0) 5px 4px 3px 2px; 35 } 36 </style> 37 38 39 <geolocation id="id-over-bounds"></geolocation> 40 <geolocation id="id-under-bounds"></geolocation> 41 <geolocation id="id-within-bounds"></geolocation> 42 43 <script> 44 test(function(){ 45 var el = document.getElementById("id-over-bounds"); 46 assert_equals(getComputedStyle(el).fontWeight, "200", "font-weight"); 47 assert_equals(getComputedStyle(el).fontStyle, "normal", "font-style"); 48 assert_equals(getComputedStyle(el).wordSpacing, "50px", "word-spacing"); 49 assert_equals(getComputedStyle(el).letterSpacing, "20px", "letter-spacing"); 50 assert_equals(getComputedStyle(el).boxShadow, "none", "box-shadow"); 51 52 el = document.getElementById("id-under-bounds"); 53 assert_equals(getComputedStyle(el).wordSpacing, "0px", "word-spacing, negative"); 54 assert_equals(getComputedStyle(el).letterSpacing, "-5px", "letter-spacing, negative"); 55 assert_equals(getComputedStyle(el).boxShadow, "none", "box-shadow, multiple"); 56 }, "Properties with out-of-bounds values should be corrected"); 57 58 test(function(){ 59 var el = document.getElementById("id-within-bounds"); 60 assert_equals(getComputedStyle(el).fontWeight, "300", "font-weight"); 61 assert_equals(getComputedStyle(el).fontStyle, "italic", "font-style"); 62 assert_equals(getComputedStyle(el).wordSpacing, "40px", "word-spacing"); 63 assert_equals(getComputedStyle(el).letterSpacing, "15px", "letter-spacing"); 64 assert_equals(getComputedStyle(el).boxShadow, "rgb(255, 0, 0) 5px 4px 3px 2px", "box-shadow"); 65 66 el.style.letterSpacing = "-4px"; 67 assert_equals(getComputedStyle(el).letterSpacing, "-4px", "letter-spacing, negative"); 68 }, "Properties with values in bounds should not be modified"); 69 </script> 70 </body>