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

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Jen Simmons [:jensimmons]]

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.

Comment 1

[Jeremy Chen ([e-mail])]

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.