Remove invalid references to margin-box

[FormularSumo]

Description

Removed incorrect references and descriptions of the margin-box property

Motivation

margin-box was removed from mask-origin and mask-clip in the 5 August 2021 CSS Masking Module Level 1 Candidate Recommendation

Additional details

https://drafts.fxtf.org/css-masking-1/#changes
https://bugzilla.mozilla.org/show_bug.cgi?id=1823257
web-platform-tests/wpt#41166

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model
• /en-US/docs/Web/CSS/mask-clip
• /en-US/docs/Web/CSS/mask-origin
• /en-US/docs/Web/CSS/offset-path

External URLs (2)

URL: /en-US/docs/Web/CSS/mask-origin
Title: mask-origin

• https://css-tricks.com/clipping-masking-css/ (1 time)

---

URL: /en-US/docs/Web/CSS/mask-clip
Title: mask-clip

• https://css-tricks.com/clipping-masking-css/ (1 time)

(comment last updated: 2023-08-03 05:54:08)

[chrisdavidmills]

Thanks for the update, @FormularSumo . Your changes look correct, so I'm approving the PR.

The one comment I have is that I looked around the site for other mentions of margin-box, and I think there might be other places where it is no longer a valid value too — this looked to be the case with clip-path (in Chromium at least), box-sizing (this page implies it still is), and offset-path (in Firefox and Chromium).

I wondered if you wanted to investigate these and correct them as well, in the same PR?

[FormularSumo]

Ah I hadn't realised there might be others, but I'm happy to take a look! Will add anything else I find to this pull request and let you know when that's done.

[FormularSumo]

I searched the GitHub repo for mentions of margin-box and found 12, including mask-origin and mask-clip and the 3 you mentioned. My full research is here https://docs.google.com/document/d/14gyDzYAsjyP7--8PGQHFawJiI-BREJ2bMXxiQnNt7NM/edit?usp=drivesdk but the conclusion is I think all of them except for mark-origin and mask-clip are correct, however there are 2 which could be improved.

offset-path is the first one. The relevent W3 spec is this one https://www.w3.org/TR/motion-1/#propdef-offset-path. Its value can be none | ray() | path() | <url> | [ <basic-shape> || <geometry-box> ]. Clicking on <geometry-box> takes you to css masking where the possible values are <shape-box> | fill-box | stroke-box | view-box. Clicking on <shape-box> shows the possible values as being margin-box | border-box | padding-box | content-box, same as is found in most of the other pages referencing margin-box and using <geometry-box>.
So I think that means offset-path can be any of those 7 values. The W3 spec I linked to has examples of it being set to margin-box and padding-box which would support that. The MDN page has a Syntax section and Formal Syntax section. The Syntax one only has margin-box and stroke-box as options for <geometry-box>. Meanwhile the Formal Syntax section has 6 of the 7 values listed under <coord-box>, missing margin-box. My understanding is that both of these sections should contain all 7 of the possible values underneath the heading/comment <geometry-box>. I'm happy to make these changes but I don't know too much about this so would like someone else to review/confirm this first.

The other one is very minor, on introduction-to-the-css-box-model, the term margin-box is used to mean the area of the margin. On the W3 spec https://www.w3.org/TR/css-box-4/#margin-area it describes the area contained in the margin edges as margin box, without a dash, which I think makes more sense given it's describing the area of a margin rather than the property margin-box used in <geometry-box>, but again I'm not too sure about this so would appreciated a second opinion.

Also I was wondering, what do you mean by not valid only in Chromium or Firefox? Doesn't the content of mdn pages apply to all browsers (where supported)?

[chrisdavidmills]

Also I was wondering, what do you mean by not valid only in Chromium or Firefox? Doesn't the content of mdn pages apply to all browsers (where supported)?

Sorry yeah, by this I meant that I tested it in the latest browser versions, and in those cases it came up in the devtools as being an unrecognised value.

The spec I'm looking at for offset-path is the latest editor's draft, at https://drafts.fxtf.org/motion-1/#offset-path-property, which is way more up to date than the one you are linking.

[FormularSumo]

I've looked through all of them again using the editors drafts this time (updated links in the document I linked). The only one that seems to have changed its use of margin-box is offset-path. <geometry-box> looks like it's been replaced with <coord-box>, which doesn't have margin-box as a possible value (but still has the other 6). So going back to the MDN page, the Formal Syntax section looks correct as it has those 6 values and no margin-box. However the first Syntax section still has

/* Geometry box */
offset-path: margin-box;
offset-path: stroke-box;

which I now think should be more like

/* Coord box */
offset-path: content-box;
offset-path: padding-box;
offset-path: border-box;
offset-path: fill-box;
offset-path: stroke-box;
offset-path: view-box;

Does that look correct to you?

[chrisdavidmills]

Does that look correct to you?

Yes. For fixing the margin-box issue on the page, that looks like the correct thing to do (there are other basic-shape values not covered, see https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes, but that seems out of scope for this PR, so I think that could be handled separately)

[FormularSumo]

I've fixed the margin-box issues on that page, and also made the minor change to introduction-to-the-css-box-model that I mentioned above. I see what you mean about some of the other basic shape values missing. ellipse(), and rect()/xywh() - although those ones seem to be missing from other pages as well. As you say, outside of this PR.

Edit, seems like issues have already been created for adding rect() and xywh() - see #28287 and #28286

[FormularSumo]

Do you know how I would remove margin-box from the Formal Syntax section of mask-origin and mask-clip? In the source code they just have {{csssyntax}} and I'm not sure where that data is pulled from.

[chrisdavidmills]

Perfect, I think this PR is wrapped up for now; thanks for the contribution, @FormularSumo!

[chrisdavidmills]

Do you know how I would remove margin-box from the Formal Syntax section of mask-origin and mask-clip? In the source code they just have {{csssyntax}} and I'm not sure where that data is pulled from.

@FormularSumo The formal syntax data is pulled from the definitions available in https://github.com/mdn/data, specifically in the css/properties.json file; see mask-clip for example.

Ah, but margin-box is part of the <shape-box> type definition, which is part of <geometry-box>, so you'd have to remove it from there.

The trouble is, I don't know whether this would then cause other overall property definitions to be wrong, so this would require some investigation. It is a bit of an unstable house of cards.

[wbamberg]

Do you know how I would remove margin-box from the Formal Syntax section of mask-origin and mask-clip? In the source code they just have {{csssyntax}} and I'm not sure where that data is pulled from.

@FormularSumo The formal syntax data is pulled from the definitions available in https://github.com/mdn/data, specifically in the css/properties.json file; see mask-clip for example.

Not any more: since mdn/yari#4656 formal syntax is pulled from the specs, via the W3C's @webref/css package. The "syntax" bit of mdn/data isn't used in MDN any more (and if we could figure it out, we'd use webref for the other stuff in mdn/data).

Ah, but margin-box is part of the <shape-box> type definition, which is part of <geometry-box>, so you'd have to remove it from there.

The trouble is, I don't know whether this would then cause other overall property definitions to be wrong, so this would require some investigation. It is a bit of an unstable house of cards.