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