Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-backgrounds/background-image-gradient-currentcolor-self-repaint.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Backgrounds and Borders: Repaint gradient when the element's own color changes</title>
<link rel="author" title="Andrew Martinez" href="mailto:amartinez55@apple.com">
<link rel="match" href="background-image-gradient-currentcolor-self-repaint-ref.html">
<meta name="assert" content="Changing color on an element repaints its background gradients whose color stops use currentColor, including inside color-mix(), even when its outline color does not use currentColor.">
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
color: red;
outline-color: black;
}
#linear {
background: linear-gradient(white, currentColor);
}
#color-mix {
background: linear-gradient(white, color-mix(in srgb, currentColor, blue));
}
</style>
<p>There should be two squares below, and neither should contain red.</p>
<div class="box" id="linear"></div>
<div class="box" id="color-mix"></div>
<script src="/common/rendering-utils.js"></script>
<script src="/common/reftest-wait.js"></script>
<script>
waitForAtLeastOneFrame().then(() => {
document.styleSheets[0].cssRules[0].style.color = "green";
takeScreenshot();
});
</script>