[SOLVED] How do I check if CSS @layer is supported in CSS and Javascript?

How do I check if CSS @layer is supported in CSS and Javascript?

So I know that @support and CSS.supports can be used to check if certain features is available but I cannot in anyway make it works to detect if CSS @layer is available or not. I am 100% sure my browser supports it but the following checks all return false:

console.log(CSS.supports("@layer"))
console.log(CSS.supports("@layer a;"))
console.log(CSS.supports("@layer a {  }"))
console.log(CSS.supports("layer"))
console.log(CSS.supports("layer: 1"))
console.log(CSS.supports("layer", 1))

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

<div class="box">
  <p>Hello, world!</p>
</div>

The above text shows as purple for me so I know @layer works and DevTools' CSS Layer button shows up. However all the tests are false.

What is the correct prompt for this check?

Solution

One way might be to test the CSSOM for the presence of one of the Layer Rule types. So for example

console.log(typeof CSSLayerBlockRule === 'function')