getComputedStyle-border-radius-002.html (2366B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values Test: percentages in calc() and computed border-radius values</title> 6 7 <!-- 8 9 Bugzilla bug report 1516454: Computed value of border-radius with calc(percentage) is incorrect 10 https://bugzilla.mozilla.org/show_bug.cgi?id=1516454 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-3/#calc-computed-value"> 16 17 <style> 18 div#target 19 { 20 border: black solid 5px; 21 height: 100px; 22 width: 100px; 23 } 24 </style> 25 26 <script src="/resources/testharness.js"></script> 27 28 <script src="/resources/testharnessreport.js"></script> 29 30 <div id="log"></div> 31 32 <div id="target"></div> 33 34 <script> 35 function startTesting() 36 { 37 38 var targetElement = document.getElementById("target"); 39 40 function compareValue(property_name, calcValue, expectedValue, description) 41 { 42 43 test(function() 44 { 45 46 targetElement.style.setProperty(property_name, "initial"); 47 48 targetElement.style.setProperty(property_name, calcValue); 49 50 var computedCalcValue = getComputedStyle(targetElement)[property_name]; 51 52 targetElement.style.setProperty(property_name, expectedValue); 53 54 var computedExpectedValue = getComputedStyle(targetElement)[property_name]; 55 56 assert_equals(computedCalcValue, computedExpectedValue); 57 58 }, description); 59 } 60 61 compareValue("border-top-left-radius", "calc(50%)", "50%", "simple percentage conversion test 1"); 62 63 compareValue("border-top-right-radius", "calc(50%)", "50%", "simple percentage conversion test 2"); 64 65 compareValue("border-bottom-left-radius", "calc(50%)", "50%", "simple percentage conversion test 3"); 66 67 compareValue("border-bottom-right-radius", "calc(50%)", "50%", "simple percentage conversion test 4"); 68 69 compareValue("border-top-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 5"); 70 71 compareValue("border-top-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 6"); 72 73 compareValue("border-bottom-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 7"); 74 75 compareValue("border-bottom-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 8"); 76 } 77 78 startTesting(); 79 80 </script>