calc-linear-radial-conic-gradient-001.html (3882B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value"> 9 10 <meta name="flags" content=""> 11 <meta content="This test verifies how calc() functions inside 6 linear-gradient(), 1 radial-gradient() and 1 conic-gradient() are computed for 'background-image'." name="assert"> 12 13 <!-- 14 15 Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle 16 https://bugs.chromium.org/p/chromium/issues/detail?id=947377 17 18 WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect 19 https://bugs.webkit.org/show_bug.cgi?id=196389 20 21 --> 22 23 <style> 24 div#target 25 { 26 background-image: linear-gradient(yellow, red); 27 height: 100px; 28 } 29 </style> 30 31 <script src="/resources/testharness.js"></script> 32 33 <script src="/resources/testharnessreport.js"></script> 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, specified_value, expected_value) 44 { 45 46 test(function() 47 { 48 49 targetElement.style.setProperty(property_name, "initial"); 50 51 /* 52 The purpose of setting to the initial is to act as a fallback 53 value in case the calc() function in the specified value 54 fails or in case it generates an invalid value. Since we 55 are running 6 consecutive tests on the same element, 56 then it is necessary to 'reset' its property to the 57 initial value. 58 */ 59 60 targetElement.style.setProperty(property_name, specified_value); 61 62 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 63 64 }, `testing ${property_name}: ${specified_value}`); 65 } 66 67 /* verifyComputedStyle(property_name, specified_value, expected_value) */ 68 69 /* LINEAR */ 70 71 verifyComputedStyle( 72 "background-image", 73 "linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))", 74 "linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))"); 75 76 verifyComputedStyle( 77 "background-image", 78 "linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))", 79 "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); 80 81 verifyComputedStyle( 82 "background-image", 83 "linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))", 84 "linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))"); 85 86 verifyComputedStyle( 87 "background-image", 88 "linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))", 89 "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); 90 91 verifyComputedStyle( 92 "background-image", 93 "linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))", 94 "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); 95 96 verifyComputedStyle( 97 "background-image", 98 "linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))", 99 "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); 100 101 102 /* RADIAL */ 103 104 verifyComputedStyle( 105 "background-image", 106 "radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))", 107 "radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)"); 108 109 110 /* CONIC */ 111 112 verifyComputedStyle( 113 "background-image", 114 "conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))", 115 "conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)"); 116 117 /* verifyComputedStyle(property_name, specified_value, expected_value) */ 118 119 } 120 121 startTesting(); 122 123 </script>