Deprecate window.styleMedia and remove its matchMedium() method

https://bugs.webkit.org/show_bug.cgi?id=215236

Reviewed by Simon Fraser.

window.styleMedia was defined in early CSSOM View Module draft [1] and later
standardized as window.matchMedia. StyleMedia isn't implemented in Firefox
and is barely documented for web developers.

This patch:

1. Adds [MasqueradesAsUndefined] IDL attribute to StyleMedia interface,
   preventing its conditional usage, and exposes it with [NotEnumerable].

2. Simplifies window.styleMedia.type to always return "screen" because,
   until recently, window.print() was blocking and "print" was never
   observed. Other media types are deprecated [2].

3. Removes window.styleMedia.matchMedium() since its usage on the web [3]
   is as low as 0.02% of page loads.

4. Adds console deprecation message for window.styleMedia access,
   attempting to reduce its usage even further.

[1] https://www.w3.org/TR/2009/WD-cssom-view-20090804
[2] https://www.w3.org/TR/mediaqueries-5/#media-types
[3] https://www.chromestatus.com/metrics/feature/timeline/popularity/608

No new tests needed.

* LayoutTests/fast/dom/style-media-null-document-element-expected.txt: Removed.
* LayoutTests/fast/dom/style-media-null-document-element.html: Removed.
* LayoutTests/fast/loader/window-properties-restored-from-page-cache-expected.txt:
* LayoutTests/fast/loader/window-properties-restored-from-page-cache.html:
* LayoutTests/fast/media/invalid-lengths.html:
* LayoutTests/fast/media/lifetime-expected.txt: Removed.
* LayoutTests/fast/media/lifetime.html: Removed.
* LayoutTests/fast/media/matchmedium-query-api.html:
* LayoutTests/fast/media/print-restores-previous-mediatype-expected.txt:
* LayoutTests/fast/media/print-restores-previous-mediatype.html:
* LayoutTests/fast/media/video-playable-inline-media-query.html:
* LayoutTests/http/tests/dom/same-origin-detached-window-properties-expected.txt:
* LayoutTests/http/tests/dom/same-origin-detached-window-properties.html:
* Source/WebCore/css/StyleMedia.cpp:
(WebCore::StyleMedia::StyleMedia):
(WebCore::StyleMedia::type const):
(WebCore::StyleMedia::matchMedium const): Deleted.
* Source/WebCore/css/StyleMedia.h:
* Source/WebCore/css/StyleMedia.idl:
* Source/WebCore/page/DOMWindow+CSSOMView.idl:
* Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js:

Canonical link: https://commits.webkit.org/253168@main

LayoutTests/fast/loader/window-properties-restored-from-page-cache-expected.txt

@@ -6,7 +6,6 @@ This test makes sure that various properties on the window object are correctly
 [object Storage]
 true
 [object BarProp]
-[object StyleMedia]
 [object BarProp]
 [object Navigator]
 [object BarProp]

LayoutTests/fast/loader/window-properties-restored-from-page-cache.html

@@ -12,7 +12,6 @@
 var cachedLocalStorage = window.localStorage;
 var cachedLocation = window.location;
 var cachedLocationbar = window.locationbar;
-var cachedMedia = window.styleMedia;
 var cachedMenubar = window.menubar;
 var cachedNavigator = window.navigator;
 var cachedPersonalbar = window.personalbar;
@@ -48,7 +47,6 @@
 	logMessage(window.localStorage);
 	logMessage(window.location != null && window.location != undefined);
 	logMessage(window.locationbar);
-	logMessage(window.styleMedia);
 	logMessage(window.menubar);
 	logMessage(window.navigator);
 	logMessage(window.personalbar);
@@ -74,8 +72,6 @@
 		logErrorMessage("location");
 	if (cachedLocationbar != window.locationbar)
 		logErrorMessage("locationbar");
-	if (cachedMedia != window.styleMedia)
-		logErrorMessage("styleMedia");
 	if (cachedMenubar != window.menubar)
 		logErrorMessage("menubar");
 	if (cachedNavigator != window.navigator)

LayoutTests/fast/media/invalid-lengths.html

@@ -12,7 +12,7 @@
 
     function testQuery(query, expected)
     {
-        var actual = window.styleMedia.matchMedium(query);
+        var actual = window.matchMedia(query).matches;
         var message = (actual === expected) ? 'PASS' : 'FAIL';
         message += ": \"" + query + "\" evaluates to " + (actual ? "true" : "false") + ".";
         log(message);

LayoutTests/fast/media/matchmedium-query-api.html

@@ -16,7 +16,7 @@
 
   function testQuery(query, expected)
   {
-    var isTrue = window.styleMedia.matchMedium(query);
+    var isTrue = window.matchMedia(query).matches;
 
     var message = '\"' + query + '\" evaluates to ' + (isTrue ? 'true' : 'false');
     message += (isTrue == expected) ? ': PASS' : ': FAIL';

LayoutTests/fast/media/print-restores-previous-mediatype-expected.txt

@@ -1,6 +1,6 @@
 Media type is set to 'handheld' to be different than the default 'screen'
-PASS: window.styleMedia.type should be 'handheld' and is.
+PASS window.matchMedia('handheld').matches is true
 
 The page is printed, which changes the media type to 'print', and then back
-PASS: window.styleMedia.type should be 'handheld' and is.
+PASS window.matchMedia('handheld').matches is true
 

LayoutTests/fast/media/print-restores-previous-mediatype.html

@@ -1,41 +1,24 @@
 <html>
 <head>
 <title>Test that print restores previous media type</title>
-<style type="text/css">
-
-</style>
+<script src="../../resources/js-test-pre.js"></script>
 <script type="text/javascript" charset="utf-8">
     if (window.testRunner) {
         testRunner.dumpAsText();
         window.internals.settings.setMediaTypeOverride("handheld");
     }
 
-    function log(m)
-    {
-        var results = document.getElementById('results');
-        results.innerHTML += m + '<br>';
-    }
-
-    function shouldBe(aDescription, a, b)
-    {
-        if (a === b) {
-            log("PASS: " + aDescription + " should be '" + b + "' and is.");
-        } else {
-            log("FAIL: " + aDescription + " should be '" + b + "' but instead is '" + a + "'.");
-        }
-    }
-
     function runTests()
     {
-        log("Media type is set to 'handheld' to be different than the default 'screen'");
-        shouldBe("window.styleMedia.type", window.styleMedia.type, "handheld");
-        log("<br>The page is printed, which changes the media type to 'print', and then back");
+        debug("Media type is set to 'handheld' to be different than the default 'screen'");
+        shouldBeTrue("window.matchMedia('handheld').matches");
+        debug("");
+        debug("The page is printed, which changes the media type to 'print', and then back");
         window.print();
-        shouldBe("window.styleMedia.type", window.styleMedia.type, "handheld");
+        shouldBeTrue("window.matchMedia('handheld').matches");
     }
 </script>
 </head>
 <body onload="runTests()">
-    <div id="results"></div>
 </body>
 </html>

LayoutTests/fast/media/video-playable-inline-media-query.html

@@ -11,7 +11,7 @@
 }
 
 function testQuery(query, expected) {
-    var isTrue = window.styleMedia.matchMedium(query);
+    var isTrue = window.matchMedia(query).matches;
     var message = '\"' + query + '\" evaluates to ' + (isTrue ? 'true' : 'false');
     message = ((isTrue === expected) ? 'PASS: ' : 'FAIL: ') + message;
     log(message);

LayoutTests/http/tests/dom/same-origin-detached-window-properties-expected.txt

@@ -61,8 +61,7 @@ PASS w.visualViewport.width is 0
 PASS w.visualViewport.height is 0
 PASS w.visualViewport.scale is 1
 PASS !!w.styleMedia is true
-PASS w.styleMedia.type is ""
-PASS w.styleMedia.matchMedium('foo') is false
+PASS w.styleMedia.type is "screen"
 PASS !!w.navigator is true
 PASS w.navigator.appCodeName is "Mozilla"
 PASS w.navigator.appName is "Netscape"
@@ -136,8 +135,7 @@ PASS w.visualViewport.width is 0
 PASS w.visualViewport.height is 0
 PASS w.visualViewport.scale is 1
 PASS !!w.styleMedia is true
-PASS w.styleMedia.type is ""
-PASS w.styleMedia.matchMedium('foo') is false
+PASS w.styleMedia.type is "screen"
 PASS !!w.navigator is true
 PASS w.navigator.appCodeName is "Mozilla"
 PASS w.navigator.appName is "Netscape"

LayoutTests/http/tests/dom/same-origin-detached-window-properties.html

@@ -111,8 +111,7 @@
     try {
     shouldBeTrue("!!w.styleMedia");
     if (w.styleMedia) {
-        shouldBeEqualToString("w.styleMedia.type", "");
-        shouldBeFalse("w.styleMedia.matchMedium('foo')");
+        shouldBeEqualToString("w.styleMedia.type", "screen");
     }
     } catch (e) {
         debug(e);

LayoutTests/imported/w3c/web-platform-tests/WebIDL/ecmascript-binding/attributes-accessors-unique-function-objects-expected.txt

@@ -1,3 +1,4 @@
+CONSOLE MESSAGE: window.styleMedia is deprecated draft version of window.matchMedia API that is not implemented in Firefox and will be removed from the web platform in future.
 
 PASS For attributes, each copy of the accessor property has distinct built-in function objects for its getters and setters.
 

Source/WebCore/css/StyleMedia.cpp

@@ -26,51 +26,20 @@
 #include "config.h"
 #include "StyleMedia.h"
 
-#include "Document.h"
-#include "Frame.h"
-#include "FrameView.h"
-#include "MediaList.h"
-#include "MediaQueryEvaluator.h"
-#include "MediaQueryParser.h"
-#include "NodeRenderStyle.h"
-#include "RenderElement.h"
-#include "StyleResolver.h"
-#include "StyleScope.h"
-
 namespace WebCore {
 
 StyleMedia::StyleMedia(DOMWindow& window)
     : DOMWindowProperty(&window)
 {
+    if (window.document()) {
+        window.document()->addConsoleMessage(makeUnique<Inspector::ConsoleMessage>(MessageSource::JS, MessageType::Log, MessageLevel::Warning,
+            "window.styleMedia is deprecated draft version of window.matchMedia API that is not implemented in Firefox and will be removed from the web platform in future."_s));
+    }
 }
 
 String StyleMedia::type() const
 {
-    auto* frame = this->frame();
-    FrameView* view = frame ? frame->view() : nullptr;
-    if (view)
-        return view->mediaType();
-
-    return String();
-}
-
-bool StyleMedia::matchMedium(const String& query) const
-{
-    auto* frame = this->frame();
-    if (!frame)
-        return false;
-
-    Document* document = frame->document();
-    ASSERT(document);
-    Element* documentElement = document->documentElement();
-    if (!documentElement)
-        return false;
-
-    auto rootStyle = document->styleScope().resolver().styleForElement(*documentElement, { document->renderStyle() }, RuleMatchingBehavior::MatchOnlyUserAgentRules).renderStyle;
-
-    auto media = MediaQuerySet::create(query, MediaQueryParserContext(*document));
-
-    return MediaQueryEvaluator { type(), *document, rootStyle.get() }.evaluate(media.get());
+    return "screen"_s;
 }
 
 } // namespace WebCore

Source/WebCore/css/StyleMedia.h

@@ -37,7 +37,6 @@ class StyleMedia final : public RefCounted<StyleMedia>, public DOMWindowProperty
     static Ref<StyleMedia> create(DOMWindow& window) { return adoptRef(*new StyleMedia(window)); }
 
     String type() const;
-    bool matchMedium(const String&) const;
 
 private:
     explicit StyleMedia(DOMWindow&);

Source/WebCore/css/StyleMedia.idl

@@ -28,9 +28,7 @@
 [
     LegacyNoInterfaceObject,
     GenerateIsReachable=ReachableFromDOMWindow,
+    MasqueradesAsUndefined,
 ] interface StyleMedia {
     readonly attribute DOMString type;
-
-    // FIXME: Using "undefined" as default parameter value is wrong.
-    boolean matchMedium(optional DOMString mediaquery = "undefined");
 };

Source/WebCore/page/DOMWindow+CSSOMView.idl

@@ -63,5 +63,5 @@ partial interface DOMWindow {
 
 
     // Non-standard: This was removed from the CSSOM View specification.
-    readonly attribute StyleMedia styleMedia;
+    [NotEnumerable] readonly attribute StyleMedia styleMedia;
 };

Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js

@@ -1696,11 +1696,6 @@ WI.NativePrototypeFunctionParameters = {
         __proto__: null,
     },
 
-    StyleMedia: {
-        matchMedium: "[mediaquery]",
-        __proto__: null,
-    },
-
     StyleSheetList: {
         item: "[index]",
         __proto__: null,