child-overflow.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/child-overflow.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class=reftest-wait>

<title>Canvas.drawElementImage: draw box decorations and do not clip child overflow</title>

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

<link rel="match" href="child-overflow-ref.html">

<script src="/common/reftest-wait.js"></script>

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

<style>

#child {

  width: 80px;

  height: 80px;

  background: lightgreen;

  border: 5px solid black;

  padding: 10px;

#grandchild {

  width: 100px;

  height: 100px;

  background: green;

</style>

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

  <div id=child>

    <!-- Should overflow on the right and bottom, drawing over the border. -->

    <div id=grandchild></div>

  </div>

</canvas>

<script>

onload = async () => {

  await waitForCanvasPaint(canvas);

  canvas.getContext('2d').drawElementImage(child,

    /*src_x=*/ -5, /*src_y=*/ -5, /*src_w=*/ 125, /*src_h=*/ 125,

    /*dst_x=*/ 15, /*dst_y=*/ 25, /*dst_w=*/ 125, /*dst_h=*/ 125);

  takeScreenshot();

};

</script>

</html>