W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

Re: [csswg-drafts] [css-shapes-1] Degenerate polygons with positive shape-margin

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Wed, 11 Jul 2018 18:43:35 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-404271223-1531334614-sysbot+gh@w3.org>
> I would support that as long as the spec defines the location of the point. 

My suggestion to use `border-radius` rules was specifically the calculation for scaling down all the measurements proportionally (I've updated the link above to go to the [precise section](https://drafts.csswg.org/css-backgrounds-3/#corner-overlap)):

For inset rectangles, the calculation would be simpler,* because you're not worried about maintaining the aspect ratio of a corner curve:

- if (_inset-left_ + _inset-right_) > _width_, multiply both horizontal insets by (_width_/(_inset-left_ + _inset-right_))
- if (_inset-top_ + _inset-bottom_) > _height_, multiply both vertical insets by (_height_/(_inset-top_ + _inset-bottom_))

That means that if the insets on opposite sides are equal, the collapsed point/line would be in the exact middle of the reference box.  If one inset is 9 times the opposite inset, the point would be 1/10th of the distance across.

> Where should it be in a case like `inset(100% 100% 50% 50%)`?

It would be at the same point as `inset(66.67% 66.67% 33.33% 33.33%)`, with all the insets being scaled down equally to fit in the 100% width/height available.

\* _Unless_ you wanted to also scale down the border-radius curves proportionally, in which case things could get complicated. But if I'm reading the [function definition](https://drafts.csswg.org/css-shapes/#funcdef-inset) correctly, the border radiuses apply _after_ the insetting happens (e.g., a border-radius of 10% would be 10% of the inset shape, not the original box), so it's probably best to keep that as a separate step, with its own adjustments. 

GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2375#issuecomment-404271223 using your GitHub account
Received on Wednesday, 11 July 2018 18:43:39 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:33 UTC