Blitz - WPT: color-stop-light-dark-currentcolor-invalidation.html

wpt / css / css-images / color-stop-light-dark-currentcolor-invalidation.html

/css/css-images/color-stop-light-dark-currentcolor-invalidation.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>CSS Images Test: Invalidate currentcolor in gradient with light-dark() color stop</title>
<link rel="help" href="https://drafts.csswg.org/css-images/#gradients">
<link rel="help" href="https://drafts.csswg.org/css-color-5/#light-dark">
<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
<script src="/common/reftest-wait.js"></script>
<style>
  .test {
    color-scheme: dark;
    color: red;
    width: 100px;
    height: 50px;
  }
  #t1 {
    background-image: linear-gradient(light-dark(pink, currentColor) 0 0);
  }
  #t2 {
    background-image: conic-gradient(light-dark(pink, currentColor) 0 0);
  }
</style>
<p>Test passes if there is a filled green square.</p>
<div id="t1" class="test"></div>
<div id="t2" class="test"></div>
<script>
  requestAnimationFrame(() => requestAnimationFrame(() => {
    t1.style.color = "green";
    t2.style.color = "green";
    takeScreenshot();
  }));
</script>

/css/reference/ref-filled-green-100px-square-only.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<p>Test passes if there is a filled green square.</p>
<div style="width:100px; height:100px; background:green;"></div>