LibWeb: Implement CSS 'isolation' property

Author: https://github.com/Psychpsyo
Commit: 7757df5bb5
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3221
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -1440,6 +1440,12 @@ Optional<CSS::UserSelect> ComputedProperties::user_select() const
     return keyword_to_user_select(value.to_keyword());
 }
 
+Optional<CSS::Isolation> ComputedProperties::isolation() const
+{
+    auto const& value = property(CSS::PropertyID::Isolation);
+    return keyword_to_isolation(value.to_keyword());
+}
+
 Optional<CSS::MaskType> ComputedProperties::mask_type() const
 {
     auto const& value = property(CSS::PropertyID::MaskType);

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -160,6 +160,7 @@ public:
     Optional<CSS::UnicodeBidi> unicode_bidi() const;
     Optional<CSS::WritingMode> writing_mode() const;
     Optional<CSS::UserSelect> user_select() const;
+    Optional<CSS::Isolation> isolation() const;
 
     static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<CSS::Transformation> transformations() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -171,6 +171,7 @@ public:
     static CSS::UnicodeBidi unicode_bidi() { return CSS::UnicodeBidi::Normal; }
     static CSS::WritingMode writing_mode() { return CSS::WritingMode::HorizontalTb; }
     static CSS::UserSelect user_select() { return CSS::UserSelect::Auto; }
+    static CSS::Isolation isolation() { return CSS::Isolation::Auto; }
 
     // https://www.w3.org/TR/SVG/geometry.html
     static LengthPercentage cx() { return CSS::Length::make_px(0); }
@@ -426,6 +427,7 @@ public:
     CSS::UnicodeBidi unicode_bidi() const { return m_noninherited.unicode_bidi; }
     CSS::WritingMode writing_mode() const { return m_inherited.writing_mode; }
     CSS::UserSelect user_select() const { return m_noninherited.user_select; }
+    CSS::Isolation isolation() const { return m_noninherited.isolation; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -678,6 +680,7 @@ protected:
         CSS::ObjectPosition object_position { InitialValues::object_position() };
         CSS::UnicodeBidi unicode_bidi { InitialValues::unicode_bidi() };
         CSS::UserSelect user_select { InitialValues::user_select() };
+        CSS::Isolation isolation { InitialValues::isolation() };
 
         Optional<CSS::Transformation> rotate;
         Optional<CSS::Transformation> translate;
@@ -851,6 +854,7 @@ public:
     void set_unicode_bidi(CSS::UnicodeBidi value) { m_noninherited.unicode_bidi = value; }
     void set_writing_mode(CSS::WritingMode value) { m_inherited.writing_mode = value; }
     void set_user_select(CSS::UserSelect value) { m_noninherited.user_select = value; }
+    void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
 
     void set_fill(SVGPaint value) { m_inherited.fill = move(value); }
     void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }

Libraries/LibWeb/CSS/Enums.json

@@ -300,6 +300,10 @@
     "optimizespeed=pixelated",
     "optimizequality=smooth"
   ],
+  "isolation": [
+    "auto",
+    "isolate"
+  ],
   "justify-content": [
     "normal",
     "start",

Libraries/LibWeb/CSS/Properties.json

@@ -1684,6 +1684,14 @@
     ],
     "max-values": 1
   },
+  "isolation": {
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "isolation"
+    ]
+  },
   "justify-content": {
     "animation-type": "discrete",
     "inherited": false,

Libraries/LibWeb/Layout/Node.cpp

@@ -218,6 +218,11 @@ bool Node::establishes_stacking_context() const
     if (computed_values().mask().has_value() || computed_values().clip_path().has_value() || computed_values().mask_image())
         return true;
 
+    // https://drafts.fxtf.org/compositing/#propdef-isolation
+    // For CSS, setting isolation to isolate will turn the element into a stacking context.
+    if (computed_values().isolation() == CSS::Isolation::Isolate)
+        return true;
+
     return computed_values().opacity() < 1.0f;
 }
 
@@ -1008,6 +1013,9 @@ void NodeWithStyle::apply_style(const CSS::ComputedProperties& computed_style)
     if (auto user_select = computed_style.user_select(); user_select.has_value())
         computed_values.set_user_select(user_select.value());
 
+    if (auto isolation = computed_style.isolation(); isolation.has_value())
+        computed_values.set_isolation(isolation.value());
+
     propagate_style_to_anonymous_wrappers();
 }
 

Tests/LibWeb/Ref/expected/css-isolation.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background-color:green;
+  }
+</style>
+<div></div>

Tests/LibWeb/Ref/input/css-isolation.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/css-isolation.html" />
+<style>
+  .outer {
+    isolation:isolate;
+    position: absolute;
+  }
+  .inner {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div class="outer">
+    <div class="inner" style="background-color:red; position:relative; z-index:1;"></div>
+</div>
+<div class="outer">
+    <div class="inner" style="background-color:green;"></div>
+</div>

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt

@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '213'
+'length': '214'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -384,6 +384,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'inset-inline-end': 'auto'
 'insetInlineStart': 'auto'
 'inset-inline-start': 'auto'
+'isolation': 'auto'
 'justifyContent': 'normal'
 'justify-content': 'normal'
 'justifyItems': 'legacy'

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -141,78 +141,79 @@ All properties associated with getComputedStyle(document.body):
     "138": "inset-block-start",
     "139": "inset-inline-end",
     "140": "inset-inline-start",
-    "141": "justify-content",
+    "141": "isolation",
-    "142": "justify-items",
+    "142": "justify-content",
-    "143": "justify-self",
+    "143": "justify-items",
-    "144": "left",
+    "144": "justify-self",
-    "145": "margin-block-end",
+    "145": "left",
-    "146": "margin-block-start",
+    "146": "margin-block-end",
-    "147": "margin-bottom",
+    "147": "margin-block-start",
-    "148": "margin-inline-end",
+    "148": "margin-bottom",
-    "149": "margin-inline-start",
+    "149": "margin-inline-end",
-    "150": "margin-left",
+    "150": "margin-inline-start",
-    "151": "margin-right",
+    "151": "margin-left",
-    "152": "margin-top",
+    "152": "margin-right",
-    "153": "mask",
+    "153": "margin-top",
-    "154": "mask-image",
+    "154": "mask",
-    "155": "mask-type",
+    "155": "mask-image",
-    "156": "max-height",
+    "156": "mask-type",
-    "157": "max-inline-size",
+    "157": "max-height",
-    "158": "max-width",
+    "158": "max-inline-size",
-    "159": "min-height",
+    "159": "max-width",
-    "160": "min-inline-size",
+    "160": "min-height",
-    "161": "min-width",
+    "161": "min-inline-size",
-    "162": "object-fit",
+    "162": "min-width",
-    "163": "object-position",
+    "163": "object-fit",
-    "164": "opacity",
+    "164": "object-position",
-    "165": "order",
+    "165": "opacity",
-    "166": "outline-color",
+    "166": "order",
-    "167": "outline-offset",
+    "167": "outline-color",
-    "168": "outline-style",
+    "168": "outline-offset",
-    "169": "outline-width",
+    "169": "outline-style",
-    "170": "overflow-x",
+    "170": "outline-width",
-    "171": "overflow-y",
+    "171": "overflow-x",
-    "172": "padding-block-end",
+    "172": "overflow-y",
-    "173": "padding-block-start",
+    "173": "padding-block-end",
-    "174": "padding-bottom",
+    "174": "padding-block-start",
-    "175": "padding-inline-end",
+    "175": "padding-bottom",
-    "176": "padding-inline-start",
+    "176": "padding-inline-end",
-    "177": "padding-left",
+    "177": "padding-inline-start",
-    "178": "padding-right",
+    "178": "padding-left",
-    "179": "padding-top",
+    "179": "padding-right",
-    "180": "position",
+    "180": "padding-top",
-    "181": "r",
+    "181": "position",
-    "182": "right",
+    "182": "r",
-    "183": "rotate",
+    "183": "right",
-    "184": "row-gap",
+    "184": "rotate",
-    "185": "rx",
+    "185": "row-gap",
-    "186": "ry",
+    "186": "rx",
-    "187": "scale",
+    "187": "ry",
-    "188": "scrollbar-gutter",
+    "188": "scale",
-    "189": "scrollbar-width",
+    "189": "scrollbar-gutter",
-    "190": "stop-color",
+    "190": "scrollbar-width",
-    "191": "stop-opacity",
+    "191": "stop-color",
-    "192": "table-layout",
+    "192": "stop-opacity",
-    "193": "text-decoration-color",
+    "193": "table-layout",
-    "194": "text-decoration-style",
+    "194": "text-decoration-color",
-    "195": "text-decoration-thickness",
+    "195": "text-decoration-style",
-    "196": "text-overflow",
+    "196": "text-decoration-thickness",
-    "197": "top",
+    "197": "text-overflow",
-    "198": "transform",
+    "198": "top",
-    "199": "transform-box",
+    "199": "transform",
-    "200": "transform-origin",
+    "200": "transform-box",
-    "201": "transition-delay",
+    "201": "transform-origin",
-    "202": "transition-duration",
+    "202": "transition-delay",
-    "203": "transition-property",
+    "203": "transition-duration",
-    "204": "transition-timing-function",
+    "204": "transition-property",
-    "205": "translate",
+    "205": "transition-timing-function",
-    "206": "unicode-bidi",
+    "206": "translate",
-    "207": "user-select",
+    "207": "unicode-bidi",
-    "208": "vertical-align",
+    "208": "user-select",
-    "209": "width",
+    "209": "vertical-align",
-    "210": "x",
+    "210": "width",
-    "211": "y",
+    "211": "x",
-    "212": "z-index"
+    "212": "y",
+    "213": "z-index"
 }
 All properties associated with document.body.style by default:
 {}

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -139,6 +139,7 @@ inset-block-end: auto
 inset-block-start: auto
 inset-inline-end: auto
 inset-inline-start: auto
+isolation: auto
 justify-content: normal
 justify-items: legacy
 justify-self: auto