| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value"> | |
| <meta name="flags" content=""> | |
| <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"> | |
| <!-- | |
| Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle | |
| https://bugs.chromium.org/p/chromium/issues/detail?id=947377 | |
| WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect | |
| https://bugs.webkit.org/show_bug.cgi?id=196389 | |
| --> | |
| <style> | |
| div#target | |
| { | |
| background-image: linear-gradient(yellow, red); | |
| height: 100px; | |
| } | |
| </style> | |
| <script src="/resources/testharness.js"></script> | |
| <script src="/resources/testharnessreport.js"></script> | |
| <div id="target"></div> | |
| <script> | |
| function startTesting() | |
| { | |
| var targetElement = document.getElementById("target"); | |
| function verifyComputedStyle(property_name, specified_value, expected_value) | |
| { | |
| test(function() | |
| { | |
| targetElement.style.setProperty(property_name, "initial"); | |
| /* | |
| The purpose of setting to the initial is to act as a fallback | |
| value in case the calc() function in the specified value | |
| fails or in case it generates an invalid value. Since we | |
| are running 6 consecutive tests on the same element, | |
| then it is necessary to 'reset' its property to the | |
| initial value. | |
| */ | |
| targetElement.style.setProperty(property_name, specified_value); | |
| assert_equals(getComputedStyle(targetElement)[property_name], expected_value); | |
| }, `testing ${property_name}: ${specified_value}`); | |
| } | |
| /* verifyComputedStyle(property_name, specified_value, expected_value) */ | |
| /* LINEAR */ | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))", | |
| "linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))"); | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))", | |
| "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))", | |
| "linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))"); | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))", | |
| "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))", | |
| "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); | |
| verifyComputedStyle( | |
| "background-image", | |
| "linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))", | |
| "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))"); | |
| /* RADIAL */ | |
| verifyComputedStyle( | |
| "background-image", | |
| "radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))", | |
| "radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)"); | |
| /* CONIC */ | |
| verifyComputedStyle( | |
| "background-image", | |
| "conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))", | |
| "conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)"); | |
| /* verifyComputedStyle(property_name, specified_value, expected_value) */ | |
| } | |
| startTesting(); | |
| </script> |