Bug 1829590 - Add CSSImportRule supportsText attribute r=emilio

Added the new CSSImportRule supportsText attribute to allow pages to
read supports conditions for CSS imports with JS.

Spec PR: https://github.com/w3c/csswg-drafts/pull/8712

Differential Revision: https://phabricator.services.mozilla.com/D176685

dom/webidl/CSSImportRule.webidl

@@ -15,9 +15,7 @@ interface CSSImportRule : CSSRule {
   // be since stylesheet can be null, and in Stylo, media is derived from
   // the stylesheet.  See <https://bugzilla.mozilla.org/show_bug.cgi?id=1326509>.
   [SameObject, PutForwards=mediaText] readonly attribute MediaList? media;
-  // This disagrees with CSSOM temporarily, but css-conditional assumes it is
-  // nullable.
-  // see: https://github.com/w3c/csswg-drafts/issues/8608.
   [SameObject, BinaryName="styleSheetForBindings"] readonly attribute CSSStyleSheet? styleSheet;
   readonly attribute UTF8String? layerName;
+  readonly attribute UTF8String? supportsText;
 };

layout/style/CSSImportRule.cpp

@@ -125,6 +125,10 @@ void CSSImportRule::GetLayerName(nsACString& aName) const {
   Servo_ImportRule_GetLayerName(mRawRule, &aName);
 }
 
+void CSSImportRule::GetSupportsText(nsACString& aSupportsText) const {
+  Servo_ImportRule_GetSupportsText(mRawRule, &aSupportsText);
+}
+
 /* virtual */
 void CSSImportRule::GetCssText(nsACString& aCssText) const {
   Servo_ImportRule_GetCssText(mRawRule, &aCssText);

layout/style/CSSImportRule.h

@@ -39,6 +39,7 @@ class CSSImportRule final : public css::Rule {
   StyleSheet* GetStyleSheet() const { return mChildSheet; }
   StyleSheet* GetStyleSheetForBindings();
   void GetLayerName(nsACString&) const;
+  void GetSupportsText(nsACString&) const;
 
   // Clear the mSheet pointer on this rule and descendants.
   void DropSheetReference() final;

servo/ports/geckolib/glue.rs

@@ -2716,6 +2716,17 @@ pub extern "C" fn Servo_ImportRule_GetLayerName(
     })
 }
 
+#[no_mangle]
+pub extern "C" fn Servo_ImportRule_GetSupportsText(
+    rule: &RawServoImportRule,
+    result: &mut nsACString,
+) {
+    read_locked_arc(rule, |rule: &ImportRule| match rule.supports {
+        Some(ref supports) => supports.condition.to_css(&mut CssWriter::new(result)).unwrap(),
+        None => result.set_is_void(true),
+    })
+}
+
 #[no_mangle]
 pub extern "C" fn Servo_ImportRule_GetSheet(rule: &RawServoImportRule) -> *const DomStyleSheet {
     read_locked_arc(rule, |rule: &ImportRule| {

testing/web-platform/tests/css/cssom/cssimportrule.html

@@ -15,6 +15,7 @@
         @import url("support/a-green.css");
         @import url("support/a-green.css") screen;
         @import url("support/a-green.css") all;
+        @import url("support/a-green") supports((display: flex) or (display: block));
         @page { background-color: red; }
     </style>
 </head>
@@ -22,13 +23,14 @@
     <div id="log"></div>
 
     <script type="text/javascript">
-        var styleSheet, ruleList, rule, ruleWithMedia, ruleWithMediaAll;
+        var styleSheet, ruleList, rule, ruleWithMedia, ruleWithMediaAll, ruleWithSupports;
         setup(function() {
             styleSheet = document.getElementById("styleElement").sheet;
             ruleList = styleSheet.cssRules;
             rule = ruleList[0];
             ruleWithMedia = ruleList[1];
             ruleWithMediaAll = ruleList[2];
+            ruleWithSupports = ruleList[3];
         });
 
         test(function() {
@@ -36,6 +38,8 @@
             assert_true(rule instanceof CSSImportRule);
             assert_true(ruleWithMedia instanceof CSSRule);
             assert_true(ruleWithMedia instanceof CSSImportRule);
+            assert_true(ruleWithSupports instanceof CSSRule);
+            assert_true(ruleWithSupports instanceof CSSImportRule);
         }, "CSSRule and CSSImportRule types");
 
         test(function() {
@@ -66,6 +70,7 @@
             assert_equals(rule.cssText, '@import url("support/a-green.css");');
             assert_equals(ruleWithMedia.cssText, '@import url("support/a-green.css") screen;');
             assert_equals(ruleWithMediaAll.cssText, '@import url("support/a-green.css") all;');
+            assert_equals(ruleWithSupports.cssText, '@import url("support/a-green") supports((display: flex) or (display: block));');
             assert_equals(rule.parentRule, null);
             assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
         }, "Values of CSSRule attributes");
@@ -94,7 +99,7 @@
         }, "CSSImportRule : MediaList mediaText attribute should be updated due to [PutForwards]");
 
         test(function() {
-            var ruleWithPage = ruleList[3];
+            var ruleWithPage = ruleList[4];
             ruleWithPage.style = "margin-top: 10px;"
             assert_equals(ruleWithPage.style.cssText, "margin-top: 10px;");
         }, "CSSStyleDeclaration cssText attribute should be updated due to [PutForwards]");
@@ -103,6 +108,15 @@
             styleSheet.media = "screen";
             assert_equals(styleSheet.media.mediaText, "screen");
         }, "StyleSheet : MediaList mediaText attribute should be updated due to [PutForwards]");
+
+        test(function() {
+            assert_idl_attribute(ruleWithSupports, "supportsText");
+            assert_readonly(ruleWithSupports, "supportsText");
+        }, "Existence and writability of CSSImportRule supportsText attribute");
+
+        test(function() {
+            assert_equals(ruleWithSupports.supportsText, "(display: flex) or (display: block)");
+        }, "Value of CSSImportRule supportsText attribute");
     </script>
 </body>
 </html>