--- a/layout/reftests/forms/legend/reftest.list
+++ b/layout/reftests/forms/legend/reftest.list
@@ -1,4 +1,4 @@
 == legend.html legend-ref.html
 fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == shadow-dom.html shadow-dom-ref.html
 == 1273433.html 1273433-ref.html
-fails-if(styloVsGecko||stylo) == 1339287.html 1339287-ref.html
+== 1339287.html 1339287-ref.html

--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -351,16 +351,17 @@ CSS_KEY(khz, khz)
 CSS_KEY(landscape, landscape)
 CSS_KEY(large, large)
 CSS_KEY(larger, larger)
 CSS_KEY(last, last)
 CSS_KEY(last baseline, last_baseline) // only used for DevTools auto-completion
 CSS_KEY(layout, layout)
 CSS_KEY(left, left)
 CSS_KEY(legacy, legacy)
+CSS_KEY(legend, legend)
 CSS_KEY(lighten, lighten)
 CSS_KEY(lighter, lighter)
 CSS_KEY(line-through, line_through)
 CSS_KEY(linear, linear)
 CSS_KEY(lining-nums, lining_nums)
 CSS_KEY(list-item, list_item)
 CSS_KEY(local, local)
 CSS_KEY(logical, logical)

--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -711,16 +711,17 @@ nsCSSProps::GetStringValue(nsCSSCounterD
   }
 }
 
 /***************************************************************************/
 
 const KTableEntry nsCSSProps::kAdjustmentKTable[] = {
   { eCSSKeyword_none, StyleAdjustment::None },
   { eCSSKeyword_fieldset_content, StyleAdjustment::FieldsetContent },
+  { eCSSKeyword_legend, StyleAdjustment::Legend },
   { eCSSKeyword_UNKNOWN, -1 }
 };
 
 const KTableEntry nsCSSProps::kAnimationDirectionKTable[] = {
   { eCSSKeyword_normal, static_cast<uint32_t>(dom::PlaybackDirection::Normal) },
   { eCSSKeyword_reverse, static_cast<uint32_t>(dom::PlaybackDirection::Reverse) },
   { eCSSKeyword_alternate, static_cast<uint32_t>(dom::PlaybackDirection::Alternate) },
   { eCSSKeyword_alternate_reverse, static_cast<uint32_t>(dom::PlaybackDirection::Alternate_reverse) },

--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -17,16 +17,18 @@
 namespace mozilla {
 
 // -moz-adjustment
 enum class StyleAdjustment : uint8_t {
   // No special adjustment applied.
   None,
   // Apply adjustment for ::-moz-fieldset-content.
   FieldsetContent,
+  // Apply adjustment for <legend> element.
+  Legend,
 };
 
 // Basic shapes
 enum class StyleBasicShapeType : uint8_t {
   Polygon,
   Circle,
   Ellipse,
   Inset,

--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -253,16 +253,20 @@ listing {
 xmp, pre, plaintext {
   display: block;
   font-family: -moz-fixed;
   white-space: pre;
   margin-block-start: 1em;
   margin-block-end: 1em;
 }
 
+legend {
+  -moz-adjustment: legend;
+}
+
 /* tables */
 
 table {
   display: table;
   border-spacing: 2px;
   border-collapse: separate;
   /* XXXldb do we want this if we're border-collapse:collapse ? */
   box-sizing: border-box;

--- a/servo/components/style/properties/longhand/box.mako.rs
+++ b/servo/components/style/properties/longhand/box.mako.rs
@@ -195,17 +195,17 @@
 </%helpers:longhand>
 
 ${helpers.single_keyword("-moz-top-layer", "none top",
                          gecko_constant_prefix="NS_STYLE_TOP_LAYER",
                          gecko_ffi_name="mTopLayer", need_clone=True,
                          products="gecko", animation_value_type="none", internal=True,
                          spec="Internal (not web-exposed)")}
 
-${helpers.single_keyword("-moz-adjustment", "none fieldset-content",
+${helpers.single_keyword("-moz-adjustment", "none fieldset-content legend",
                          gecko_enum_prefix="StyleAdjustment",
                          gecko_ffi_name="mAdjustment", need_clone=True,
                          products="gecko", animation_value_type="none", internal=True,
                          spec="Internal (not web-exposed)")}
 
 ${helpers.single_keyword("position", "static absolute relative fixed sticky",
                          animation_value_type="discrete",
                          flags="CREATES_STACKING_CONTEXT ABSPOS_CB",

--- a/servo/components/style/style_adjuster.rs
+++ b/servo/components/style/style_adjuster.rs
@@ -361,16 +361,31 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
             display::inline_grid => Some(display::grid),
             _ => None,
         };
         if let Some(new_display) = new_display {
             self.style.mutate_box().set_display(new_display);
         }
     }
 
+    /// This is for computing display value of <legend> to block when
+    /// it has any value other than `none`.
+    ///
+    /// See https://github.com/whatwg/html/pull/3042
+    #[cfg(feature = "gecko")]
+    fn adjust_for_legend(&mut self) {
+        match self.style.get_box().clone__moz_adjustment() {
+            adjustment::legend => {},
+            _ => return,
+        }
+        if self.style.get_box().clone_display() != display::none {
+            self.style.mutate_box().set_display(display::block);
+        }
+    }
+
     /// -moz-center, -moz-left and -moz-right are used for HTML's alignment.
     ///
     /// This is covering the <div align="right"><table>...</table></div> case.
     ///
     /// In this case, we don't want to inherit the text alignment into the
     /// table.
     #[cfg(feature = "gecko")]
     fn adjust_for_table_text_align(&mut self) {
@@ -557,16 +572,17 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
         layout_parent_style: &ComputedValues,
         flags: CascadeFlags,
     ) {
         self.adjust_for_visited(flags);
         #[cfg(feature = "gecko")]
         {
             self.adjust_for_prohibited_display_contents(flags);
             self.adjust_for_fieldset_content(layout_parent_style);
+            self.adjust_for_legend();
         }
         self.adjust_for_top_layer();
         self.blockify_if_necessary(layout_parent_style, flags);
         self.adjust_for_position();
         self.adjust_for_overflow();
         #[cfg(feature = "gecko")]
         {
             self.adjust_for_table_text_align();