[csswg-drafts] [cssom-1] Incorrect handling of `media` in Create a constructed `CSSStyleSheet`? (#11778)

cdoublev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-1] Incorrect handling of `media` in Create a constructed `CSSStyleSheet`? ==
Step 12 of the [procedure](https://drafts.csswg.org/cssom-1/#create-a-constructed-cssstylesheet) requires serializing a media query list from `media` when it is not a string:

  > 12. If the `media` attribute of `options` is a string, create a `MediaList` object from the string and assign it as `sheet`’s media. Otherwise, [serialize a media query list](https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list) from the attribute and then create a `MediaList` object from the resulting string and set it as `sheet`’s media.

I doubt that the procedure for serializing a media query list expects a `MediaList` (cf. [`CSSStyleSheetInit`](https://drafts.csswg.org/cssom-1/#dictdef-cssstylesheetinit)).

Besides, the media query list associated to the new `MediaList` should be updated whenever the attribute (of the owner node) is updated:

  > If this property is specified to an attribute of the owner node, the media must be set to the return value of invoking create a MediaList object steps for the value of that attribute. Whenever the attribute is set, changed or removed, the media’s `mediaText` attribute must be set to the new value of the attribute, or to null if the attribute is absent.

For example:

```html
<style media="(width: 0px)" id="style">
  * { color: red }
</style>
<p>I become red after 1s</p>
<script>
  const sheet = document.styleSheets[1]
  sheet.media.mediaText // (width: 0px)
  setTimeout(() => {
    style.setAttribute('media', '(width > 0px)')
    style.getAttribute('media') // (width > 0px)
    sheet.media.mediaText // (width: 0px)
  }, 1000)
</script>
```

So I suspect that step 12 should [*parse* a media query list](https://drafts.csswg.org/cssom-1/#parse-a-media-query-list) from `media` when it is a string, create a `MediaList` object with it, and assign it as `sheet`'s media. Otherwise, if it is a `MediaList`, it should create a new `MediaList` with the media query list associated to `media`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11778 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 25 February 2025 20:42:03 UTC