Origin for clip-path: xywh shape is not aligned to the element

• Component: CSS
• Status: NEW ---

See repro at https://codepen.io/tremby/pen/BaEqYBg

On other browsers (Firefox, Chromium), I see the whole box and its thick border, because the clip-path is set to cover the whole element.

On Safari I see the same thing as long as the element is at the very top left of the viewport (or maybe some other offset parent; I didn't dig this far). But if it's away from the corner like it is in the example, in this case due to margins, it seems like the clip area is the right size and shape, but starting in the top left corner of the document.

[Karl Dubost]

Created attachment 471006 [details]
rendering in safari, firefox, chrome

@bart, Are you sure about the codepen, I do not see any differences whichever the browser. Nothing is being displayed.

Or Maybe it has already been fixed. It doesn't reproduce on STP 192 too. 
Nothing is visible.

Apologies, I must have neglected to hit save after finishing it.

I've updated it; please look again, or here's the contents showing the issue (it shows the full element with the whole thick black border in Firefox and other browsers, and it's clipped incorrectly on Safari):

<div>
  <p>
    Line 1: 1 2 3 4 5 6 7 8 9 10
  </p>
  <p>
    Line 2: 1 2 3 4 5 6 7 8 9 10
  </p>
</div>

---

html, body { margin: 0; padding: 0; }
div {
  background-color: #ccc;
  border: 10px solid black;
  clip-path: xywh(0 0 100% 100%);
  width: 20em;
  margin-top: 30px;
  margin-left: 10px;
}

---

You'll find if you manipulate the margin that the clip path seems to be anchored to the viewport corner rather than the element corner.

[Karl Dubost]

Created attachment 471057 [details]
rendering in safari, firefox, chrome

confirmed.

Safari Technology Preview  191           20619.1.6.3
Firefox Nightly            127.0a1       12724.4.22
Google Chrome Canary       126.0.6434.0  6434.0

[Radar WebKit Bug Importer]

<rdar://problem/127042514>