Bug 1098939 (shape-outside)

[meta] Implement CSS shape-outside property

NEW
Unassigned

Status

()

Core
Layout: Floats
P2
normal
3 years ago
18 days ago

People

(Reporter: Igor Oliveira, Unassigned)

Tracking

(Depends on: 4 bugs, Blocks: 5 bugs, 4 keywords)

Trunk
dev-doc-needed, DevAdvocacy, feature, meta
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [parity-webkit][parity-blink][DevRel:P1], URL)

Attachments

(1 obsolete attachment)

(Reporter)

Description

3 years ago
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)
(Reporter)

Updated

3 years ago
Component: Untriaged → Layout: Floats
Product: Firefox → Core
Assignee: nobody → igor
Flags: needinfo?(tonikitoo)
Comment hidden (offtopic)
Keywords: dev-doc-needed
Blocks: 1242029
Blocks: 1040714
Assignee: nobody → tlin
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Assignee: tlin → nobody
Status: ASSIGNED → NEW
Blocks: 1265342
Blocks: 1265343
Whiteboard: [parity-webkit][parity-blink]
Keywords: meta
Keywords: feature

Updated

a year ago
Keywords: DevAdvocacy
Whiteboard: [parity-webkit][parity-blink] → [parity-webkit][parity-blink][DevRel:P1]
Assignee: nobody → tlin
Status: NEW → ASSIGNED
Summary: [META][CSS Shapes] Implement shape-outside → Implement CSS shape-outside property
Blocks: 1273022
Depends on: 1274835
Created attachment 8755323 [details]
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/
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.

Updated

11 months ago
Flags: platform-rel?

Updated

11 months ago
platform-rel: --- → ?
Depends on: 1288626
Attachment #8755323 - Attachment is obsolete: true
Depends on: 1289049
Depends on: 1291110
Depends on: 435426
Priority: -- → P2
Based on IRC discussion with Xidorn, attr() support should not block the implementation of shape-outside.
No longer depends on: 435426
Depends on: 1309467
Depends on: 1311244
Depends on: 1309830
Depends on: 1316549
Turn this into a meta bug.
Alias: shape-outside
Assignee: tlin → nobody
Status: ASSIGNED → NEW
Summary: Implement CSS shape-outside property → [meta] Implement CSS shape-outside property
Depends on: 1326406
Depends on: 1326407
Depends on: 1326409
Depends on: 1328236
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
Depends on: 1332180
Depends on: 1334227
platform-rel: ? → ---
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
Flags: needinfo?(tlin)
Depends on: 1353631
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.
Flags: needinfo?(tlin)

Comment 11

2 months ago
Yeah, WebKit&blink supported shape-outside: <image>.
(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

2 months ago
@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
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
You need to log in before you can comment on or make changes to this bug.