<style include="diagnostics-shared">
:host-context(body.jelly-enabled) .tester {
background: var(--cros-highlight-color_shape);
}
.canvas-container {
align-items: center;
display: flex;
justify-content: center;
}
.tester {
background: var(--cros-highlight-color);
border-radius: 8px;
}
</style>
<cr-dialog id="touchpadTesterDialog">
<div slot="title">[[i18n('touchpadTesterTitleText')]]</div>
<div slot="body">
[[touchpad.name]]
<div class="canvas-container">
<!-- TODO(b/253021171): Set width dynamically based on constant height
ratio compared to ABS size data provided from EvdevDeviceInfo when
mojo is updated to provide scaled size. -->
<canvas class="tester" id="testerCanvas" height="320" width="320" ></canvas>
</div>
</div>
</cr-dialog>