@supports (clip-path: [foo]) doesn't work in Nightly, even though clip-path does

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
2 years ago
4 months ago

People

(Reporter: jensimmons, Unassigned)

Tracking

({DevAdvocacy})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [DevRel:P1])

(Reporter)

Description

2 years ago
I'm creating demos using clip-path. And I want to use Feature Queries to isolate CSS and activate it only when clip-path is supported. 

It doesn't seem to be working.

  @supports (clip-path: polygon()) or (-webkit-clip-path: polygon()) {
    background: #e8fafc;
    border: 2px solid #19608D;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    clip-path: polygon(4% 1%, 99% 0, 93% 97%, 1% 100%);    
  }

Is this simply the nature of cutting-edge stuff in Nightly being behind a flag still? Or is it a matter of telling Firefox, hey, you do support this now, please return true for @supports? If that, then that needs to be done.
(Reporter)

Updated

2 years ago
Component: General → Layout
Product: Firefox → Core
(Reporter)

Updated

2 years ago
Keywords: DevAdvocacy
Whiteboard: [DevRel:P1]

Updated

2 years ago
Flags: platform-rel?

Updated

2 years ago
platform-rel: --- → ?
platform-rel: ? → ---
The test case in comment 0 is also not working in Chrome, but the following case could perfectly work in both Firefox and Chrome:

```
<style>
  div {
    width: 200px;
    height: 100px;
    background: blue;
  }
  @supports (clip-path: polygon(20px 20px)) or (-webkit-clip-path: polygon(20px 20px)) {
    div { background: red }
  }
</style>
```

According to the spec, https://drafts.csswg.org/css-shapes-1/#funcdef-polygon, polygon function should at least have one pair of coordinates, e.g., polygon(20px 20px). So, I think @supports works fine, the issue here is that we try to set invalid values for a property that we support.
Status: NEW → RESOLVED
Last Resolved: 4 months ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.