style: Don't optimize ::before/::after away if content/display have been specified via custom properties.

We need to treat them the same way as we treat content: inherit.

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

components/style/properties/cascade.rs

@@ -478,6 +478,25 @@ impl<'a, 'b: 'a> Cascade<'a, 'b> {
                 .rule_cache_conditions
                 .borrow_mut()
                 .set_uncacheable();
+
+            // NOTE(emilio): We only really need to add the `display` /
+            // `content` flag if the CSS variable has not been specified on our
+            // declarations, but we don't have that information at this point,
+            // and it doesn't seem like an important enough optimization to
+            // warrant it.
+            match declaration.id {
+                LonghandId::Display => {
+                    self.context
+                        .builder
+                        .add_flags(ComputedValueFlags::DISPLAY_DEPENDS_ON_INHERITED_STYLE);
+                },
+                LonghandId::Content => {
+                    self.context
+                        .builder
+                        .add_flags(ComputedValueFlags::CONTENT_DEPENDS_ON_INHERITED_STYLE);
+                },
+                _ => {},
+            }
         }
 
         Cow::Owned(declaration.value.substitute_variables(

components/style/properties/computed_value_flags.rs

@@ -42,17 +42,17 @@ bitflags! {
         /// A flag used to mark styles which are a pseudo-element or under one.
         const IS_IN_PSEUDO_ELEMENT_SUBTREE = 1 << 4;
 
-        /// Whether this style inherits the `display` property.
+        /// Whether this style's `display` property depends on our parent style.
         ///
         /// This is important because it may affect our optimizations to avoid
         /// computing the style of pseudo-elements, given whether the
         /// pseudo-element is generated depends on the `display` value.
-        const INHERITS_DISPLAY = 1 << 6;
+        const DISPLAY_DEPENDS_ON_INHERITED_STYLE = 1 << 6;
 
-        /// Whether this style inherits the `content` property.
+        /// Whether this style's `content` depends on our parent style.
         ///
         /// Important because of the same reason.
-        const INHERITS_CONTENT = 1 << 7;
+        const CONTENT_DEPENDS_ON_INHERITED_STYLE = 1 << 7;
 
         /// Whether the child explicitly inherits any reset property.
         const INHERITS_RESET_STYLE = 1 << 8;

components/style/properties/properties.mako.rs

@@ -3646,11 +3646,11 @@ impl<'a> StyleBuilder<'a> {
         self.add_flags(ComputedValueFlags::INHERITS_RESET_STYLE);
 
         % if property.ident == "content":
-        self.add_flags(ComputedValueFlags::INHERITS_CONTENT);
+        self.add_flags(ComputedValueFlags::CONTENT_DEPENDS_ON_INHERITED_STYLE);
         % endif
 
         % if property.ident == "display":
-        self.add_flags(ComputedValueFlags::INHERITS_DISPLAY);
+        self.add_flags(ComputedValueFlags::DISPLAY_DEPENDS_ON_INHERITED_STYLE);
         % endif
 
         if self.${property.style_struct.ident}.ptr_eq(inherited_struct) {

components/style/style_resolver.rs

@@ -139,13 +139,13 @@ fn eager_pseudo_is_definitely_not_generated(
         return false;
     }
 
-    if !style.flags.intersects(ComputedValueFlags::INHERITS_DISPLAY) &&
+    if !style.flags.intersects(ComputedValueFlags::DISPLAY_DEPENDS_ON_INHERITED_STYLE) &&
         style.get_box().clone_display() == Display::None
     {
         return true;
     }
 
-    if !style.flags.intersects(ComputedValueFlags::INHERITS_CONTENT) &&
+    if !style.flags.intersects(ComputedValueFlags::CONTENT_DEPENDS_ON_INHERITED_STYLE) &&
         style.ineffective_content_property()
     {
         return true;