Selaa lähdekoodia

LibWeb: Make details and summary elements display:block in the UA style

This is the expected behavior per the HTML spec. Fixes an issue where
styling these elements wouldn't have the expected effect unless you also
set the display property.
Andreas Kling 11 kuukautta sitten
vanhempi
commit
3faff34bf6

+ 12 - 14
Tests/LibWeb/Layout/expected/details-closed.txt

@@ -1,24 +1,22 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
-      BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
-        InlineNode <details>
-      ListItemBox <summary> at (32,8) content-size 760x17 children: inline
-        frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
-            "I'm a summary"
-        TextNode <#text>
-        ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
-      BlockContainer <slot> at (8,25) content-size 784x0 children: not-inline
+      BlockContainer <details> at (8,8) content-size 784x17 children: not-inline
+        ListItemBox <summary> at (32,8) content-size 760x17 children: inline
+          frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
+              "I'm a summary"
+          TextNode <#text>
+          ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
+        BlockContainer <slot> at (8,25) content-size 784x0 children: not-inline
       BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
       BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
         TextNode <#text>
         TextNode <#text>
 
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
-      PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
-        InlinePaintable (InlineNode<DETAILS>)
-      PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
-        TextPaintable (TextNode<#text>)
-        MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
-      PaintableWithLines (BlockContainer<SLOT>) [8,25 784x0]
+      PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x17]
+        PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
+          TextPaintable (TextNode<#text>)
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
+        PaintableWithLines (BlockContainer<SLOT>) [8,25 784x0]
       PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]
       PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

+ 19 - 21
Tests/LibWeb/Layout/expected/details-open.txt

@@ -1,33 +1,31 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
-      BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
-        InlineNode <details>
-      ListItemBox <summary> at (32,8) content-size 760x17 children: inline
-        frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
-            "I'm a summary"
-        TextNode <#text>
-        ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
-      BlockContainer <slot> at (8,25) content-size 784x17 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        InlineNode <span>
-          frag 0 from TextNode start: 0, length: 10, rect: [8,25 82.3125x17] baseline: 13.296875
-              "I'm a node"
+      BlockContainer <details> at (8,8) content-size 784x34 children: not-inline
+        ListItemBox <summary> at (32,8) content-size 760x17 children: inline
+          frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
+              "I'm a summary"
+          TextNode <#text>
+          ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
+        BlockContainer <slot> at (8,25) content-size 784x17 children: inline
+          TextNode <#text>
+          TextNode <#text>
+          InlineNode <span>
+            frag 0 from TextNode start: 0, length: 10, rect: [8,25 82.3125x17] baseline: 13.296875
+                "I'm a node"
+            TextNode <#text>
           TextNode <#text>
           TextNode <#text>
-        TextNode <#text>
       BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
       BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
         TextNode <#text>
         TextNode <#text>
 
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
-      PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
-        InlinePaintable (InlineNode<DETAILS>)
-      PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
-        TextPaintable (TextNode<#text>)
-        MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
-      PaintableWithLines (BlockContainer<SLOT>) [8,25 784x17]
-        InlinePaintable (InlineNode<SPAN>)
+      PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x34]
+        PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
           TextPaintable (TextNode<#text>)
           TextPaintable (TextNode<#text>)
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
+        PaintableWithLines (BlockContainer<SLOT>) [8,25 784x17]
+          InlinePaintable (InlineNode<SPAN>)
+            TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]
       PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]

+ 19 - 0
Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt

@@ -0,0 +1,19 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x153 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x137 children: not-inline
+      BlockContainer <details> at (68,68) content-size 664x17 children: not-inline
+        ListItemBox <summary> at (92,68) content-size 640x17 children: inline
+          frag 0 from TextNode start: 0, length: 5, rect: [92,68 36.84375x17] baseline: 13.296875
+              "hello"
+          TextNode <#text>
+          ListItemMarkerBox <(anonymous)> at (68,68) content-size 12x17 children: not-inline
+        BlockContainer <slot> at (68,85) content-size 664x0 children: not-inline
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x153]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x137]
+      PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x137]
+        PaintableWithLines (ListItemBox<SUMMARY>) [92,68 640x17]
+          TextPaintable (TextNode<#text>)
+          MarkerPaintable (ListItemMarkerBox(anonymous)) [68,68 12x17]
+        PaintableWithLines (BlockContainer<SLOT>) [68,85 664x0]

+ 6 - 0
Tests/LibWeb/Layout/input/details-summary-default-ua-style.html

@@ -0,0 +1,6 @@
+<!doctype html><style>
+     details {
+        border: 10px solid black;
+        padding: 50px;
+      }
+</style><details><summary>hello

+ 5 - 1
Userland/Libraries/LibWeb/CSS/Default.css

@@ -801,10 +801,14 @@ input[type=image i][align=bottom i], object[align=bottom i] {
     vertical-align: bottom;
     vertical-align: bottom;
 }
 }
 
 
-/* 15.5.4 The details and summary elements
+/* 15.5.5 The details and summary elements
  * https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
  * https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
  */
  */
 
 
+details, summary {
+    display: block;
+}
+
 details > summary:first-of-type {
 details > summary:first-of-type {
     display: list-item;
     display: list-item;
     counter-increment: list-item 0;
     counter-increment: list-item 0;