triple-nested-layoutsubtree-canvas.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/triple-nested-layoutsubtree-canvas.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Triple-nested layoutsubtree canvas should fire onpaint on all three canvases when innermost child changes</title>

<link rel="help" href="https://github.com/WICG/html-in-canvas">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/html/canvas/resources/wait-for-canvas-paint.js"></script>

<canvas id="outer_canvas" layoutsubtree width="200" height="200">

  <div id="outer_target" style="width: 200px; height: 200px;">

    <canvas id="middle_canvas" layoutsubtree width="150" height="150">

      <div id="middle_target" style="width: 150px; height: 150px;">

        <canvas id="inner_canvas" layoutsubtree width="100" height="100">

          <div id="inner_target" style="width: 50px; height: 50px; background: #00f;"></div>

        </canvas>

      </div>

    </canvas>

  </div>

</canvas>

<script>

promise_test(async (t) => {

  let paint_order = [];

  inner_canvas.addEventListener('paint', () => paint_order.push('inner'));

  middle_canvas.addEventListener('paint', () => paint_order.push('middle'));

  outer_canvas.addEventListener('paint', () => paint_order.push('outer'));

  // Step 1: Request initial paint of all canvases.

  await Promise.all([

    waitForCanvasPaint(inner_canvas),

    waitForCanvasPaint(middle_canvas),

    waitForCanvasPaint(outer_canvas),

]);

  assert_array_equals(paint_order, ['inner', 'middle', 'outer'],

                      "Initial paint should run from innermost to outermost");

  // Step 2: Reset tracking and wait a frame to ensure clean state.

  paint_order = [];

  await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));

  assert_array_equals(paint_order, [], "No extra paints on clean frame");

  // Step 3: Change a div inside the innermost canvas.

  inner_target.style.background = '#f00';

  await Promise.all([

    waitForCanvasPaint(inner_canvas),

    waitForCanvasPaint(middle_canvas),

    waitForCanvasPaint(outer_canvas),

]);

  assert_array_equals(paint_order, ['inner', 'middle', 'outer'],

                      "Onpaint events should fire on all 3 canvases from innermost to outermost");

}, "Triple-nested layoutsubtree canvas fires onpaint on all canvases when innermost child changes");

</script>