2d.layer.global-states.ctx-filter.rotation-expected.html

<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
<p class="desc">Checks that layers correctly use global render states.</p>

<div style="display: grid; grid-gap: 4px;
            grid-template-columns: repeat(8, max-content);
            font-size: 13px; text-align: center;">
<span>
  <div>no-globalAlpha</div>
  <div>no-composite-op</div>
  <div>no-shadow</div>
  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas0");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    // No globalCompositeOperation.
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>no-composite-op</div>
  <div>no-shadow</div>
  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas1");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    // No globalCompositeOperation.
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>blending</div>
  <div>no-shadow</div>
  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas2");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'multiply';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>blending</div>
  <div>no-shadow</div>
  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas3");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'multiply';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>composite</div>
  <div>no-shadow</div>
  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas4");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'source-in';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>composite</div>
  <div>no-shadow</div>
  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas5");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'source-in';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>copy</div>
  <div>no-shadow</div>
  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas6");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'copy';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>copy</div>
  <div>no-shadow</div>
  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas7");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'copy';
    // No shadow.
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>no-composite-op</div>
  <div>shadow</div>
  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas8");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    // No globalCompositeOperation.
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>no-composite-op</div>
  <div>shadow</div>
  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas9");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    // No globalCompositeOperation.
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>blending</div>
  <div>shadow</div>
  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas10");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'multiply';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>blending</div>
  <div>shadow</div>
  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas11");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'multiply';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>composite</div>
  <div>shadow</div>
  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas12");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'source-in';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>composite</div>
  <div>shadow</div>
  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas13");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'source-in';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>no-globalAlpha</div>
  <div>copy</div>
  <div>shadow</div>
  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas14");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    // No globalAlpha.
    ctx.globalCompositeOperation = 'copy';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

<span>
  <div>globalAlpha</div>
  <div>copy</div>
  <div>shadow</div>
  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script type="module">
    const canvas = document.getElementById("canvas15");
    const ctx = canvas.getContext('2d');

    ctx.translate(50, 40);
    ctx.rotate(Math.PI);
    ctx.translate(-45, -45);

    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
    ctx.fillRect(20, 15, 50, 50);

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'copy';
    ctx.shadowOffsetX = -7;
    ctx.shadowOffsetY = 7;
    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
    ctx.shadowBlur = 3;
    ctx.filter = 'drop-shadow(-4px -4px 0 fuchsia)';

    const canvas2 = document.createElement("canvas");
    const ctx2 = canvas2.getContext("2d");

    ctx2.globalCompositeOperation = 'screen';
    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx2.fillRect(10, 25, 40, 45);
    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx2.fillRect(30, 5, 45, 40);

    ctx.drawImage(canvas2, 0, 0);
  </script>
</span>

</div>
chromium/third_party/blink/web_tests/external/wpt/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
