blob: cbd524615f52086c81b7d00e56a7ed11980aa292 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Backgrounds and Borders: Repaint gradient on currentColor change</title>
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
<link rel="match" href="background-image-gradient-currentcolor-conic-repaint-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-images-3/#color-stop-syntax">
<style>
#outer {
color: red;
}
#inner {
width: 100px;
height: 100px;
background: conic-gradient(white, currentColor);
}
</style>
<p>There should be a square with a white-to-green gradient and some text below.</p>
<div id="outer">
<div id="inner">This text should be green</div>
</div>
<script>
requestAnimationFrame(function(){
requestAnimationFrame(function(){
outer.style.color = "green";
document.documentElement.classList.remove("reftest-wait");
});
});
</script>
|
