color-stop-properties.html | Explore in Territory

<!DOCTYPE html>
<svg width='800' height='600' style="width: 100vw; height: 100vh;" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <linearGradient id='gradient1'>
      <stop offset='0' stop-color='green'/>
      <stop offset='0.5' stop-color='red' id='target1'/>
      <stop offset='1' stop-color='green'/>
    </linearGradient>
    <linearGradient id='gradient2'>
      <stop offset='0' stop-color='green'/>
      <stop offset='0.5' stop-color='green' stop-opacity='0.1' id='target2'/>
      <stop offset='1' stop-color='green'/>
    </linearGradient>
    <linearGradient id='gradient3'>
      <stop offset='0' stop-color='green'/>
      <stop offset='0.5' stop-color='green' id='target3'/>
      <stop offset='1' stop-color='red'/>
    </linearGradient>

    <linearGradient id='gradient4' xlink:href="#gradient1" />
    <linearGradient id='gradient5' xlink:href="#gradient2" />
    <linearGradient id='gradient6' xlink:href="#gradient3" />

    <pattern id='pattern1' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient1)'/>
    </pattern>
    <pattern id='pattern2' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient2)'/>
    </pattern>
    <pattern id='pattern3' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient3)'/>
    </pattern>
    <pattern id='pattern4' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient4)'/>
    </pattern>
    <pattern id='pattern5' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient5)'/>
    </pattern>
    <pattern id='pattern6' width='1' height='1' patternContentUnits='objectBoundingBox'>
      <rect width='1' height='1' fill='url(#gradient6)'/>
    </pattern>
  </defs>

  <rect id='r1'  x='0'   y='0' width='100' height='100' fill='url(#gradient1)'/>
  <rect id='r2'  x='120' y='0' width='100' height='100' fill='url(#gradient2)'/>
  <rect id='r3'  x='240' y='0' width='100' height='100' fill='url(#gradient3)'/>
  <rect id='r4'  x='360' y='0' width='100' height='100' fill='url(#gradient4)'/>
  <rect id='r5'  x='480' y='0' width='100' height='100' fill='url(#gradient5)'/>
  <rect id='r6'  x='600' y='0' width='100' height='100' fill='url(#gradient6)'/>

  <rect id='r7'  x='0'   y='120' width='100' height='100' fill='url(#pattern1)'/>
  <rect id='r8'  x='120' y='120' width='100' height='100' fill='url(#pattern2)'/>
  <rect id='r9'  x='240' y='120' width='100' height='100' fill='url(#pattern3)'/>
  <rect id='r10' x='360' y='120' width='100' height='100' fill='url(#pattern4)'/>
  <rect id='r11' x='480' y='120' width='100' height='100' fill='url(#pattern5)'/>
  <rect id='r12' x='600' y='120' width='100' height='100' fill='url(#pattern6)'/>

  <use href='#r1' x='0' y='240'/>
  <use href='#r2' x='0' y='240'/>
  <use href='#r3' x='0' y='240'/>
  <use href='#r4' x='0' y='240'/>
  <use href='#r5' x='0' y='240'/>
  <use href='#r6' x='0' y='240'/>

  <use href='#r7'  x='0' y='240'/>
  <use href='#r8'  x='0' y='240'/>
  <use href='#r9'  x='0' y='240'/>
  <use href='#r10' x='0' y='240'/>
  <use href='#r11' x='0' y='240'/>
  <use href='#r12' x='0' y='240'/>
</svg>

<script src="../resources/text-based-repaint.js"></script>
<script>
  onload = runRepaintAndPixelTest;

  function repaintTest() {
    // update the color stop properties such that all gradients draw solid green
    target1.style.stopColor = 'green';
    target2.style.stopOpacity = '1';
    target3.setAttribute('offset', '1');
  };
</script>
chromium/third_party/blink/web_tests/paint/invalidation/svg/color-stop-properties.html
