Attachment 358197 Details for Bug 193088 – testcase

testcase

transition-transform.html (text/html), 631 bytes, created by Xidorn Quan on 2019-01-02 13:05:41 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Xidorn Quan

Created: 2019-01-02 13:05:41 PST

Size: 631 bytes

patch

obsolete

<!DOCTYPE html>
<style>
#container {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0% 0%;
  transition: transform 250ms;
  background-image: linear-gradient(to bottom, cyan, blue);
}
</style>
<div id="container"></div>
<script>
  let timeout;
  let x, y;
  window.addEventListener('mousemove', evt => {
    x = evt.clientX;
    y = evt.clientY;
    if (!timeout) {
      timeout = setTimeout(updateStyle, 0);
    }
  });
  function updateStyle() {
    const transform = `translate(${x}px, ${y}px)`;
    container.style = `width: 100px; height: 100px; transform: ${transform};`;
    timeout = undefined;
  }
</script>

Actions: View

Attachments on bug 193088: 358197 | 382075