getComputedStyle-border-radius-001.html (2813B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values Test: mixed units in calc() and computed border-radius longhand and shorthand values (complex)</title> 6 7 <!-- 8 9 Original test is: 10 11 https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/getComputedStyle-border-radius.html 12 13 14 Bug 137688: getPropertyValue on computed style does not do shorthand properties 15 https://bugzilla.mozilla.org/show_bug.cgi?id=137688 16 17 --> 18 19 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 20 <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize"> 21 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius"> 22 23 <script src="/resources/testharness.js"></script> 24 25 <script src="/resources/testharnessreport.js"></script> 26 27 <style> 28 div#target 29 { 30 border: solid 2px; 31 border-top-left-radius: calc(10px + 25%) calc(20px + 25%); 32 border-top-right-radius: calc(1em + 25%); 33 border-bottom-right-radius: calc(25%); 34 border-bottom-left-radius: calc(25px); 35 font-size: 16px; /* was 10px in original test */ 36 height: 100px; 37 width: 100px; 38 } 39 </style> 40 41 <div id="target"></div> 42 43 <script> 44 function startTesting() 45 { 46 47 var targetElement = document.getElementById("target"); 48 49 function verifyComputedStyle(property_name, expected_value) 50 { 51 52 test(function() 53 { 54 55 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 56 57 }, `testing ${property_name}: ${expected_value}`); 58 } 59 60 /* verifyComputedStyle(property_name, expected_value) */ 61 62 verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)"); 63 64 verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)"); 65 66 verifyComputedStyle("border-bottom-right-radius", "25%"); 67 68 verifyComputedStyle("border-bottom-left-radius", "25px"); 69 70 verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px"); 71 72 /* 73 74 The first value is the horizontal radius, the second the vertical radius. 75 76 horizontal radius / vertical radius 77 |__________________________________________| |__________________________________________| 78 79 80 The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left: 81 82 83 top-left top-right bottom-right bottom-left / top-left top-right bottom-right bottom-left 84 85 |__________________________________________| |__________________________________________| 86 87 horizontal radius / vertical radius 88 89 */ 90 91 } 92 93 startTesting(); 94 95 </script>