2086975 - inset values get wrong when combining percentage with hypot()

Status: RESOLVED DUPLICATE of bug 2083404

(Core :: CSS Parsing and Computation, defect)

Description

[Temani Afif]

Steps to reproduce

Consider the following code:

.box {
  position: relative;
  container-type: size;
}
.box:before {
  content:"";
  position: absolute;
  top: calc(100% - 10px);
  right: 0;
  bottom: -10px;
  left: calc(100% - hypot(100cqw,100cqh));
  transform-origin: right;
  rotate: atan(100cqh/100cqw);
}

The pseudo element should create a diagonal with a thickness equal to 20px.

Demo: https://codepen.io/t_afif/pen/ZYeqGpd/9834b2f649ee7d55eeb9d85d43d8f43f

Actual results

The left value is wrong. Works fine in Chromium.

Expected results

That left value is equivalent to using

left: auto;
width: hypot(100cqw,100cqh);

The latter works fine: https://codepen.io/t_afif/pen/XJMxbRJ/439ad2a614a7568a84bb15e5ebca4fa8

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Renders fine in nightly, this is bug 2083404.