[css-position] Browsers treat auto margins as 0 when resolving sticky insets #12852
Description
https://drafts.csswg.org/css-position/#position-box
The position box is its margin box, except that for any side for which the distance between its margin edge and the corresponding edge of its containing block is less than its corresponding margin, that distance is used in place of that margin
Also, Gecko, Blink and WebKit agree that if the computed margin is auto, then zero is used instead of the margin.
See https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
This is a round-tripping violation!
<!DOCTYPE html>
<div style="overflow: hidden; width: 100px; height: 100px; background: red">
<div style="width: 500px">
<div id="sticky" style="position: sticky; right: 0; width: 100px; height: 100px; margin-left: auto; background: green;"></div>
</div>
</div>
<button>Click me</button>
<script>
document.querySelector("button").addEventListener("click", () => {
sticky.style.marginLeft = getComputedStyle(sticky).marginLeft;
// Workaround for lack of invalidation in Blink
sticky.style.display = "none";
document.body.offsetLeft;
sticky.style.display = "";
});
</script>