negative-offset.tentative.html (2809B)
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 not allow setting negative outline-offset. 8 --> 9 <style> 10 #id1 { 11 outline-offset: -50px; 12 } 13 #id2 { 14 outline-offset: 50px; 15 } 16 17 /* These various expressions all result in a negative value when calculated */ 18 #id3 { 19 outline-offset: min(-50px, 50px); 20 } 21 #id4 { 22 outline-offset: min(10%, -50px); 23 } 24 #id5 { 25 outline-offset: clamp(-100px, 1vw, -50px); 26 } 27 #id6 { 28 outline-offset: 1% - 10000px; 29 } 30 #id7 { 31 outline-offset: max(min(-1em, 10em), -5%); 32 } 33 </style> 34 35 <geolocation id="id1"></geolocation> 36 <geolocation id="id2"></geolocation> 37 <geolocation id="id3"></geolocation> 38 <geolocation id="id4"></geolocation> 39 <geolocation id="id5"></geolocation> 40 <geolocation id="id6"></geolocation> 41 <geolocation id="id7"></geolocation> 42 43 <script> 44 test(function(){ 45 var el_with_negatives = document.getElementById("id1"); 46 assert_equals(getComputedStyle(el_with_negatives).outlineOffset, "0px", "outline-offset"); 47 }, "Negative offset should be changed to 0px"); 48 49 test(function(){ 50 var el_with_positives = document.getElementById("id2"); 51 assert_equals(getComputedStyle(el_with_positives).outlineOffset, "50px", "outline-offset"); 52 }, "Positive offset are unaffected"); 53 54 test(function(){ 55 var el_with_negative_expr = document.getElementById("id3"); 56 assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset"); 57 }, "Expressions offset min(-50px, 50px) should return at least 0px"); 58 59 test(function(){ 60 var el_with_negative_expr = document.getElementById("id4"); 61 assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset"); 62 }, "Expressions offset outline-offset: min(10%, -50px) should return at least 0px"); 63 64 test(function(){ 65 var el_with_negative_expr = document.getElementById("id5"); 66 assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset"); 67 }, "Expressions offset clamp(-100px, 1vw, -50px) should return at least 0px"); 68 69 test(function(){ 70 var el_with_negative_expr = document.getElementById("id6"); 71 assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset"); 72 }, "Expressions offset 1% - 10000px should return at least 0px"); 73 74 test(function(){ 75 var el_with_negative_expr = document.getElementById("id7"); 76 assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset"); 77 }, "Expressions offset max(min(-1em, 10em), -5%) should return at least 0px"); 78 </script> 79 </body>