2d.layer.global-states.filter.no-cxt-filter.no-transform.html

<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.no-transform-expected.html">
<title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform</title>
<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform</h1>
<p class="desc">Checks that layers with filters 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');

    // No transform.

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

    // No globalAlpha.
    // No globalCompositeOperation.
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    ctx.globalAlpha = 0.75;
    // No globalCompositeOperation.
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    // No globalAlpha.
    ctx.globalCompositeOperation = 'multiply';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'multiply';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    // No globalAlpha.
    ctx.globalCompositeOperation = 'source-in';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'source-in';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    // No globalAlpha.
    ctx.globalCompositeOperation = 'copy';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

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

    ctx.globalAlpha = 0.75;
    ctx.globalCompositeOperation = 'copy';
    // No shadow.
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </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');

    // No transform.

    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;
    // No filter.

    ctx.beginLayer({filter: [
        {name: 'dropShadow',
            dx: 8, dy: 8, stdDeviation: 0, floodColor: '#00f'},
        {name: 'componentTransfer',
            funcA: {type: "table", tableValues: [0, 0.8]}}]});

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

    ctx.endLayer();
  </script>
</span>

</div>
chromium/third_party/blink/web_tests/external/wpt/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.html
