Changeset 293565 in webkit

Timestamp:

Apr 27, 2022 10:32:05 PM (3 months ago)

Author:

Patrick Angle

Message:

Web Inspector: [Flexbox] <button> and <select> elements are appearing in list of Flex containers
​https://bugs.webkit.org/show_bug.cgi?id=239425

Reviewed by Devin Rousso.

Source/WebCore:

Added test cases to inspector/css/nodeLayoutContextTypeChanged.html.

• inspector/agents/InspectorCSSAgent.cpp:

(WebCore::InspectorCSSAgent::layoutContextTypeForRenderer):

LayoutTests:

• inspector/css/nodeLayoutContextTypeChanged-expected.txt:
• inspector/css/nodeLayoutContextTypeChanged.html:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt (modified) (2 diffs)
• LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/agents/InspectorCSSAgent.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2022-04-27  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: [Flexbox] `<button>` and `<select>` elements are appearing in list of Flex containers
+        https://bugs.webkit.org/show_bug.cgi?id=239425
+
+        Reviewed by Devin Rousso.
+
+        * inspector/css/nodeLayoutContextTypeChanged-expected.txt:
+        * inspector/css/nodeLayoutContextTypeChanged.html:
+
 2022-04-27  Karl Rackler  <rackler@apple.com>
 

trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged-expected.txt

@@ -1 +1 @@
 Tests for the CSS.nodeLayoutContextTypeChanged event.
+
 
 
@@ -23 +24 @@
 PASS: Layout context should now be `flex`.
 
+-- Running test case: CSS.nodeLayoutContextTypeChanged.NotFlex.SubmitInput
+PASS: Layout context should be `null`.
+
+-- Running test case: CSS.nodeLayoutContextTypeChanged.NotFlex.Select
+PASS: Layout context should be `null`.
+
+-- Running test case: CSS.nodeLayoutContextTypeChanged.NotFlex.Button
+PASS: Layout context should be `null`.
+

trunk/LayoutTests/inspector/css/nodeLayoutContextTypeChanged.html

@@ -114 +114 @@
     });
 
+    function addEnsureLayoutContextTypeTestCase({name, description, selector, expectedLayoutContextType})
+    {
+        addTestCase({name, description, selector, async domNodeHandler(domNode) {
+                InspectorTest.expectEqual(domNode.layoutContextType, expectedLayoutContextType, `Layout context should be \`${expectedLayoutContextType}\`.`);
+            }
+        });
+    }
+
+    addEnsureLayoutContextTypeTestCase({
+        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.SubmitInput",
+        description: "Make sure an `input` element of type `submit` is not considered a flex container.",
+        selector: "#flexSubmitInput",
+        expectedLayoutContextType: null,
+    });
+
+    addEnsureLayoutContextTypeTestCase({
+        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Select",
+        description: "Make sure a `select` element is not considered a flex container.",
+        selector: "#flexSelect",
+        expectedLayoutContextType: null,
+    });
+
+    addEnsureLayoutContextTypeTestCase({
+        name: "CSS.nodeLayoutContextTypeChanged.NotFlex.Button",
+        description: "Make sure a `button` is not considered a flex container.",
+        selector: "#flexButton",
+        expectedLayoutContextType: null,
+    });
+
     WI.domManager.requestDocument().then((doc) => {
         documentNode = doc;
@@ -156 +185 @@
         <div></div>
     </div>
+    
+    <input type="submit" id="flexSubmitInput" />
+    <select id="flexSelect"></select>
+    <button id="flexButton"></button>
 </body>
 </html>

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-04-27  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: [Flexbox] `<button>` and `<select>` elements are appearing in list of Flex containers
+        https://bugs.webkit.org/show_bug.cgi?id=239425
+
+        Reviewed by Devin Rousso.
+
+        Added test cases to inspector/css/nodeLayoutContextTypeChanged.html.
+
+        * inspector/agents/InspectorCSSAgent.cpp:
+        (WebCore::InspectorCSSAgent::layoutContextTypeForRenderer):
+
 2022-04-27  Sihui Liu  <sihui_liu@apple.com>
 

trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp

@@ -941 +941 @@
 std::optional<Protocol::CSS::LayoutContextType> InspectorCSSAgent::layoutContextTypeForRenderer(RenderObject* renderer)
 {
-    if (is<RenderFlexibleBox>(renderer))
+    if (auto* renderFlexibleBox = dynamicDowncast<RenderFlexibleBox>(renderer)) {
+        // Subclasses of RenderFlexibleBox (buttons, selection inputs, etc.) should not be considered flex containers,
+        // as it is an internal implementation detail.
+        if (renderFlexibleBox->isFlexibleBoxImpl())
+            return std::nullopt;
         return Protocol::CSS::LayoutContextType::Flex;
+    }
     if (is<RenderGrid>(renderer))
         return Protocol::CSS::LayoutContextType::Grid;