Blitz - WPT: color-stop-contrast-color-currentcolor-invalidation.html

wpt / css / css-images / color-stop-contrast-color-currentcolor-invalidation.html

/css/css-images/color-stop-contrast-color-currentcolor-invalidation.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>CSS Images Test: Invalidate currentcolor in gradient with contrast-color() 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/#contrast-color">
<link rel="match" href="/css/reference/pass_if_square_96px_black.html">
<meta name="assert" content="contrast-color() returns black for white and white for black">
<script src="/common/reftest-wait.js"></script>
<style>
  .test {
    color: black;
    width: 96px;
    height: 48px;
  }
  #t1 {
    background-image: linear-gradient(contrast-color(currentColor) 0 0);
  }
  #t2 {
    background-image: conic-gradient(contrast-color(currentColor) 0 0);
  }
</style>
<p>Test passes if there is a square below.</p>
<div id="t1" class="test"></div>
<div id="t2" class="test"></div>
<script>
  requestAnimationFrame(() => requestAnimationFrame(() => {
    t1.style.color = "white";
    t2.style.color = "white";
    takeScreenshot();
  }));
</script>

/css/reference/pass_if_square_96px_black.html

<!DOCTYPE HTML>
<html>
<head>
   <title>Reference rendering - pass if square below, black 96px</title>
   <link rel="author" title="Opera Software" href="https://opera.com">
   <style type="text/css">
      div {
         width: 96px;
         height: 96px;
         background-color: black;
      }
   </style>
</head>
<body>
   <p>Test passes if there is a square below.</p>
   <div></div>
</body>
</html>