webkit-border-radius-valid.html (3607B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Compatibility: parsing -webkit-border-radius with valid values</title> 6 <link rel="help" href="https://compat.spec.whatwg.org/#propdef--webkit-border-radius"> 7 <link rel="help" href="https://github.com/whatwg/compat/issues/133"> 8 <meta name="assert" content="-webkit-border-radius supports CSS Wide keywords and the full grammar '<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/parsing-testcommon.js"></script> 12 </head> 13 <body> 14 <div id="target"></div> 15 <script> 16 test_valid_value("-webkit-border-radius", "initial"); 17 test_valid_value("-webkit-border-radius", "inherit"); 18 test_valid_value("-webkit-border-radius", "unset"); 19 test_valid_value("-webkit-border-radius", "revert"); 20 21 test_valid_value("-webkit-border-radius", "1px"); 22 test_valid_value("-webkit-border-radius", "1px 5%", ["1px 5%", "1px / 5%"]); 23 test_valid_value("-webkit-border-radius", "1px 2% 3px"); 24 test_valid_value("-webkit-border-radius", "1px 2% 3px 4%"); 25 test_valid_value("-webkit-border-radius", "1px / 2px", ["1px 2px", "1px / 2px"]); 26 test_valid_value("-webkit-border-radius", "5em / 1px 2% 3px 4%"); 27 test_valid_value("-webkit-border-radius", "1px 2% / 3px 4px"); 28 test_valid_value("-webkit-border-radius", "1px 2px 3em / 1px 2px 3%"); 29 test_valid_value("-webkit-border-radius", "1px 2% / 2px 3em 4px 5em"); 30 test_valid_value("-webkit-border-radius", "1px 2% 3px 4% / 5em"); 31 32 test_valid_value("-webkit-border-radius", "1px 1px 1px 2% / 1px 2% 1px 2%", "1px 1px 1px 2% / 1px 2%"); 33 test_valid_value("-webkit-border-radius", "1px 1px 1px 1px / 1px 1px 2% 1px", "1px / 1px 1px 2%"); 34 test_valid_value("-webkit-border-radius", "1px 1px 2% 2%"); 35 test_valid_value("-webkit-border-radius", "1px 2% 1px 1px"); 36 test_valid_value("-webkit-border-radius", "1px 2% 2% 2% / 1px 2% 3px 2%", "1px 2% 2% / 1px 2% 3px"); 37 38 test_valid_value("-webkit-border-top-left-radius", "10px"); 39 test_valid_value("-webkit-border-top-right-radius", "20%"); 40 test_valid_value("-webkit-border-bottom-right-radius", "30px 40%"); 41 test_valid_value("-webkit-border-bottom-left-radius", "50% 60px"); 42 43 // Some browsers treat '-webkit-border-radius: l1 l2' as 'border-radius: l1 / l2'. 44 // Regardless of whether this is done, ensure that there is round-tripping. 45 const target = document.getElementById("target"); 46 const style = target.style; 47 const cs = getComputedStyle(target); 48 test(function() { 49 style.cssText = "-webkit-border-radius: 1px 2px"; 50 const oldLonghands = [...style].map(p => p + ": " + style[p]); 51 const value = style.getPropertyValue("border-radius"); 52 assert_in_array(value, ["1px 2px", "1px / 2px"]); 53 assert_equals(cs.getPropertyValue("border-radius"), value); 54 style.cssText = "border-radius: " + value; 55 const newLonghands = [...style].map(p => p + ": " + style[p]); 56 assert_array_equals(newLonghands, oldLonghands); 57 }, "Serialize border-radius from -webkit-border-radius: 1px 2px"); 58 test(function() { 59 style.cssText = "border-radius: 1px 2px"; 60 const oldLonghands = [...style].map(p => p + ": " + style[p]); 61 const value = style.getPropertyValue("-webkit-border-radius"); 62 assert_in_array(value, ["1px 2px", "1px 2px 1px"]); 63 assert_equals(cs.getPropertyValue("-webkit-border-radius"), value); 64 style.cssText = "-webkit-border-radius: " + value; 65 const newLonghands = [...style].map(p => p + ": " + style[p]); 66 assert_array_equals(newLonghands, oldLonghands); 67 }, "Serialize -webkit-border-radius from border-radius: 1px 2px"); 68 </script> 69 </body> 70 </html>