Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/tree-counting/trig-functions-in-gradient-position.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>
CSS Values: trigonometric function with a runtime-dependent angle argument in
a gradient position
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
background: radial-gradient(at
calc(50% + 100px*cos(calc(1turn*calc((sibling-index() + 2)/sibling-count()))))
50%, #000, #fff);
}
</style>
<div><div></div><div></div><div></div><div id="target"></div></div>
<script>
test(() => {
assert_equals(
getComputedStyle(document.getElementById("target")).backgroundImage,
"radial-gradient(at calc(50% - 100px) 50%, rgb(0, 0, 0), rgb(255, 255, 255))");
}, "cos() with a runtime-dependent angle argument resolves in a gradient position");
</script>