scale.tentative.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<html class="reftest-wait">

<title>drawElementImage with scaling.</title>

<meta charset="utf-8" />

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

<link rel="match" href="scale-ref.html" />

<meta name=fuzzy content="0-5;0-245">

<link rel="stylesheet" href="/html/canvas/resources/draw-element-image-styles.css" />

<script src="/html/canvas/resources/color-grid-component.js"></script>

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

<style>

  body {

    display: grid;

    grid: 256px / 1fr 1fr 1fr;

    align-items: start;

  canvas {

    width: 256px;

    height: 256px;

  color-grid {

    width: 100px;

    height: 100px;

</style>

<canvas layoutsubtree>

  <div class="draw-element-wrapper">

    <div class="css-is-awesome"></div>

  </div>

</canvas>

<canvas layoutsubtree>

  <div class="draw-element-wrapper" xscale="1" yscale="1">

    <color-grid></color-grid>

  </div>

</canvas>

<canvas layoutsubtree>

  <div class="draw-element-wrapper" xscale="0.5" yscale="0.5">

    <color-grid></color-grid>

  </div>

</canvas>

<canvas layoutsubtree>

  <div class="draw-element-wrapper" xscale="2" yscale="2">

    <color-grid></color-grid>

  </div>

</canvas>

<canvas layoutsubtree>

  <div class="draw-element-wrapper" xscale="2" yscale="0.5">

    <color-grid></color-grid>

  </div>

</canvas>

<script type="module">

  import { resizeToPixelGrid, computeScaledDestinationSize } from "/html/canvas/resources/draw-element-image-utils.js";

  Promise.all(Array.from(document.querySelectorAll("canvas")).map(async cvs => {

    await resizeToPixelGrid(cvs);

    await new Promise(setTimeout);

    const target = cvs.firstElementChild;

    const ctx = cvs.getContext("2d");

    if (target.hasAttribute("xscale") && target.hasAttribute("yscale")) {

      const scaleX = Number.parseFloat(target.getAttribute("xscale"));

      const scaleY = Number.parseFloat(target.getAttribute("yscale"));

      const [destWidth, destHeight] =

        computeScaledDestinationSize(cvs, target, scaleX, scaleY);

      ctx.drawElementImage(target, 0, 0, destWidth, destHeight);

    } else {

      ctx.drawElementImage(target, 0, 0);

  })).then(takeScreenshot);

</script>