1098939 - (shape-outside) [meta] Implement CSS shape-outside property

Status: NEW

(Core :: Layout: Floats, enhancement, P2)

Description

[Igor Oliveira]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36

Steps to reproduce:

This bug tracks the overall implementation of the shape outside feature(http://dev.w3.org/csswg/css-shapes/#propdef-shape-outside)

Comment 1

[Daniel Holbert [:dholbert]]

I noticed Antonio assigned this to Igor back in November -- is Igor (or someone at work.co) actively working on implementing this?

(I'm asking because this feature is on a list of possible Mozilla internship projects for this summer, so if someone's already actively working on implementing it, that would be useful to know when choosing between projects.)

If you're not actively working on this, would you mind if I clear the "assignee" field?

Comment 2

[Igor Oliveira]

(In reply to Daniel Holbert [:dholbert] from comment #1)
> I noticed Antonio assigned this to Igor back in November -- is Igor (or
> someone at work.co) actively working on implementing this?
> 
> (I'm asking because this feature is on a list of possible Mozilla internship
> projects for this summer, so if someone's already actively working on
> implementing it, that would be useful to know when choosing between
> projects.)
> 
> If you're not actively working on this, would you mind if I clear the
> "assignee" field?

Yep, you can clear the assignee field.

Comment 3

[Daniel Holbert [:dholbert]]

Thanks!

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: MozReview Request: Bug 1098939 Part 1 - Add shape-outside support to style system.

Review commit: https://reviewboard.mozilla.org/r/54228/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/54228/

Comment 5

[Jeremy Chen ([e-mail])]

https://reviewboard.mozilla.org/r/54228/#review51418

::: layout/style/nsCSSPropList.h:3705
(Diff revision 1)
> +CSS_PROP_DISPLAY(
> +    shape-outside,
> +    shape_outside,
> +    ShapeOutside,
> +    CSS_PROPERTY_PARSE_VALUE |
> +        CSS_PROPERTY_VALUE_PARSER_FUNCTION,

Perhaps you'll need CSS_PROPERTY_APPLIES_TO_FIRST_LETTER here to apply to floating first-letter.

Comment 6

[Astley Chen (inactive)]

Based on IRC discussion with Xidorn, attr() support should not block the implementation of shape-outside.

Comment 7

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Turn this into a meta bug.

Comment 8

[Sebastian Zartner [:sebo]]

I've added a note to https://developer.mozilla.org/en-US/Firefox/Experimental_features#CSS and https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside about the implementation status.

Sebastian

Comment 9

[Sebastian Zartner [:sebo]]

As all main values of shape-outside are implemented now, I think it's time to at least enable it by default on Nightly and DevEdition. What do you think, Ting-Yu?

Sebastian

Comment 10

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Re comment 9:

I filed bug 1353631 to track all the bugs that needs to fixed before enabling shape-outside on Nightly and Aurora. We still need animation support for <basic-shape> (bug 1289049).

> As all main values of shape-outside are implemented now

Not really. We still lack "shape-outside: <image>" support, which might not block enabling on Nightly and Aurora, but it definitely blocks shipping. To implement it, we need to fix bug 1265343. 

In general, shape-outside more or less makes stylo harder to ship because we need to support those CSS properties in servo as well, and I'll need to do them twice (once in gecko and once in servo). Given that, I might postpone doing them until we enable stylo on Nightly so that I only need to implement them once.

Comment 11

[yisibl]

Yeah, WebKit&blink supported shape-outside: <image>.

Comment 12

[Sebastian Zartner [:sebo]]

(In reply to Ting-Yu Lin [:TYLin] (UTC+8) from comment #10)
> Re comment 9:
> 
> I filed bug 1353631 to track all the bugs that needs to fixed before
> enabling shape-outside on Nightly and Aurora.

Great, thanks!

> > As all main values of shape-outside are implemented now
> 
> Not really. We still lack "shape-outside: <image>" support, which might not
> block enabling on Nightly and Aurora, but it definitely blocks shipping. To
> implement it, we need to fix bug 1265343. 
> 
> In general, shape-outside more or less makes stylo harder to ship because we
> need to support those CSS properties in servo as well, and I'll need to do
> them twice (once in gecko and once in servo). Given that, I might postpone
> doing them until we enable stylo on Nightly so that I only need to implement
> them once.

(In reply to percyley from comment #11)
> Yeah, WebKit&blink supported shape-outside: <image>.

I can't test WebKit, but as far as I can see, Blink parses "shape-outside: <image>" and shape-image-threshold but doesn't actually implement them. See http://codepen.io/team/css-tricks/pen/fbe5379f499f072e55fa1e4fbab5c8d5 or http://codepen.io/anon/pen/YZMxVP.

Sebastian

Comment 13

[yisibl]

@Sebastian There is a problem with the first test case, which must contain a transparent region.

Please test this: http://codepen.io/AmeliaBR/pen/DgrCo

and http://hansmuller-webkit.blogspot.com/2013/11/css-shapes-from-images.html

The second example is the PNG image problem, use this: https://img.alicdn.com/tfs/TB1baHDQpXXXXX9XVXXXXXXXXXX-406-406.png

Comment 14

[Sebastian Zartner [:sebo]]

Ah, thank you! The second one was obviously my fault, should have been like http://codepen.io/anon/pen/qrGZgR. The second one came from https://css-tricks.com/almanac/properties/s/shape-outside/.

Sebastian

Comment 15

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 16

[Brad Werth [:bradwerth]]

Taking myself off now that Ting-Yu has returned to implementing the feature.