Define what layerX/layerY do in presence of transforms. #398
Description
In this test-case, layerX and layerY do different things in Firefox and Chromium / WebKit.
Clicking on the bottom right of the square shows ~100 for Firefox and ~200 for Chrome/WebKit
<!doctype html>
<pre id="log"></pre>
<div id="target" style="width: 100px; height: 100px; border: 1px solid; transform: scale(2); transform-origin: 0 0;">
<div id="inner" style="width: 100px; height: 100px; background: linear-gradient(green, purple)"></div>
</div>
<script>
inner.addEventListener("click", function(e) {
log.appendChild(document.createTextNode(`(${e.layerX}, ${e.layerY})\n`));
});
</script>If you have nested transforms, it gets even weirder (Chrome/WebKit scale by all ancestor transforms, which seems really odd?). See here for a test-case.
I would expect Firefox's behavior. I could get behind the behavior of scaling by the "layer"s transform. But scaling by all ancestor layers doesn't quite make sense to me? The coordinates get kinda meaningless in that case / you need to un-scale them to do the right thing...