Don't ignore block margins on the legend

Fixes #3929.

Author: zcorpan

source

@@ -112351,8 +112351,9 @@ legend[align=right i] {
    <li><p>The element is expected to be positioned in the inline direction as is normal for
    blocks (e.g., taking into account margins and the 'justify-self' property).</p></li>
 
-   <li><p>The used value of the element's margins in the block-flow direction are expected to be
-   zero.</p></li>
+   <li><p>The element's margins in the block-flow direction are expected to not collapse with the
+   margins of the 'fieldset' or the margins of descendants of the <span>anonymous fieldset content
+   box</span>.</p></li>
 
    <li><p>The element is expected to be positioned in the block-flow direction such that its border
    box is centered over the border on the block-start side of the 'fieldset'.</p></li>
@@ -112422,7 +112423,7 @@ legend[align=right i] {
 
   <div class="note">
    <figure>
-    <svg viewBox="0 0 400 200" width="400" height="200">
+    <svg viewBox="0 0 400 270" width="480" height="324">
      <title>Fieldset layout model</title>
 
      <defs>
@@ -112437,43 +112438,58 @@ legend[align=right i] {
      </defs>
 
      <!-- outer outline -->
-     <rect stroke-dasharray="6" stroke-width="1" stroke="black" width="304" height="104" x="48"
+     <rect stroke-dasharray="6" stroke-width="1" stroke="black" width="304" height="176" x="48"
      y="48" fill="none"/>
 
      <line marker-end="url(#arrow-blue)" x1="200" x2="200" y1="48" y2="20" stroke-width="2"
      stroke="blue"/>
-     <line marker-end="url(#arrow-blue)" x1="48" x2="20" y1="100" y2="100" stroke-width="2"
+     <line marker-end="url(#arrow-blue)" x1="48" x2="20" y1="136" y2="136" stroke-width="2"
      stroke="blue"/>
-     <line marker-end="url(#arrow-blue)" x1="352" x2="380" y1="100" y2="100" stroke-width="2"
+     <line marker-end="url(#arrow-blue)" x1="352" x2="380" y1="136" y2="136" stroke-width="2"
      stroke="blue"/>
-     <line marker-end="url(#arrow-blue)" x1="200" x2="200" y1="152" y2="180" stroke-width="2"
+     <line marker-end="url(#arrow-blue)" x1="200" x2="200" y1="224" y2="250" stroke-width="2"
      stroke="blue"/>
      <text x="210" y="35" font-size="12" font-family="sans-serif" font-style="normal"
      fill="blue">fieldset's margin</text>
 
      <!-- fieldset -->
-     <rect stroke-width="2" stroke="blue" width="300" height="75" x="50" y="75" fill="white"/>
+     <rect stroke-width="2" stroke="blue" width="300" height="116.5" x="50" y="105" fill="white"/>
 
      <!-- rendered legend -->
-     <rect stroke-width="2" stroke="red" width="85" height="50" x="75" y="50" fill="white"/>
-     <text x="95" y="75" dominant-baseline="central" fill="red" font-family="serif"
+     <rect stroke-width="2" stroke="red" width="85" height="60" x="100" y="75" fill="white"/>
+     <text x="120" y="105" dominant-baseline="central" fill="red" font-family="serif"
      font-style="normal">legend</text>
 
-     <line marker-end="url(#arrow-red)" x1="160" x2="340" y1="65" y2="65" stroke-width="2"
+     <!-- legend padding -->
+     <rect x="110" y="85" width="65" height="40" fill="none" stroke="#eee" stroke-width="18"/>
+     <text x="133" y="88" font-size="12" font-family="sans-serif" font-style="normal"
+     fill="gray">padding</text>
+
+     <line marker-end="url(#arrow-red)" x1="185" x2="325" y1="90" y2="90" stroke-width="2"
      stroke="red"/>
-     <text x="210" y="60" font-size="12" font-family="sans-serif" font-style="normal"
+     <text x="210" y="85" font-size="12" font-family="sans-serif" font-style="normal"
      fill="red">legend's margin</text>
 
-     <line marker-end="url(#arrow-red)" x1="75" x2="60" y1="65" y2="65" stroke-width="2"
+     <line marker-end="url(#arrow-red)" x1="100" x2="75" y1="90" y2="90" stroke-width="2"
+     stroke="red"/>
+     <line marker-end="url(#arrow-red)" x1="143" x2="143" y1="75" y2="60" stroke-width="2"
+     stroke="red"/>
+     <line marker-end="url(#arrow-red)" x1="143" x2="143" y1="135" y2="150" stroke-width="2"
      stroke="red"/>
 
+     <!-- fieldset padding -->
+     <rect x="60" y="171" width="280" height="40" fill="none" stroke="#eee" stroke-width="18"/>
+     <text x="297" y="174" font-size="12" font-family="sans-serif" font-style="normal"
+     fill="gray">padding</text>
+
      <!-- anonymous fieldset content box outline -->
-     <rect stroke-dasharray="6" stroke-width="1" stroke="black" width="296" height="46" x="52"
-     y="102" fill="none"/>
-     <text x="170" y="116" font-size="12" font-family="sans-serif" font-style="normal">anonymous
+     <rect stroke-dasharray="6" stroke-width="1" stroke="black" width="296" height="58" x="52"
+     y="161" fill="none"/>
+     <text x="170" y="156" font-size="12" font-family="sans-serif" font-style="normal">anonymous
      fieldset content  box</text>
-     <text x="75" y="125" dominant-baseline="central" fill="blue" font-family="serif"
+     <text x="70" y="191" dominant-baseline="central" fill="blue" font-family="serif"
      font-style="normal">content</text>
+
     </svg>
 
     <figcaption>The legend is rendered over the top border, and the top border area reserves