Merge branch 'master' into ugo/docs/01-04-2020

134 files changed, 3956 insertions, 266 deletions

diff --git a/components/layout_2020/flow/inline.rs b/components/layout_2020/flow/inline.rs
index 6588a6a3137..040b4c3f3cf 100644
--- a/components/layout_2020/flow/inline.rs
+++ b/components/layout_2020/flow/inline.rs
@@ -206,7 +206,7 @@ impl InlineFormattingContext {
                 }
             }
 
-            fn add_lengthpercentage(&mut self, lp: LengthPercentage) {
+            fn add_lengthpercentage(&mut self, lp: &LengthPercentage) {
                 if let Some(l) = lp.to_length() {
                     self.add_length(l);
                 }
@@ -421,13 +421,11 @@ impl InlineBox {
         ifc: &mut InlineFormattingContextState<'box_tree, '_, '_>,
     ) -> PartialInlineBoxFragment<'box_tree> {
         let style = self.style.clone();
-        let cbis = ifc.containing_block.inline_size;
-        let mut padding = style.padding().percentages_relative_to(cbis);
-        let mut border = style.border_width();
-        let mut margin = style
-            .margin()
-            .percentages_relative_to(cbis)
-            .auto_is(Length::zero);
+        let pbm = style.padding_border_margin(&ifc.containing_block);
+        let mut padding = pbm.padding;
+        let mut border = pbm.border;
+        let mut margin = pbm.margin.auto_is(Length::zero);
+
         if self.first_fragment {
             ifc.inline_position += padding.inline_start + border.inline_start + margin.inline_start;
         } else {
@@ -530,18 +528,12 @@ fn layout_atomic(
     ifc: &mut InlineFormattingContextState,
     atomic: &IndependentFormattingContext,
 ) {
-    let cbis = ifc.containing_block.inline_size;
-    let padding = atomic.style.padding().percentages_relative_to(cbis);
-    let border = atomic.style.border_width();
-    let margin = atomic
-        .style
-        .margin()
-        .percentages_relative_to(cbis)
-        .auto_is(Length::zero);
-    let pbm = &(&padding + &border) + &margin;
-    ifc.inline_position += pbm.inline_start;
+    let pbm = atomic.style.padding_border_margin(&ifc.containing_block);
+    let margin = pbm.margin.auto_is(Length::zero);
+    let pbm_sums = &(&pbm.padding + &pbm.border) + &margin;
+    ifc.inline_position += pbm_sums.inline_start;
     let mut start_corner = Vec2 {
-        block: pbm.block_start,
+        block: pbm_sums.block_start,
         inline: ifc.inline_position - ifc.current_nesting_level.inline_start,
     };
     if atomic.style.clone_position().is_relative() {
@@ -550,7 +542,8 @@ fn layout_atomic(
 
     let fragment = match atomic.as_replaced() {
         Ok(replaced) => {
-            let size = replaced.used_size_as_if_inline_element(ifc.containing_block, &atomic.style);
+            let size =
+                replaced.used_size_as_if_inline_element(ifc.containing_block, &atomic.style, &pbm);
             let fragments = replaced.make_fragments(&atomic.style, size.clone());
             let content_rect = Rect { start_corner, size };
             BoxFragment::new(
@@ -558,30 +551,27 @@ fn layout_atomic(
                 atomic.style.clone(),
                 fragments,
                 content_rect,
-                padding,
-                border,
+                pbm.padding,
+                pbm.border,
                 margin,
                 CollapsedBlockMargins::zero(),
             )
         },
         Err(non_replaced) => {
-            let box_size = atomic.style.box_size();
+            let box_size = atomic.style.content_box_size(&ifc.containing_block, &pbm);
             let max_box_size = atomic
                 .style
-                .max_box_size()
-                .percentages_relative_to(ifc.containing_block);
+                .content_max_box_size(&ifc.containing_block, &pbm);
             let min_box_size = atomic
                 .style
-                .min_box_size()
-                .percentages_relative_to(ifc.containing_block)
+                .content_min_box_size(&ifc.containing_block, &pbm)
                 .auto_is(Length::zero);
 
             // https://drafts.csswg.org/css2/visudet.html#inlineblock-width
-            let tentative_inline_size =
-                box_size.inline.percentage_relative_to(cbis).auto_is(|| {
-                    let available_size = cbis - pbm.inline_sum();
-                    atomic.content_sizes.shrink_to_fit(available_size)
-                });
+            let tentative_inline_size = box_size.inline.auto_is(|| {
+                let available_size = ifc.containing_block.inline_size - pbm_sums.inline_sum();
+                atomic.content_sizes.shrink_to_fit(available_size)
+            });
 
             // https://drafts.csswg.org/css2/visudet.html#min-max-widths
             // In this case “applying the rules above again” with a non-auto inline-size
@@ -589,12 +579,9 @@ fn layout_atomic(
             let inline_size = tentative_inline_size
                 .clamp_between_extremums(min_box_size.inline, max_box_size.inline);
 
-            let block_size = box_size
-                .block
-                .maybe_percentage_relative_to(ifc.containing_block.block_size.non_auto());
             let containing_block_for_children = ContainingBlock {
                 inline_size,
-                block_size,
+                block_size: box_size.block,
                 style: &atomic.style,
             };
             assert_eq!(
@@ -613,7 +600,9 @@ fn layout_atomic(
             );
 
             // https://drafts.csswg.org/css2/visudet.html#block-root-margin
-            let tentative_block_size = block_size.auto_is(|| independent_layout.content_block_size);
+            let tentative_block_size = box_size
+                .block
+                .auto_is(|| independent_layout.content_block_size);
 
             // https://drafts.csswg.org/css2/visudet.html#min-max-heights
             // In this case “applying the rules above again” with a non-auto block-size
@@ -633,18 +622,18 @@ fn layout_atomic(
                 atomic.style.clone(),
                 independent_layout.fragments,
                 content_rect,
-                padding,
-                border,
+                pbm.padding,
+                pbm.border,
                 margin,
                 CollapsedBlockMargins::zero(),
             )
         },
     };
 
-    ifc.inline_position += pbm.inline_end + fragment.content_rect.size.inline;
+    ifc.inline_position += pbm_sums.inline_end + fragment.content_rect.size.inline;
     ifc.current_nesting_level
         .max_block_size_of_fragments_so_far
-        .max_assign(pbm.block_sum() + fragment.content_rect.size.block);
+        .max_assign(pbm_sums.block_sum() + fragment.content_rect.size.block);
     ifc.current_nesting_level
         .fragments_so_far
         .push(Fragment::Box(fragment));
diff --git a/components/layout_2020/flow/mod.rs b/components/layout_2020/flow/mod.rs
index 63e96eaef2a..33bba78de96 100644
--- a/components/layout_2020/flow/mod.rs
+++ b/components/layout_2020/flow/mod.rs
@@ -14,7 +14,7 @@ use crate::fragments::{CollapsedBlockMargins, CollapsedMargin, Fragment};
 use crate::geom::flow_relative::{Rect, Sides, Vec2};
 use crate::positioned::{AbsolutelyPositionedBox, PositioningContext};
 use crate::replaced::ReplacedContent;
-use crate::style_ext::ComputedValuesExt;
+use crate::style_ext::{ComputedValuesExt, PaddingBorderMargin};
 use crate::ContainingBlock;
 use rayon::iter::{IndexedParallelIterator, IntoParallelRefIterator, ParallelIterator};
 use rayon_croissant::ParallelIteratorExt;
@@ -350,40 +350,27 @@ fn layout_in_flow_non_replaced_block_level(
     tree_rank: usize,
     float_context: Option<&mut FloatContext>,
 ) -> BoxFragment {
-    let cbis = containing_block.inline_size;
-    let padding = style.padding().percentages_relative_to(cbis);
-    let border = style.border_width();
-    let margin = style.margin().percentages_relative_to(cbis);
-    let pb = &padding + &border;
-    let pb_inline_sum = pb.inline_sum();
-
-    let box_size = style.box_size().percentages_relative_to(containing_block);
-    let max_box_size = style
-        .max_box_size()
-        .percentages_relative_to(containing_block);
+    let pbm = style.padding_border_margin(containing_block);
+    let box_size = style.content_box_size(containing_block, &pbm);
+    let max_box_size = style.content_max_box_size(containing_block, &pbm);
     let min_box_size = style
-        .min_box_size()
-        .percentages_relative_to(containing_block)
+        .content_min_box_size(containing_block, &pbm)
         .auto_is(Length::zero);
 
     // https://drafts.csswg.org/css2/visudet.html#min-max-widths
     let solve_inline_margins = |inline_size| {
-        solve_inline_margins_for_in_flow_block_level(
-            containing_block,
-            pb_inline_sum,
-            margin.inline_start,
-            margin.inline_end,
-            inline_size,
-        )
+        solve_inline_margins_for_in_flow_block_level(containing_block, &pbm, inline_size)
     };
     let (mut inline_size, mut inline_margins) =
         if let Some(inline_size) = box_size.inline.non_auto() {
             (inline_size, solve_inline_margins(inline_size))
         } else {
-            let margin_inline_start = margin.inline_start.auto_is(Length::zero);
-            let margin_inline_end = margin.inline_end.auto_is(Length::zero);
-            let margin_inline_sum = margin_inline_start + margin_inline_end;
-            let inline_size = cbis - pb_inline_sum - margin_inline_sum;
+            let margin_inline_start = pbm.margin.inline_start.auto_is(Length::zero);
+            let margin_inline_end = pbm.margin.inline_end.auto_is(Length::zero);
+            let inline_size = containing_block.inline_size -
+                pbm.padding_border_sums.inline -
+                margin_inline_start -
+                margin_inline_end;
             (inline_size, (margin_inline_start, margin_inline_end))
         };
     if let Some(max_inline_size) = max_box_size.inline {
@@ -400,8 +387,8 @@ fn layout_in_flow_non_replaced_block_level(
     let margin = Sides {
         inline_start: inline_margins.0,
         inline_end: inline_margins.1,
-        block_start: margin.block_start.auto_is(Length::zero),
-        block_end: margin.block_end.auto_is(Length::zero),
+        block_start: pbm.margin.block_start.auto_is(Length::zero),
+        block_end: pbm.margin.block_end.auto_is(Length::zero),
     };
 
     // https://drafts.csswg.org/css2/visudet.html#min-max-heights
@@ -427,8 +414,10 @@ fn layout_in_flow_non_replaced_block_level(
     let mut content_block_size;
     match block_level_kind {
         NonReplacedContents::SameFormattingContextBlock(contents) => {
-            let this_start_margin_can_collapse_with_children = pb.block_start == Length::zero();
-            let this_end_margin_can_collapse_with_children = pb.block_end == Length::zero() &&
+            let start_margin_can_collapse_with_children = pbm.padding.block_start == Length::zero() &&
+                pbm.border.block_start == Length::zero();
+            let end_margin_can_collapse_with_children = pbm.padding.block_end == Length::zero() &&
+                pbm.border.block_end == Length::zero() &&
                 block_size == LengthOrAuto::Auto &&
                 min_box_size.block == Length::zero();
 
@@ -438,13 +427,13 @@ fn layout_in_flow_non_replaced_block_level(
                 &containing_block_for_children,
                 tree_rank,
                 float_context,
-                CollapsibleWithParentStartMargin(this_start_margin_can_collapse_with_children),
+                CollapsibleWithParentStartMargin(start_margin_can_collapse_with_children),
             );
             fragments = flow_layout.fragments;
             content_block_size = flow_layout.content_block_size;
             let mut collapsible_margins_in_children = flow_layout.collapsible_margins_in_children;
 
-            if this_start_margin_can_collapse_with_children {
+            if start_margin_can_collapse_with_children {
                 block_margins_collapsed_with_children
                     .start
                     .adjoin_assign(&collapsible_margins_in_children.start);
@@ -457,7 +446,7 @@ fn layout_in_flow_non_replaced_block_level(
                         ));
                 }
             }
-            if this_end_margin_can_collapse_with_children {
+            if end_margin_can_collapse_with_children {
                 block_margins_collapsed_with_children
                     .end
                     .adjoin_assign(&collapsible_margins_in_children.end);
@@ -465,8 +454,8 @@ fn layout_in_flow_non_replaced_block_level(
                 content_block_size += collapsible_margins_in_children.end.solve();
             }
             block_margins_collapsed_with_children.collapsed_through =
-                this_start_margin_can_collapse_with_children &&
-                    this_end_margin_can_collapse_with_children &&
+                start_margin_can_collapse_with_children &&
+                    end_margin_can_collapse_with_children &&
                     collapsible_margins_in_children.collapsed_through;
         },
         NonReplacedContents::EstablishesAnIndependentFormattingContext(non_replaced) => {
@@ -485,8 +474,8 @@ fn layout_in_flow_non_replaced_block_level(
     });
     let content_rect = Rect {
         start_corner: Vec2 {
-            block: pb.block_start,
-            inline: pb.inline_start + margin.inline_start,
+            block: pbm.padding.block_start + pbm.border.block_start,
+            inline: pbm.padding.inline_start + pbm.border.inline_start + margin.inline_start,
         },
         size: Vec2 {
             block: block_size,
@@ -498,8 +487,8 @@ fn layout_in_flow_non_replaced_block_level(
         style.clone(),
         fragments,
         content_rect,
-        padding,
-        border,
+        pbm.padding,
+        pbm.border,
         margin,
         block_margins_collapsed_with_children,
     )
@@ -514,32 +503,22 @@ fn layout_in_flow_replaced_block_level<'a>(
     style: &Arc<ComputedValues>,
     replaced: &ReplacedContent,
 ) -> BoxFragment {
-    let size = replaced.used_size_as_if_inline_element(containing_block, style);
+    let pbm = style.padding_border_margin(containing_block);
+    let size = replaced.used_size_as_if_inline_element(containing_block, style, &pbm);
 
-    let cbis = containing_block.inline_size;
-    let padding = style.padding().percentages_relative_to(cbis);
-    let border = style.border_width();
-    let computed_margin = style.margin().percentages_relative_to(cbis);
-    let pb = &padding + &border;
-
-    let (margin_inline_start, margin_inline_end) = solve_inline_margins_for_in_flow_block_level(
-        containing_block,
-        pb.inline_sum(),
-        computed_margin.inline_start,
-        computed_margin.inline_end,
-        size.inline,
-    );
+    let (margin_inline_start, margin_inline_end) =
+        solve_inline_margins_for_in_flow_block_level(containing_block, &pbm, size.inline);
     let margin = Sides {
         inline_start: margin_inline_start,
         inline_end: margin_inline_end,
-        block_start: computed_margin.block_start.auto_is(Length::zero),
-        block_end: computed_margin.block_end.auto_is(Length::zero),
+        block_start: pbm.margin.block_start.auto_is(Length::zero),
+        block_end: pbm.margin.block_end.auto_is(Length::zero),
     };
     let fragments = replaced.make_fragments(style, size.clone());
     let content_rect = Rect {
         start_corner: Vec2 {
-            block: pb.block_start,
-            inline: pb.inline_start + margin.inline_start,
+            block: pbm.padding.block_start + pbm.border.block_start,
+            inline: pbm.padding.inline_start + pbm.border.inline_start + margin.inline_start,
         },
         size,
     };
@@ -549,8 +528,8 @@ fn layout_in_flow_replaced_block_level<'a>(
         style.clone(),
         fragments,
         content_rect,
-        padding,
-        border,
+        pbm.padding,
+        pbm.border,
         margin,
         block_margins_collapsed_with_children,
     )
@@ -558,15 +537,13 @@ fn layout_in_flow_replaced_block_level<'a>(
 
 fn solve_inline_margins_for_in_flow_block_level(
     containing_block: &ContainingBlock,
-    padding_border_inline_sum: Length,
-    computed_margin_inline_start: LengthOrAuto,
-    computed_margin_inline_end: LengthOrAuto,
+    pbm: &PaddingBorderMargin,
     inline_size: Length,
 ) -> (Length, Length) {
-    let inline_margins = containing_block.inline_size - padding_border_inline_sum - inline_size;
-    match (computed_margin_inline_start, computed_margin_inline_end) {
-        (LengthOrAuto::Auto, LengthOrAuto::Auto) => (inline_margins / 2., inline_margins / 2.),
-        (LengthOrAuto::Auto, LengthOrAuto::LengthPercentage(end)) => (inline_margins - end, end),
-        (LengthOrAuto::LengthPercentage(start), _) => (start, inline_margins - start),
+    let available = containing_block.inline_size - pbm.padding_border_sums.inline - inline_size;
+    match (pbm.margin.inline_start, pbm.margin.inline_end) {
+        (LengthOrAuto::Auto, LengthOrAuto::Auto) => (available / 2., available / 2.),
+        (LengthOrAuto::Auto, LengthOrAuto::LengthPercentage(end)) => (available - end, end),
+        (LengthOrAuto::LengthPercentage(start), _) => (start, available - start),
     }
 }
diff --git a/components/layout_2020/geom.rs b/components/layout_2020/geom.rs
index 5499836c004..5ec5bc78bf3 100644
--- a/components/layout_2020/geom.rs
+++ b/components/layout_2020/geom.rs
@@ -7,8 +7,8 @@ use std::fmt;
 use std::ops::{Add, AddAssign, Sub};
 use style::logical_geometry::{BlockFlowDirection, InlineBaseDirection};
 use style::logical_geometry::{PhysicalCorner, WritingMode};
-use style::values::computed::{Length, LengthOrAuto, LengthPercentage, LengthPercentageOrAuto};
-use style::values::generics::length::MaxSize;
+use style::values::computed::{Length, LengthPercentage};
+use style::values::generics::length::GenericLengthPercentageOrAuto as AutoOr;
 use style::Zero;
 use style_traits::CSSPixel;
 
@@ -16,6 +16,8 @@ pub type PhysicalPoint<U> = euclid::Point2D<U, CSSPixel>;
 pub type PhysicalSize<U> = euclid::Size2D<U, CSSPixel>;
 pub type PhysicalRect<U> = euclid::Rect<U, CSSPixel>;
 pub type PhysicalSides<U> = euclid::SideOffsets2D<U, CSSPixel>;
+pub type LengthOrAuto = AutoOr<Length>;
+pub type LengthPercentageOrAuto<'a> = AutoOr<&'a LengthPercentage>;
 
 pub(crate) mod flow_relative {
     #[derive(Clone, Serialize)]
@@ -107,7 +109,7 @@ impl flow_relative::Vec2<LengthOrAuto> {
     }
 }
 
-impl flow_relative::Vec2<LengthPercentageOrAuto> {
+impl flow_relative::Vec2<LengthPercentageOrAuto<'_>> {
     pub fn percentages_relative_to(
         &self,
         containing_block: &ContainingBlock,
@@ -123,24 +125,18 @@ impl flow_relative::Vec2<LengthPercentageOrAuto> {
     }
 }
 
-impl flow_relative::Vec2<MaxSize<LengthPercentage>> {
+impl flow_relative::Vec2<Option<&'_ LengthPercentage>> {
     pub fn percentages_relative_to(
         &self,
         containing_block: &ContainingBlock,
     ) -> flow_relative::Vec2<Option<Length>> {
         flow_relative::Vec2 {
-            inline: match self.inline {
-                MaxSize::None => None,
-                MaxSize::LengthPercentage(ref lp) => {
-                    Some(lp.percentage_relative_to(containing_block.inline_size))
-                },
-            },
-            block: match self.block {
-                MaxSize::None => None,
-                MaxSize::LengthPercentage(ref lp) => {
-                    lp.maybe_percentage_relative_to(containing_block.block_size.non_auto())
-                },
-            },
+            inline: self
+                .inline
+                .map(|lp| lp.percentage_relative_to(containing_block.inline_size)),
+            block: self.block.and_then(|lp| {
+                lp.maybe_percentage_relative_to(containing_block.block_size.non_auto())
+            }),
         }
     }
 }
@@ -280,13 +276,13 @@ impl<T> flow_relative::Sides<T> {
     }
 }
 
-impl flow_relative::Sides<LengthPercentage> {
+impl flow_relative::Sides<&'_ LengthPercentage> {
     pub fn percentages_relative_to(&self, basis: Length) -> flow_relative::Sides<Length> {
         self.map(|s| s.percentage_relative_to(basis))
     }
 }
 
-impl flow_relative::Sides<LengthPercentageOrAuto> {
+impl flow_relative::Sides<LengthPercentageOrAuto<'_>> {
     pub fn percentages_relative_to(&self, basis: Length) -> flow_relative::Sides<LengthOrAuto> {
         self.map(|s| s.percentage_relative_to(basis))
     }
diff --git a/components/layout_2020/positioned.rs b/components/layout_2020/positioned.rs
index 2ca2376726a..899b2b39e61 100644
--- a/components/layout_2020/positioned.rs
+++ b/components/layout_2020/positioned.rs
@@ -8,6 +8,7 @@ use crate::dom_traversal::{Contents, NodeExt};
 use crate::formatting_contexts::IndependentFormattingContext;
 use crate::fragments::{BoxFragment, CollapsedBlockMargins, Fragment};
 use crate::geom::flow_relative::{Rect, Sides, Vec2};
+use crate::geom::{LengthOrAuto, LengthPercentageOrAuto};
 use crate::sizing::ContentSizesRequest;
 use crate::style_ext::{ComputedValuesExt, DisplayInside};
 use crate::{ContainingBlock, DefiniteContainingBlock};
@@ -16,7 +17,7 @@ use rayon_croissant::ParallelIteratorExt;
 use servo_arc::Arc;
 use style::computed_values::position::T as Position;
 use style::properties::ComputedValues;
-use style::values::computed::{Length, LengthOrAuto, LengthPercentage, LengthPercentageOrAuto};
+use style::values::computed::{Length, LengthPercentage};
 use style::values::specified::text::TextDecorationLine;
 use style::Zero;
 
@@ -112,29 +113,34 @@ impl AbsolutelyPositionedBox {
                 (None, None) => AbsoluteBoxOffsets::StaticStart {
                     start: initial_static_start,
                 },
-                (Some(start), Some(end)) => AbsoluteBoxOffsets::Both { start, end },
-                (None, Some(end)) => AbsoluteBoxOffsets::End { end },
-                (Some(start), None) => AbsoluteBoxOffsets::Start { start },
+                (Some(start), Some(end)) => AbsoluteBoxOffsets::Both {
+                    start: start.clone(),
+                    end: end.clone(),
+                },
+                (None, Some(end)) => AbsoluteBoxOffsets::End { end: end.clone() },
+                (Some(start), None) => AbsoluteBoxOffsets::Start {
+                    start: start.clone(),
+                },
             }
         }
 
         let box_offsets = self.contents.style.box_offsets();
         HoistedAbsolutelyPositionedBox {
-            absolutely_positioned_box: self,
             tree_rank,
             box_offsets: Vec2 {
                 inline: absolute_box_offsets(
                     initial_start_corner.inline,
-                    box_offsets.inline_start.clone(),
-                    box_offsets.inline_end.clone(),
+                    box_offsets.inline_start,
+                    box_offsets.inline_end,
                 ),
                 block: absolute_box_offsets(
                     initial_start_corner.block,
-                    box_offsets.block_start.clone(),
-                    box_offsets.block_end.clone(),
+                    box_offsets.block_start,
+                    box_offsets.block_end,
                 ),
             },
             fragment: ArcRefCell::new(None),
+            absolutely_positioned_box: self,
         }
     }
 }
@@ -405,9 +411,10 @@ impl HoistedAbsolutelyPositionedBox {
         for_nearest_containing_block_for_all_descendants: &mut Vec<HoistedAbsolutelyPositionedBox>,
         containing_block: &DefiniteContainingBlock,
     ) -> BoxFragment {
-        let style = &self.absolutely_positioned_box.contents.style;
         let cbis = containing_block.size.inline;
         let cbbs = containing_block.size.block;
+        let style = &self.absolutely_positioned_box.contents.style;
+        let pbm = style.padding_border_margin(&containing_block.into());
 
         let size;
         let replaced_used_size;
@@ -415,45 +422,37 @@ impl HoistedAbsolutelyPositionedBox {
             Ok(replaced) => {
                 // https://drafts.csswg.org/css2/visudet.html#abs-replaced-width
                 // https://drafts.csswg.org/css2/visudet.html#abs-replaced-height
-                let u = replaced.used_size_as_if_inline_element(&containing_block.into(), style);
+                let used_size =
+                    replaced.used_size_as_if_inline_element(&containing_block.into(), style, &pbm);
                 size = Vec2 {
-                    inline: LengthOrAuto::LengthPercentage(u.inline),
-                    block: LengthOrAuto::LengthPercentage(u.block),
+                    inline: LengthOrAuto::LengthPercentage(used_size.inline),
+                    block: LengthOrAuto::LengthPercentage(used_size.block),
                 };
-                replaced_used_size = Some(u);
+                replaced_used_size = Some(used_size);
             },
             Err(_non_replaced) => {
-                let box_size = style.box_size();
-                size = Vec2 {
-                    inline: box_size.inline.percentage_relative_to(cbis),
-                    block: box_size.block.percentage_relative_to(cbbs),
-                };
+                size = style.content_box_size(&containing_block.into(), &pbm);
                 replaced_used_size = None;
             },
         }
 
-        let padding = style.padding().percentages_relative_to(cbis);
-        let border = style.border_width();
-        let computed_margin = style.margin().percentages_relative_to(cbis);
-        let pb = &padding + &border;
-
         let inline_axis = solve_axis(
             cbis,
-            pb.inline_sum(),
-            computed_margin.inline_start.clone(),
-            computed_margin.inline_end.clone(),
+            pbm.padding_border_sums.inline,
+            pbm.margin.inline_start,
+            pbm.margin.inline_end,
             /* avoid_negative_margin_start */ true,
-            self.box_offsets.inline.clone(),
+            &self.box_offsets.inline,
             size.inline,
         );
 
         let block_axis = solve_axis(
             cbis,
-            pb.block_sum(),
-            computed_margin.block_start.clone(),
-            computed_margin.block_end.clone(),
+            pbm.padding_border_sums.block,
+            pbm.margin.block_start,
+            pbm.margin.block_end,
             /* avoid_negative_margin_start */ false,
-            self.box_offsets.block.clone(),
+            &self.box_offsets.block,
             size.block,
         );
 
@@ -483,14 +482,14 @@ impl HoistedAbsolutelyPositionedBox {
                         // https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width
                         // https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-height
                         let inline_size = inline_axis.size.auto_is(|| {
-                            let available_size = match inline_axis.anchor {
-                                Anchor::Start(start) => {
-                                    cbis - start - pb.inline_sum() - margin.inline_sum()
-                                },
-                                Anchor::End(end) => {
-                                    cbis - end - pb.inline_sum() - margin.inline_sum()
-                                },
+                            let anchor = match inline_axis.anchor {
+                                Anchor::Start(start) => start,
+                                Anchor::End(end) => end,
                             };
+                            let available_size = cbis -
+                                anchor -
+                                pbm.padding_border_sums.inline -
+                                margin.inline_sum();
                             self.absolutely_positioned_box
                                 .contents
                                 .content_sizes
@@ -526,6 +525,7 @@ impl HoistedAbsolutelyPositionedBox {
                     },
                 };
 
+                let pb = &pbm.padding + &pbm.border;
                 let inline_start = match inline_axis.anchor {
                     Anchor::Start(start) => start + pb.inline_start + margin.inline_start,
                     Anchor::End(end) => {
@@ -550,8 +550,8 @@ impl HoistedAbsolutelyPositionedBox {
                     style.clone(),
                     fragments,
                     content_rect,
-                    padding,
-                    border,
+                    pbm.padding,
+                    pbm.border,
                     margin,
                     CollapsedBlockMargins::zero(),
                 )
@@ -589,12 +589,12 @@ fn solve_axis(
     computed_margin_start: LengthOrAuto,
     computed_margin_end: LengthOrAuto,
     avoid_negative_margin_start: bool,
-    box_offsets: AbsoluteBoxOffsets,
+    box_offsets: &AbsoluteBoxOffsets,
     size: LengthOrAuto,
 ) -> AxisResult {
     match box_offsets {
         AbsoluteBoxOffsets::StaticStart { start } => AxisResult {
-            anchor: Anchor::Start(start),
+            anchor: Anchor::Start(*start),
             size,
             margin_start: computed_margin_start.auto_is(Length::zero),
             margin_end: computed_margin_end.auto_is(Length::zero),
diff --git a/components/layout_2020/replaced.rs b/components/layout_2020/replaced.rs
index 1d7557b0641..334ff44a665 100644
--- a/components/layout_2020/replaced.rs
+++ b/components/layout_2020/replaced.rs
@@ -8,7 +8,7 @@ use crate::fragments::{DebugId, Fragment, ImageFragment};
 use crate::geom::flow_relative::{Rect, Vec2};
 use crate::geom::PhysicalSize;
 use crate::sizing::ContentSizes;
-use crate::style_ext::ComputedValuesExt;
+use crate::style_ext::{ComputedValuesExt, PaddingBorderMargin};
 use crate::ContainingBlock;
 use canvas_traits::canvas::{CanvasId, CanvasMsg, FromLayoutMsg};
 use ipc_channel::ipc::{self, IpcSender};
@@ -240,19 +240,17 @@ impl ReplacedContent {
         &self,
         containing_block: &ContainingBlock,
         style: &ComputedValues,
+        pbm: &PaddingBorderMargin,
     ) -> Vec2<Length> {
         let mode = style.writing_mode;
         let intrinsic_size = self.flow_relative_intrinsic_size(style);
         let intrinsic_ratio = self.inline_size_over_block_size_intrinsic_ratio(style);
 
-        let box_size = style.box_size().percentages_relative_to(containing_block);
+        let box_size = style.content_box_size(containing_block, &pbm);
+        let max_box_size = style.content_max_box_size(containing_block, &pbm);
         let min_box_size = style
-            .min_box_size()
-            .percentages_relative_to(containing_block)
+            .content_min_box_size(containing_block, &pbm)
             .auto_is(Length::zero);
-        let max_box_size = style
-            .max_box_size()
-            .percentages_relative_to(containing_block);
 
         let default_object_size = || {
             // FIXME:
diff --git a/components/layout_2020/sizing.rs b/components/layout_2020/sizing.rs
index b92360bf42f..7e788cc4898 100644
--- a/components/layout_2020/sizing.rs
+++ b/components/layout_2020/sizing.rs
@@ -5,9 +5,9 @@
 //! https://drafts.csswg.org/css-sizing/
 
 use crate::style_ext::ComputedValuesExt;
+use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
 use style::properties::ComputedValues;
 use style::values::computed::{Length, LengthPercentage, Percentage};
-use style::values::generics::length::MaxSize;
 use style::Zero;
 
 /// Which min/max-content values should be computed during box construction
@@ -63,6 +63,13 @@ impl ContentSizes {
         }
     }
 
+    fn map(&self, f: impl Fn(Length) -> Length) -> Self {
+        Self {
+            min_content: f(self.min_content),
+            max_content: f(self.max_content),
+        }
+    }
+
     pub fn max_assign(&mut self, other: &Self) {
         self.min_content.max_assign(other.min_content);
         self.max_content.max_assign(other.max_content);
@@ -108,61 +115,68 @@ impl BoxContentSizes {
         &self,
         style: &ComputedValues,
     ) -> (ContentSizes, Percentage) {
-        // FIXME: account for 'box-sizing'
-        let inline_size = style.box_size().inline;
+        let padding = style.padding();
+        let border = style.border_width();
+        let margin = style.margin();
+
+        let mut pbm_percentages = Percentage::zero();
+        let mut decompose = |x: &LengthPercentage| {
+            pbm_percentages += x.to_percentage().unwrap_or_else(Zero::zero);
+            x.to_length().unwrap_or_else(Zero::zero)
+        };
+        let pb_lengths =
+            border.inline_sum() + decompose(padding.inline_start) + decompose(padding.inline_end);
+        let mut m_lengths = Length::zero();
+        if let Some(m) = margin.inline_start.non_auto() {
+            m_lengths += decompose(m)
+        }
+        if let Some(m) = margin.inline_end.non_auto() {
+            m_lengths += decompose(m)
+        }
+
+        let box_sizing = style.get_position().box_sizing;
+        let inline_size = style
+            .box_size()
+            .inline
+            .non_auto()
+            // Percentages for 'width' are treated as 'auto'
+            .and_then(|lp| lp.to_length());
         let min_inline_size = style
             .min_box_size()
             .inline
+            // Percentages for 'min-width' are treated as zero
             .percentage_relative_to(Length::zero())
+            // FIXME: 'auto' is not zero in Flexbox
             .auto_is(Length::zero);
-        let max_inline_size = match style.max_box_size().inline {
-            MaxSize::None => None,
-            MaxSize::LengthPercentage(ref lp) => lp.to_length(),
-        };
+        let max_inline_size = style
+            .max_box_size()
+            .inline
+            // Percentages for 'max-width' are treated as 'none'
+            .and_then(|lp| lp.to_length());
         let clamp = |l: Length| l.clamp_between_extremums(min_inline_size, max_inline_size);
 
-        // Percentages for 'width' are treated as 'auto'
-        let inline_size = inline_size.map(|lp| lp.to_length());
-        // The (inner) min/max-content are only used for 'auto'
-        let mut outer = match inline_size.non_auto().flatten() {
-            None => {
-                let inner = self.expect_inline().clone();
+        let border_box_sizes = match inline_size {
+            Some(non_auto) => {
+                let clamped = clamp(non_auto);
+                let border_box_size = match box_sizing {
+                    BoxSizing::ContentBox => clamped + pb_lengths,
+                    BoxSizing::BorderBox => clamped,
+                };
                 ContentSizes {
-                    min_content: clamp(inner.min_content),
-                    max_content: clamp(inner.max_content),
+                    min_content: border_box_size,
+                    max_content: border_box_size,
                 }
             },
-            Some(length) => {
-                let length = clamp(length);
-                ContentSizes {
-                    min_content: length,
-                    max_content: length,
+            None => self.expect_inline().map(|content_box_size| {
+                match box_sizing {
+                    // Clamp to 'min-width' and 'max-width', which are sizing the…
+                    BoxSizing::ContentBox => clamp(content_box_size) + pb_lengths,
+                    BoxSizing::BorderBox => clamp(content_box_size + pb_lengths),
                 }
-            },
-        };
-
-        let mut pbm_lengths = Length::zero();
-        let mut pbm_percentages = Percentage::zero();
-        let padding = style.padding();
-        let border = style.border_width();
-        let margin = style.margin();
-        pbm_lengths += border.inline_sum();
-        let mut add = |x: LengthPercentage| {
-            if let Some(l) = x.to_length() {
-                pbm_lengths += l;
-            }
-            if let Some(p) = x.to_percentage() {
-                pbm_percentages += p;
-            }
+            }),
         };
-        add(padding.inline_start);
-        add(padding.inline_end);
-        margin.inline_start.non_auto().map(&mut add);
-        margin.inline_end.non_auto().map(&mut add);
-
-        outer.min_content += pbm_lengths;
-        outer.max_content += pbm_lengths;
 
+        let outer = border_box_sizes.map(|s| s + m_lengths);
         (outer, pbm_percentages)
     }
 
diff --git a/components/layout_2020/style_ext.rs b/components/layout_2020/style_ext.rs
index cdde69a7866..7442411ae53 100644
--- a/components/layout_2020/style_ext.rs
+++ b/components/layout_2020/style_ext.rs
@@ -2,16 +2,20 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-use crate::geom::{flow_relative, PhysicalSides, PhysicalSize};
+use crate::geom::flow_relative;
+use crate::geom::{LengthOrAuto, LengthPercentageOrAuto, PhysicalSides, PhysicalSize};
+use crate::ContainingBlock;
 use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
 use style::computed_values::position::T as ComputedPosition;
 use style::computed_values::transform_style::T as ComputedTransformStyle;
+use style::properties::longhands::box_sizing::computed_value::T as BoxSizing;
 use style::properties::ComputedValues;
-use style::values::computed::{Length, LengthPercentage, LengthPercentageOrAuto};
+use style::values::computed::{Length, LengthPercentage};
 use style::values::computed::{NonNegativeLengthPercentage, Size};
 use style::values::generics::box_::Perspective;
 use style::values::generics::length::MaxSize;
 use style::values::specified::box_ as stylo;
+use style::Zero;
 
 #[derive(Clone, Copy, Eq, PartialEq)]
 pub(crate) enum Display {
@@ -43,14 +47,40 @@ pub(crate) enum DisplayInside {
     FlowRoot,
 }
 
+/// Percentages resolved but not `auto` margins
+pub(crate) struct PaddingBorderMargin {
+    pub padding: flow_relative::Sides<Length>,
+    pub border: flow_relative::Sides<Length>,
+    pub margin: flow_relative::Sides<LengthOrAuto>,
+
+    /// Pre-computed sums in each axis
+    pub padding_border_sums: flow_relative::Vec2<Length>,
+}
+
 pub(crate) trait ComputedValuesExt {
     fn inline_size_is_length(&self) -> bool;
     fn inline_box_offsets_are_both_non_auto(&self) -> bool;
     fn box_offsets(&self) -> flow_relative::Sides<LengthPercentageOrAuto>;
     fn box_size(&self) -> flow_relative::Vec2<LengthPercentageOrAuto>;
     fn min_box_size(&self) -> flow_relative::Vec2<LengthPercentageOrAuto>;
-    fn max_box_size(&self) -> flow_relative::Vec2<MaxSize<LengthPercentage>>;
-    fn padding(&self) -> flow_relative::Sides<LengthPercentage>;
+    fn max_box_size(&self) -> flow_relative::Vec2<Option<&LengthPercentage>>;
+    fn content_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<LengthOrAuto>;
+    fn content_min_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<LengthOrAuto>;
+    fn content_max_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<Option<Length>>;
+    fn padding_border_margin(&self, containing_block: &ContainingBlock) -> PaddingBorderMargin;
+    fn padding(&self) -> flow_relative::Sides<&LengthPercentage>;
     fn border_width(&self) -> flow_relative::Sides<Length>;
     fn margin(&self) -> flow_relative::Sides<LengthPercentageOrAuto>;
     fn has_transform_or_perspective(&self) -> bool;
@@ -81,69 +111,142 @@ impl ComputedValuesExt for ComputedValues {
         !a.is_auto() && !b.is_auto()
     }
 
-    #[inline]
     fn box_offsets(&self) -> flow_relative::Sides<LengthPercentageOrAuto> {
         let position = self.get_position();
         flow_relative::Sides::from_physical(
             &PhysicalSides::new(
-                position.top.clone(),
-                position.right.clone(),
-                position.bottom.clone(),
-                position.left.clone(),
+                position.top.as_ref(),
+                position.right.as_ref(),
+                position.bottom.as_ref(),
+                position.left.as_ref(),
             ),
             self.writing_mode,
         )
     }
 
-    #[inline]
     fn box_size(&self) -> flow_relative::Vec2<LengthPercentageOrAuto> {
         let position = self.get_position();
         flow_relative::Vec2::from_physical_size(
             &PhysicalSize::new(
-                size_to_length(position.width.clone()),
-                size_to_length(position.height.clone()),
+                size_to_length(&position.width),
+                size_to_length(&position.height),
             ),
             self.writing_mode,
         )
     }
 
-    #[inline]
     fn min_box_size(&self) -> flow_relative::Vec2<LengthPercentageOrAuto> {
         let position = self.get_position();
         flow_relative::Vec2::from_physical_size(
             &PhysicalSize::new(
-                size_to_length(position.min_width.clone()),
-                size_to_length(position.min_height.clone()),
+                size_to_length(&position.min_width),
+                size_to_length(&position.min_height),
             ),
             self.writing_mode,
         )
     }
 
-    #[inline]
-    fn max_box_size(&self) -> flow_relative::Vec2<MaxSize<LengthPercentage>> {
-        let unwrap = |max_size: MaxSize<NonNegativeLengthPercentage>| match max_size {
-            MaxSize::LengthPercentage(length) => MaxSize::LengthPercentage(length.0),
-            MaxSize::None => MaxSize::None,
-        };
+    fn max_box_size(&self) -> flow_relative::Vec2<Option<&LengthPercentage>> {
+        fn unwrap(max_size: &MaxSize<NonNegativeLengthPercentage>) -> Option<&LengthPercentage> {
+            match max_size {
+                MaxSize::LengthPercentage(length) => Some(&length.0),
+                MaxSize::None => None,
+            }
+        }
         let position = self.get_position();
         flow_relative::Vec2::from_physical_size(
-            &PhysicalSize::new(
-                unwrap(position.max_width.clone()),
-                unwrap(position.max_height.clone()),
-            ),
+            &PhysicalSize::new(unwrap(&position.max_width), unwrap(&position.max_height)),
             self.writing_mode,
         )
     }
 
-    #[inline]
-    fn padding(&self) -> flow_relative::Sides<LengthPercentage> {
+    fn content_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<LengthOrAuto> {
+        let box_size = self.box_size().percentages_relative_to(containing_block);
+        match self.get_position().box_sizing {
+            BoxSizing::ContentBox => box_size,
+            BoxSizing::BorderBox => flow_relative::Vec2 {
+                // These may be negative, but will later be clamped by `min-width`/`min-height`
+                // which is clamped to zero.
+                inline: box_size.inline.map(|i| i - pbm.padding_border_sums.inline),
+                block: box_size.block.map(|b| b - pbm.padding_border_sums.block),
+            },
+        }
+    }
+
+    fn content_min_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<LengthOrAuto> {
+        let min_box_size = self
+            .min_box_size()
+            .percentages_relative_to(containing_block);
+        match self.get_position().box_sizing {
+            BoxSizing::ContentBox => min_box_size,
+            BoxSizing::BorderBox => flow_relative::Vec2 {
+                // Clamp to zero to make sure the used size components are non-negative
+                inline: min_box_size
+                    .inline
+                    .map(|i| (i - pbm.padding_border_sums.inline).max(Length::zero())),
+                block: min_box_size
+                    .block
+                    .map(|b| (b - pbm.padding_border_sums.block).max(Length::zero())),
+            },
+        }
+    }
+
+    fn content_max_box_size(
+        &self,
+        containing_block: &ContainingBlock,
+        pbm: &PaddingBorderMargin,
+    ) -> flow_relative::Vec2<Option<Length>> {
+        let max_box_size = self
+            .max_box_size()
+            .percentages_relative_to(containing_block);
+        match self.get_position().box_sizing {
+            BoxSizing::ContentBox => max_box_size,
+            BoxSizing::BorderBox => {
+                // This may be negative, but will later be clamped by `min-width`
+                // which itself is clamped to zero.
+                flow_relative::Vec2 {
+                    inline: max_box_size
+                        .inline
+                        .map(|i| i - pbm.padding_border_sums.inline),
+                    block: max_box_size
+                        .block
+                        .map(|b| b - pbm.padding_border_sums.block),
+                }
+            },
+        }
+    }
+
+    fn padding_border_margin(&self, containing_block: &ContainingBlock) -> PaddingBorderMargin {
+        let cbis = containing_block.inline_size;
+        let padding = self.padding().percentages_relative_to(cbis);
+        let border = self.border_width();
+        PaddingBorderMargin {
+            padding_border_sums: flow_relative::Vec2 {
+                inline: padding.inline_sum() + border.inline_sum(),
+                block: padding.block_sum() + border.block_sum(),
+            },
+            padding,
+            border,
+            margin: self.margin().percentages_relative_to(cbis),
+        }
+    }
+
+    fn padding(&self) -> flow_relative::Sides<&LengthPercentage> {
         let padding = self.get_padding();
         flow_relative::Sides::from_physical(
             &PhysicalSides::new(
-                padding.padding_top.0.clone(),
-                padding.padding_right.0.clone(),
-                padding.padding_bottom.0.clone(),
-                padding.padding_left.0.clone(),
+                &padding.padding_top.0,
+                &padding.padding_right.0,
+                &padding.padding_bottom.0,
+                &padding.padding_left.0,
             ),
             self.writing_mode,
         )
@@ -166,10 +269,10 @@ impl ComputedValuesExt for ComputedValues {
         let margin = self.get_margin();
         flow_relative::Sides::from_physical(
             &PhysicalSides::new(
-                margin.margin_top.clone(),
-                margin.margin_right.clone(),
-                margin.margin_bottom.clone(),
-                margin.margin_left.clone(),
+                margin.margin_top.as_ref(),
+                margin.margin_right.as_ref(),
+                margin.margin_bottom.as_ref(),
+                margin.margin_left.as_ref(),
             ),
             self.writing_mode,
         )
@@ -285,11 +388,9 @@ impl From<stylo::Display> for Display {
     }
 }
 
-fn size_to_length(size: Size) -> LengthPercentageOrAuto {
+fn size_to_length(size: &Size) -> LengthPercentageOrAuto {
     match size {
-        Size::LengthPercentage(length) => {
-            LengthPercentageOrAuto::LengthPercentage(length.0.clone())
-        },
+        Size::LengthPercentage(length) => LengthPercentageOrAuto::LengthPercentage(&length.0),
         Size::Auto => LengthPercentageOrAuto::Auto,
     }
 }
diff --git a/components/style/properties/longhands/position.mako.rs b/components/style/properties/longhands/position.mako.rs
index 6b7ef1b8f4e..660da1a5a37 100644
--- a/components/style/properties/longhands/position.mako.rs
+++ b/components/style/properties/longhands/position.mako.rs
@@ -313,7 +313,6 @@ ${helpers.single_keyword(
     "box-sizing",
     "content-box border-box",
     engines="gecko servo-2013 servo-2020",
-    servo_2020_pref="layout.2020.unimplemented",
     extra_prefixes="moz:layout.css.prefixes.box-sizing webkit",
     spec="https://drafts.csswg.org/css-ui/#propdef-box-sizing",
     gecko_enum_prefix="StyleBoxSizing",
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index 68a944fafff..32b0946493c 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -109,8 +109,19 @@ impl LengthPercentageOrAuto {
         }
     }
 
+    /// Convert to have a borrow inside the enum
+    pub fn as_ref(&self) -> generics::GenericLengthPercentageOrAuto<&LengthPercentage> {
+        use values::generics::length::LengthPercentageOrAuto::*;
+        match *self {
+            LengthPercentage(ref lp) => LengthPercentage(lp),
+            Auto => Auto,
+        }
+    }
+
     computed_length_percentage_or_auto!(LengthPercentage);
+}
 
+impl generics::GenericLengthPercentageOrAuto<&LengthPercentage> {
     /// Resolves the percentage.
     #[inline]
     pub fn percentage_relative_to(&self, basis: Length) -> LengthOrAuto {
diff --git a/tests/wpt/include-layout-2020.ini b/tests/wpt/include-layout-2020.ini
index b67d13102c3..0d4928b0dd1 100644
--- a/tests/wpt/include-layout-2020.ini
+++ b/tests/wpt/include-layout-2020.ini
@@ -19,6 +19,8 @@ skip: true
     skip: false
   [css-transforms]
     skip: false
+  [css-ui]
+    skip: false
   [filter-effects]
     skip: false
   [cssom-view]
diff --git a/tests/wpt/metadata-layout-2020/css/CSS2/normal-flow/dynamic-percentage-height.html.ini b/tests/wpt/metadata-layout-2020/css/CSS2/normal-flow/dynamic-percentage-height.html.ini
deleted file mode 100644
index c5b4581b12e..00000000000
--- a/tests/wpt/metadata-layout-2020/css/CSS2/normal-flow/dynamic-percentage-height.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[dynamic-percentage-height.html]
-  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-backgrounds/background-position-subpixel-at-border.tentative.html.ini b/tests/wpt/metadata-layout-2020/css/css-backgrounds/background-position-subpixel-at-border.tentative.html.ini
deleted file mode 100644
index 2afd3134552..00000000000
--- a/tests/wpt/metadata-layout-2020/css/css-backgrounds/background-position-subpixel-at-border.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[background-position-subpixel-at-border.tentative.html]
-  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-composition.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-composition.html.ini
new file mode 100644
index 00000000000..ae82fda3148
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-composition.html.ini
@@ -0,0 +1,31 @@
+[caret-color-composition.html]
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(120, 120, 120)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(250, 250, 250)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(70, 70, 70)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(100, 100, 100)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(200, 200, 200)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(200, 200, 200)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(150, 150, 150)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(255, 255, 255)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(150, 150, 150)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(250, 250, 250)\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-interpolation.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-interpolation.html.ini
new file mode 100644
index 00000000000..b2ccd707fea
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/caret-color-interpolation.html.ini
@@ -0,0 +1,529 @@
+[caret-color-interpolation.html]
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (1) should be [rgb(255, 165, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (0.3) should be [initial\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (-0.3) should be [initial\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (-0.3) should be [auto\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (0) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (-0.3) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (0.3) should be [auto\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (0.3) should be [rgb(77, 50, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (0.3) should be [rgb(77, 50, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (-0.3) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (0.3) should be [rgb(77, 50, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (0.6) should be [rgb(153, 99, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (0.3) should be [initial\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (0) should be [auto\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (1) should be [rgb(255, 165, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (0.3) should be [auto\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (0) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (0) should be [auto\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (0.6) should be [rgb(153, 99, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (0) should be [initial\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (0) should be [initial\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [auto\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (0.3) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (0.3) should be [rgb(77, 50, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from neutral to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (0.6) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (0) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [initial\] to [green\] at (-0.3) should be [initial\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (1.5) should be [rgb(255, 248, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (1.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [currentColor\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [initial\] to [green\] at (0.3) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (-0.3) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (1) should be [rgb(255, 165, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (1.5) should be [rgb(255, 248, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (1.5) should be [rgb(255, 248, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [inherit\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [black\] to [orange\] at (1.5) should be [rgb(255, 248, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from neutral to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (0.5) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (0.6) should be [rgb(153, 99, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (-0.3) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [auto\] to [green\] at (-0.3) should be [auto\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [auto\] to [green\] at (0) should be [green\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [currentColor\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (1) should be [rgb(255, 165, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [black\] to [orange\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [initial\] to [green\] at (1) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from neutral to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [auto\] to [green\] at (0.3) should be [green\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [currentColor\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [black\] to [orange\] at (0.6) should be [rgb(153, 99, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [inherit\] to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <caret-color> from [inherit\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [black\] to [orange\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [initial\] to [green\] at (0.3) should be [green\]]
+    expected: FAIL
+
+  [Web Animations: property <caret-color> from [currentColor\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <caret-color> from neutral to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <caret-color> from [inherit\] to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-color-interpolation.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-color-interpolation.html.ini
new file mode 100644
index 00000000000..93240c4bb94
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-color-interpolation.html.ini
@@ -0,0 +1,361 @@
+[outline-color-interpolation.html]
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (1.5) should be [rgb(255, 120, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (-0.3) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (-0.3) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (0) should be [white\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (0.6) should be [rgb(255, 201, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (0) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (1) should be [orange\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (-0.3) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (1.5) should be [rgb(255, 120, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (0) should be [white\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [initial\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [inherit\] to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (-0.3) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (1) should be [orange\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (0.6) should be [rgb(255, 201, 102)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (0) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from neutral to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (1.5) should be [rgb(255, 120, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (0.3) should be [rgb(179, 217, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [inherit\] to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [white\] to [orange\] at (1) should be [orange\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (1) should be [orange\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [white\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (0.3) should be [rgb(0, 38, 179)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [initial\] to [green\] at (0.3) should be [rgb(0, 38, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [white\] to [orange\] at (0.6) should be [rgb(255, 201, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (-0.3) should be [white\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (0) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from neutral to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [initial\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from neutral to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [initial\] to [green\] at (0) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (0.6) should be [rgb(0, 77, 0)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [inherit\] to [green\] at (-0.3) should be [rgb(255, 255, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (0.6) should be [rgb(0, 77, 102)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (1.5) should be [rgb(255, 120, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (0.3) should be [rgb(255, 228, 179)\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from neutral to [green\] at (0) should be [rgb(0, 0, 255)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [unset\] to [green\] at (1) should be [rgb(0, 128, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (-0.3) should be [rgb(0, 0, 0)\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-color> from [unset\] to [green\] at (1.5) should be [rgb(0, 192, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (0.6) should be [rgb(102, 179, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-color> from [inherit\] to [green\] at (1.5) should be [rgb(0, 65, 0)\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-color> from [white\] to [orange\] at (0.6) should be [rgb(255, 201, 102)\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-composition.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-composition.html.ini
new file mode 100644
index 00000000000..ebb722b54a0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-composition.html.ini
@@ -0,0 +1,61 @@
+[outline-offset-composition.html]
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini
new file mode 100644
index 00000000000..56c6460fdc6
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-offset-interpolation.html.ini
@@ -0,0 +1,361 @@
+[outline-offset-interpolation.html]
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (1.5) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (1.5) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [initial\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [initial\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [initial\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0.6) should be [1px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [unset\] to [20px\] at (0.6) should be [12px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [initial\] to [20px\] at (-0.3) should be [-6px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (-0.3) should be [-8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (1) should be [5px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-offset> from [-5px\] to [5px\] at (0.3) should be [-2px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-offset> from [-5px\] to [5px\] at (0) should be [-5px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-offset> from [unset\] to [20px\] at (0.3) should be [6px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-offset> from [unset\] to [20px\] at (0) should be [0px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-composition.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-composition.html.ini
new file mode 100644
index 00000000000..307f72aadda
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-composition.html.ini
@@ -0,0 +1,79 @@
+[outline-width-composition.html]
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (-0.3) should be [19px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1.5) should be [1px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (2) should be [0px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0.5) should be [11px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1) should be [6px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0) should be [16px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-interpolation.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-interpolation.html.ini
new file mode 100644
index 00000000000..46930e193e1
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/animation/outline-width-interpolation.html.ini
@@ -0,0 +1,445 @@
+[outline-width-interpolation.html]
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (1) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (-2) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (0.6) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (0.3) should be [3px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (-2) should be [0px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (1.5) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (1) should be [15px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (0.6) should be [11px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (1) should be [10px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (1.5) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (0.6) should be [6px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (0) should be [5px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (-0.3) should be [2px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (-0.3) should be [33px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (0) should be [5px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (1.5) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (1) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (1) should be [10px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (-0.3) should be [2px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (0.6) should be [24px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (0.6) should be [11px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (-2) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (1) should be [15px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [thick\] to [15px\] at (1.5) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (-2) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (0) should be [5px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (0.3) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (0.6) should be [11px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (1) should be [15px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [0px\] to [10px\] at (0.6) should be [6px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (-0.3) should be [2px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (0.6) should be [6px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [0px\] to [10px\] at (0.3) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [thick\] to [15px\] at (0) should be [5px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [unset\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (1.5) should be [15px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [initial\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [inherit\] to [20px\] at (0) should be [30px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (0) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (0.6) should be [16px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (-0.3) should be [2px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [thick\] to [15px\] at (0.6) should be [11px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (0.3) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (0.6) should be [13px\]]
+    expected: FAIL
+
+  [Web Animations: property <outline-width> from [thick\] to [15px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [inherit\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (1.5) should be [25px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [initial\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (1) should be [20px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (0.3) should be [13px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [initial\] to [20px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [0px\] to [10px\] at (1) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [unset\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions with transition: all: property <outline-width> from [inherit\] to [20px\] at (0.3) should be [27px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [0px\] to [10px\] at (-0.3) should be [0px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from [initial\] to [20px\] at (0) should be [3px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (0.3) should be [8px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from neutral to [20px\] at (-0.3) should be [7px\]]
+    expected: FAIL
+
+  [CSS Animations: property <outline-width> from neutral to [20px\] at (0) should be [10px\]]
+    expected: FAIL
+
+  [CSS Transitions: property <outline-width> from [unset\] to [20px\] at (1.5) should be [28px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-cssom-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-cssom-001.html.ini
new file mode 100644
index 00000000000..c32a2ace742
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-cssom-001.html.ini
@@ -0,0 +1,979 @@
+[appearance-cssom-001.html]
+  [appearance: menulist-button]
+    expected: FAIL
+
+  [appearance: menulist-text (invalid)]
+    expected: FAIL
+
+  [appearance: continuous-capacity-level-indicator (invalid)]
+    expected: FAIL
+
+  [appearance: toolbarbutton-dropdown (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-frame-bottom (invalid)]
+    expected: FAIL
+
+  [appearance: statusbar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuseparator (invalid)]
+    expected: FAIL
+
+  [appearance: button-arrow-next (invalid)]
+    expected: FAIL
+
+  [appearance: meterchunk (invalid)]
+    expected: FAIL
+
+  [appearance: resizerpanel (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-volume-slider-container (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: attachment (invalid)]
+    expected: FAIL
+
+  [appearance: media-volume-slider (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-borderless-glass (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbarbutton-left (invalid)]
+    expected: FAIL
+
+  [appearance: scale-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-exit-fullscreen-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: sliderthumb-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button-arrow-previous (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: statusbar (invalid)]
+    expected: FAIL
+
+  [appearance: menucheckbox (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: square-button]
+    expected: FAIL
+
+  [appearance: -moz-window-button-restore (invalid)]
+    expected: FAIL
+
+  [appearance: media-time-remaining-display (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progressbar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: list-button (invalid)]
+    expected: FAIL
+
+  [appearance: radio-container (invalid)]
+    expected: FAIL
+
+  [appearance: media-seek-back-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: radio-container (invalid)]
+    expected: FAIL
+
+  [appearance: media-seek-forward-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: auto]
+    expected: FAIL
+
+  [-webkit-appearance: menupopup (invalid)]
+    expected: FAIL
+
+  [appearance: relevancy-level-indicator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: discrete-capacity-level-indicator (invalid)]
+    expected: FAIL
+
+  [appearance: listitem (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbarbutton-down (invalid)]
+    expected: FAIL
+
+  [appearance: scalethumb-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button]
+    expected: FAIL
+
+  [appearance: scrollbarbutton-up (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarbutton-left (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: checkmenuitem (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: toolbox (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scalethumbend (invalid)]
+    expected: FAIL
+
+  [appearance: tabpanel (invalid)]
+    expected: FAIL
+
+  [appearance: sliderthumb-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: button-arrow-down (invalid)]
+    expected: FAIL
+
+  [appearance: textarea]
+    expected: FAIL
+
+  [-webkit-appearance: toolbarbutton (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tab-scroll-arrow-back (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tab (invalid)]
+    expected: FAIL
+
+  [appearance: number-input (invalid)]
+    expected: FAIL
+
+  [appearance: tabpanels (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: color-well (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeheader (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: range-thumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: splitter (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: listbox]
+    expected: FAIL
+
+  [-webkit-appearance: image-controls-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: inner-spin-button (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-communicationstext (invalid)]
+    expected: FAIL
+
+  [appearance: treeheadercell (invalid)]
+    expected: FAIL
+
+  [appearance: inner-spin-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-exclude-glass (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -apple-pay-button (invalid)]
+    expected: FAIL
+
+  [appearance: tab (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbarthumb-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menulist-textfield (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menulist-text (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-minimize (invalid)]
+    expected: FAIL
+
+  [appearance: scalethumb-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeheadersortarrow (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: snapshotted-plugin-overlay (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: spinner-textfield (invalid)]
+    expected: FAIL
+
+  [appearance: media-exit-fullscreen-button (invalid)]
+    expected: FAIL
+
+  [appearance: color-well (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: sheet (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeline (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-controls-background (invalid)]
+    expected: FAIL
+
+  [appearance: media-sliderthumb (invalid)]
+    expected: FAIL
+
+  [appearance: media-fullscreen-volume-slider (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: searchfield-decoration (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-frame-left (invalid)]
+    expected: FAIL
+
+  [appearance: media-current-time-display (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: listitem (invalid)]
+    expected: FAIL
+
+  [appearance: separator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: toolbar (invalid)]
+    expected: FAIL
+
+  [appearance: dualbutton (invalid)]
+    expected: FAIL
+
+  [appearance: bogus-button (invalid)]
+    expected: FAIL
+
+  [appearance: searchfield-decoration (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: spinner-upbutton (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-communicationstext (invalid)]
+    expected: FAIL
+
+  [appearance: scalethumbend (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: caret (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-browsertabbar-toolbox (invalid)]
+    expected: FAIL
+
+  [appearance: menupopup (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: checkbox]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-close (invalid)]
+    expected: FAIL
+
+  [appearance: checkmenuitem (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-rewind-button (invalid)]
+    expected: FAIL
+
+  [appearance: radio-label (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progresschunk (invalid)]
+    expected: FAIL
+
+  [appearance: progress-bar]
+    expected: FAIL
+
+  [-webkit-appearance: rating-level-indicator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: bogus-button (invalid)]
+    expected: FAIL
+
+  [appearance: button-focus (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-button-close (invalid)]
+    expected: FAIL
+
+  [appearance: caret (invalid)]
+    expected: FAIL
+
+  [appearance: listbox]
+    expected: FAIL
+
+  [-webkit-appearance: media-controls-fullscreen-background (invalid)]
+    expected: FAIL
+
+  [appearance: media-volume-slider-mute-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeheadercell (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarbutton-up (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-seek-forward-button (invalid)]
+    expected: FAIL
+
+  [appearance: checkbox-container (invalid)]
+    expected: FAIL
+
+  [appearance: button]
+    expected: FAIL
+
+  [-webkit-appearance: relevancy-level-indicator (invalid)]
+    expected: FAIL
+
+  [appearance: progresschunk-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: treetwisty (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbartrack-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-current-time-display (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scalethumbtick (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treetwistyopen (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: push-button]
+    expected: FAIL
+
+  [appearance: menuarrow (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: radiomenuitem (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: meterchunk (invalid)]
+    expected: FAIL
+
+  [appearance: treeitem (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: toolbarbutton-dropdown (invalid)]
+    expected: FAIL
+
+  [appearance: media-play-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-titlebar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: default-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-sliderthumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menulist]
+    expected: FAIL
+
+  [appearance: searchfield]
+    expected: FAIL
+
+  [-webkit-appearance: button-arrow-down (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-controls-light-bar-background (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-communications-toolbox (invalid)]
+    expected: FAIL
+
+  [appearance: rating-level-indicator (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-frame-right (invalid)]
+    expected: FAIL
+
+  [appearance: spinner-downbutton (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: caps-lock-indicator (invalid)]
+    expected: FAIL
+
+  [appearance: splitter (invalid)]
+    expected: FAIL
+
+  [appearance: media-controls-background (invalid)]
+    expected: FAIL
+
+  [appearance: square-button]
+    expected: FAIL
+
+  [appearance: resizer (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-borderless-glass (invalid)]
+    expected: FAIL
+
+  [appearance: toolbox (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: resizer (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: resizerpanel (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: dualbutton (invalid)]
+    expected: FAIL
+
+  [appearance: media-enter-fullscreen-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: searchfield-cancel-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: textarea]
+    expected: FAIL
+
+  [appearance: statusbarpanel (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-titlebar-maximized (invalid)]
+    expected: FAIL
+
+  [appearance: media-controls-light-bar-background (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tab-scroll-arrow-forward  (invalid)]
+    expected: FAIL
+
+  [appearance: push-button]
+    expected: FAIL
+
+  [appearance: treetwistyopen (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treetwisty (invalid)]
+    expected: FAIL
+
+  [appearance: progress-bar-value (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbarbutton-right (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button-bevel (invalid)]
+    expected: FAIL
+
+  [appearance: borderless-attachment (invalid)]
+    expected: FAIL
+
+  [appearance: media-controls-fullscreen-background (invalid)]
+    expected: FAIL
+
+  [appearance: treeheader (invalid)]
+    expected: FAIL
+
+  [appearance: slider-horizontal]
+    expected: FAIL
+
+  [-webkit-appearance: radio-label (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: none]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-box (invalid)]
+    expected: FAIL
+
+  [appearance: menulist-textfield (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tabpanel (invalid)]
+    expected: FAIL
+
+  [appearance: checkbox-label (invalid)]
+    expected: FAIL
+
+  [appearance: -apple-pay-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progressbar-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-button-box (invalid)]
+    expected: FAIL
+
+  [appearance: spinner-upbutton (invalid)]
+    expected: FAIL
+
+  [appearance: groupbox (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuitemtext (invalid)]
+    expected: FAIL
+
+  [appearance: snapshotted-plugin-overlay (invalid)]
+    expected: FAIL
+
+  [appearance: discrete-capacity-level-indicator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button-arrow-up (invalid)]
+    expected: FAIL
+
+  [appearance: media-volume-slider-container (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: searchfield]
+    expected: FAIL
+
+  [appearance: caps-lock-indicator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: toolbargripper (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarthumb-horizontal (invalid)]
+    expected: FAIL
+
+  [appearance: auto]
+    expected: FAIL
+
+  [-webkit-appearance: media-seek-back-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button-focus (invalid)]
+    expected: FAIL
+
+  [appearance: progressbar-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: tooltip (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-volume-slider-mute-button (invalid)]
+    expected: FAIL
+
+  [appearance: button-arrow-previous (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-fullscreen-volume-slider (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarbutton-right (invalid)]
+    expected: FAIL
+
+  [appearance: toolbarbutton (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-glass (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: textfield]
+    expected: FAIL
+
+  [appearance: searchfield-cancel-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: spinner (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-exclude-glass (invalid)]
+    expected: FAIL
+
+  [appearance: media-return-to-realtime-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-restore (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: spinner-downbutton (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progresschunk-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: radio]
+    expected: FAIL
+
+  [-webkit-appearance: meterbar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: slider-horizontal]
+    expected: FAIL
+
+  [appearance: button-bevel (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-frame-left (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scalethumb-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: media-toggle-closed-captions-button (invalid)]
+    expected: FAIL
+
+  [appearance: checkbox]
+    expected: FAIL
+
+  [appearance: textfield-multiline (invalid)]
+    expected: FAIL
+
+  [appearance: treeline (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-time-remaining-display (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-maximize (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-browsertabbar-toolbox (invalid)]
+    expected: FAIL
+
+  [appearance: attachment (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: separator (invalid)]
+    expected: FAIL
+
+  [appearance: none]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-win-media-toolbox (invalid)]
+    expected: FAIL
+
+  [appearance: searchfield-results-button (invalid)]
+    expected: FAIL
+
+  [appearance: searchfield-results-decoration (invalid)]
+    expected: FAIL
+
+  [appearance: radiomenuitem (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: meter]
+    expected: FAIL
+
+  [appearance: progresschunk (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: sliderthumb-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: toolbar (invalid)]
+    expected: FAIL
+
+  [appearance: menulist]
+    expected: FAIL
+
+  [-webkit-appearance: scalethumbstart (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tooltip (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: button-arrow-next (invalid)]
+    expected: FAIL
+
+  [appearance: treeview (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-volume-slider (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-return-to-realtime-button (invalid)]
+    expected: FAIL
+
+  [appearance: toolbargripper (invalid)]
+    expected: FAIL
+
+  [appearance: slider-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scale-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarbutton-down (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: checkbox-container (invalid)]
+    expected: FAIL
+
+  [appearance: sheet (invalid)]
+    expected: FAIL
+
+  [appearance: menuimage (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-toggle-closed-captions-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: searchfield-results-button (invalid)]
+    expected: FAIL
+
+  [appearance: media-rewind-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-overlay-play-button (invalid)]
+    expected: FAIL
+
+  [appearance: menuseparator (invalid)]
+    expected: FAIL
+
+  [appearance: list-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progress-bar-value (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scalethumb-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: number-input (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbarthumb-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-button-maximize (invalid)]
+    expected: FAIL
+
+  [appearance: scale-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: checkbox-label (invalid)]
+    expected: FAIL
+
+  [appearance: button-arrow-up (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: borderless-attachment (invalid)]
+    expected: FAIL
+
+  [appearance: media-controls-dark-bar-background (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menubar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuimage (invalid)]
+    expected: FAIL
+
+  [appearance: menuitemtext (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-titlebar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuarrow (invalid)]
+    expected: FAIL
+
+  [appearance: menubar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: statusbarpanel (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: tabpanels (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-controls-dark-bar-background (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-frame-right (invalid)]
+    expected: FAIL
+
+  [appearance: tab-scroll-arrow-back (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-mute-button (invalid)]
+    expected: FAIL
+
+  [appearance: menuradio (invalid)]
+    expected: FAIL
+
+  [appearance: range-thumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeview (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-button-box-maximized (invalid)]
+    expected: FAIL
+
+  [appearance: media-mute-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: treeitem (invalid)]
+    expected: FAIL
+
+  [appearance: textfield]
+    expected: FAIL
+
+  [appearance: meterbar (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menulist-button]
+    expected: FAIL
+
+  [-webkit-appearance: media-enter-fullscreen-button (invalid)]
+    expected: FAIL
+
+  [appearance: default-button (invalid)]
+    expected: FAIL
+
+  [appearance: media-fullscreen-volume-slider-thumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-fullscreen-volume-slider-thumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: continuous-capacity-level-indicator (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: groupbox (invalid)]
+    expected: FAIL
+
+  [appearance: media-overlay-play-button (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbartrack-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: scalethumbtick (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menucheckbox (invalid)]
+    expected: FAIL
+
+  [appearance: radio]
+    expected: FAIL
+
+  [-webkit-appearance: searchfield-results-decoration (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-media-toolbox (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-titlebar-maximized (invalid)]
+    expected: FAIL
+
+  [appearance: progressbar (invalid)]
+    expected: FAIL
+
+  [appearance: media-slider (invalid)]
+    expected: FAIL
+
+  [appearance: scalethumbstart (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: range (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuradio (invalid)]
+    expected: FAIL
+
+  [appearance: spinner-textfield (invalid)]
+    expected: FAIL
+
+  [appearance: spinner (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: -moz-window-button-box-maximized (invalid)]
+    expected: FAIL
+
+  [appearance: treeheadersortarrow (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-glass (invalid)]
+    expected: FAIL
+
+  [appearance: meter]
+    expected: FAIL
+
+  [appearance: image-controls-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: slider-vertical (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: progress-bar]
+    expected: FAIL
+
+  [appearance: -moz-window-button-minimize (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-slider (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-volume-sliderthumb (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbartrack-horizontal (invalid)]
+    expected: FAIL
+
+  [appearance: sliderthumb-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: menuitem (invalid)]
+    expected: FAIL
+
+  [appearance: menuitem (invalid)]
+    expected: FAIL
+
+  [appearance: scrollbarthumb-horizontal (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scrollbartrack-vertical (invalid)]
+    expected: FAIL
+
+  [appearance: range (invalid)]
+    expected: FAIL
+
+  [appearance: media-volume-sliderthumb (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: media-play-button (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: textfield-multiline (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-window-frame-bottom (invalid)]
+    expected: FAIL
+
+  [appearance: -moz-win-communications-toolbox (invalid)]
+    expected: FAIL
+
+  [appearance: tab-scroll-arrow-forward  (invalid)]
+    expected: FAIL
+
+  [-webkit-appearance: scale-horizontal (invalid)]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-initial-value-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-initial-value-001.html.ini
new file mode 100644
index 00000000000..3e1041748fa
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-initial-value-001.html.ini
@@ -0,0 +1,13 @@
+[appearance-initial-value-001.html]
+  [support for appearance]
+    expected: FAIL
+
+  [initial value for appearance]
+    expected: FAIL
+
+  [support for -webkit-appearance]
+    expected: FAIL
+
+  [initial value for -webkit-appearance]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-menulist-button-002.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-menulist-button-002.html.ini
new file mode 100644
index 00000000000..d203ff3bb8c
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-menulist-button-002.html.ini
@@ -0,0 +1,2 @@
+[appearance-menulist-button-002.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-parsing.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-parsing.html.ini
new file mode 100644
index 00000000000..b808169f4f0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-parsing.html.ini
@@ -0,0 +1,10 @@
+[appearance-parsing.html]
+  [parsing via modification of cssText]
+    expected: FAIL
+
+  [parsing via attribute change steps of CSS declaration block's owner node]
+    expected: FAIL
+
+  [parsing via creation of CSS declaration block]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-property.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-property.html.ini
new file mode 100644
index 00000000000..5bfee42be2e
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-property.html.ini
@@ -0,0 +1,13 @@
+[appearance-property.html]
+  [getPropertyValue]
+    expected: FAIL
+
+  [property access]
+    expected: FAIL
+
+  [removeProperty]
+    expected: FAIL
+
+  [setProperty]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/appearance-serialization.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-serialization.html.ini
new file mode 100644
index 00000000000..eaa41649f95
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/appearance-serialization.html.ini
@@ -0,0 +1,10 @@
+[appearance-serialization.html]
+  [serialization via CSSStyleRule]
+    expected: FAIL
+
+  [serialization via CSSStyleDeclaration]
+    expected: FAIL
+
+  [serialization via CSSMediaRule]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-007.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-007.html.ini
new file mode 100644
index 00000000000..6d45fcd51fb
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-007.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-007.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-008.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-008.html.ini
new file mode 100644
index 00000000000..1cef4a08b74
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-008.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-008.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-009.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-009.html.ini
new file mode 100644
index 00000000000..d3cfc421ffb
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-009.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-009.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-010.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-010.html.ini
new file mode 100644
index 00000000000..4ce3df9782f
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-010.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-010.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-011.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-011.html.ini
new file mode 100644
index 00000000000..6f815e4dacd
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-011.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-011.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-012.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-012.html.ini
new file mode 100644
index 00000000000..982f813ee14
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-012.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-012.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-013.html.ini
new file mode 100644
index 00000000000..41d5130f858
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-013.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-013.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-014.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-014.html.ini
new file mode 100644
index 00000000000..1edaadfe739
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-014.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-014.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-015.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-015.html.ini
new file mode 100644
index 00000000000..6af1f6dc4ff
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-015.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-015.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-016.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-016.html.ini
new file mode 100644
index 00000000000..493a3b74cfc
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-016.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-016.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-017.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-017.html.ini
new file mode 100644
index 00000000000..a475c9ba237
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-017.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-017.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-018.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-018.html.ini
new file mode 100644
index 00000000000..eaf9755e9cb
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-018.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-018.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-019.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-019.html.ini
new file mode 100644
index 00000000000..dd786fe65af
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-019.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-019.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-020.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-020.html.ini
new file mode 100644
index 00000000000..db185370ea0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-020.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-020.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-021.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-021.html.ini
new file mode 100644
index 00000000000..f0c7d0e511c
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-021.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-021.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-022.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-022.html.ini
new file mode 100644
index 00000000000..28a4b431773
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-022.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-022.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-023.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-023.html.ini
new file mode 100644
index 00000000000..a27417e3b76
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-023.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-023.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-024.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-024.html.ini
new file mode 100644
index 00000000000..a712710e096
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-024.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-024.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-025.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-025.html.ini
new file mode 100644
index 00000000000..9d811f3fade
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-025.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-025.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-026.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-026.html.ini
new file mode 100644
index 00000000000..6fee176772e
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-026.html.ini
@@ -0,0 +1,2 @@
+[box-sizing-026.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-027.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-027.html.ini
new file mode 100644
index 00000000000..8d6e9c41fc0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/box-sizing-027.html.ini
@@ -0,0 +1,7 @@
+[box-sizing-027.html]
+  [Check the resolved value of 'width' when box-sizing is  border-box.]
+    expected: FAIL
+
+  [Check the resolved value of 'height' when box-sizing is  border-box.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-009.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-009.html.ini
new file mode 100644
index 00000000000..b146dce6f09
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-009.html.ini
@@ -0,0 +1,10 @@
+[caret-color-009.html]
+  [Check the resolved value of 'currentcolor']
+    expected: FAIL
+
+  [Check the resolved value of 'initial']
+    expected: FAIL
+
+  [Check the resolved value of 'auto']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-013.html.ini
new file mode 100644
index 00000000000..06208990cb3
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-013.html.ini
@@ -0,0 +1,34 @@
+[caret-color-013.html]
+  [Test caret-color: blue (inherited)]
+    expected: FAIL
+
+  [Test caret-color: inherit]
+    expected: FAIL
+
+  [Test caret-color: lime]
+    expected: FAIL
+
+  [Test caret-color: initial (inherited)]
+    expected: FAIL
+
+  [Test caret-color: initial]
+    expected: FAIL
+
+  [Test caret-color: inherit (inherited)]
+    expected: FAIL
+
+  [Test caret-color: auto]
+    expected: FAIL
+
+  [Test caret-color: currentcolor]
+    expected: FAIL
+
+  [Test caret-color: rgb(0, 100, 100)]
+    expected: FAIL
+
+  [Test default caret-color]
+    expected: FAIL
+
+  [Reset caret-color: initial]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-018.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-018.html.ini
new file mode 100644
index 00000000000..b452a8bcfb2
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-018.html.ini
@@ -0,0 +1,4 @@
+[caret-color-018.html]
+  [The caret-color property is animatable]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-019.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-019.html.ini
new file mode 100644
index 00000000000..bda250fcd13
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-019.html.ini
@@ -0,0 +1,4 @@
+[caret-color-019.html]
+  [caret-color: auto is not interpolable]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-020.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-020.html.ini
new file mode 100644
index 00000000000..d2e5733bdae
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-020.html.ini
@@ -0,0 +1,4 @@
+[caret-color-020.html]
+  [caret-color: currentcolor is interpolable]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-021.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-021.html.ini
new file mode 100644
index 00000000000..89b879aa77b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/caret-color-021.html.ini
@@ -0,0 +1,4 @@
+[caret-color-021.html]
+  [Default caret-color is not interpolable]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini
new file mode 100644
index 00000000000..44592a7fc50
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/inheritance.html.ini
@@ -0,0 +1,2 @@
+[inheritance.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-001.html.ini
new file mode 100644
index 00000000000..9c5c5fb50b0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-001.html.ini
@@ -0,0 +1,2 @@
+[outline-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-002.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-002.html.ini
new file mode 100644
index 00000000000..a4399a9f36b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-002.html.ini
@@ -0,0 +1,2 @@
+[outline-002.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-003.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-003.html.ini
new file mode 100644
index 00000000000..e3b1208d3f6
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-003.html.ini
@@ -0,0 +1,2 @@
+[outline-003.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-004.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-004.html.ini
new file mode 100644
index 00000000000..b38042c3121
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-004.html.ini
@@ -0,0 +1,2 @@
+[outline-004.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-005.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-005.html.ini
new file mode 100644
index 00000000000..d853f6ccdd5
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-005.html.ini
@@ -0,0 +1,2 @@
+[outline-005.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-006.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-006.html.ini
new file mode 100644
index 00000000000..8966d814474
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-006.html.ini
@@ -0,0 +1,2 @@
+[outline-006.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-007.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-007.html.ini
new file mode 100644
index 00000000000..f75855c24fd
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-007.html.ini
@@ -0,0 +1,2 @@
+[outline-007.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-008.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-008.html.ini
new file mode 100644
index 00000000000..88872760eac
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-008.html.ini
@@ -0,0 +1,2 @@
+[outline-008.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini
new file mode 100644
index 00000000000..c6b964624ce
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-010.html.ini
@@ -0,0 +1,2 @@
+[outline-010.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-011.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-011.html.ini
new file mode 100644
index 00000000000..86397cd1524
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-011.html.ini
@@ -0,0 +1,2 @@
+[outline-011.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini
new file mode 100644
index 00000000000..4384a580889
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-012.html.ini
@@ -0,0 +1,2 @@
+[outline-012.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini
new file mode 100644
index 00000000000..8c9e8688a88
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-013.html.ini
@@ -0,0 +1,2 @@
+[outline-013.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-014.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-014.html.ini
new file mode 100644
index 00000000000..0069f95dc85
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-014.html.ini
@@ -0,0 +1,2 @@
+[outline-014.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-015.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-015.html.ini
new file mode 100644
index 00000000000..d49131e63f4
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-015.html.ini
@@ -0,0 +1,2 @@
+[outline-015.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-016.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-016.html.ini
new file mode 100644
index 00000000000..bd69df8dab3
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-016.html.ini
@@ -0,0 +1,2 @@
+[outline-016.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini
new file mode 100644
index 00000000000..372feefd4f3
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-017.html.ini
@@ -0,0 +1,10 @@
+[outline-017.html]
+  [outline-offset is animated as a length]
+    expected: FAIL
+
+  [outline-color is animated as a color]
+    expected: FAIL
+
+  [outline-width is animated as a length]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-018.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-018.html.ini
new file mode 100644
index 00000000000..a2fea6c00e1
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-018.html.ini
@@ -0,0 +1,4 @@
+[outline-018.html]
+  [outline-style is animated as a discrete type]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-019.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-019.html.ini
new file mode 100644
index 00000000000..60e6c4e02a3
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-019.html.ini
@@ -0,0 +1,2 @@
+[outline-019.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-020.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-020.html.ini
new file mode 100644
index 00000000000..a9eab7bd4e5
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-020.html.ini
@@ -0,0 +1,2 @@
+[outline-020.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-021.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-021.html.ini
new file mode 100644
index 00000000000..916e9df1f0a
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-021.html.ini
@@ -0,0 +1,2 @@
+[outline-021.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-022.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-022.html.ini
new file mode 100644
index 00000000000..532d572a27d
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-022.html.ini
@@ -0,0 +1,2 @@
+[outline-022.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-023.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-023.html.ini
new file mode 100644
index 00000000000..802e7145bec
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-023.html.ini
@@ -0,0 +1,2 @@
+[outline-023.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-color-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-color-001.html.ini
new file mode 100644
index 00000000000..f169c537a84
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-color-001.html.ini
@@ -0,0 +1,2 @@
+[outline-color-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini
new file mode 100644
index 00000000000..812d9d08208
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-001.html.ini
@@ -0,0 +1,2 @@
+[outline-offset-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini
new file mode 100644
index 00000000000..93693c6a148
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-offset-table-001.html.ini
@@ -0,0 +1,2 @@
+[outline-offset-table-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-011.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-011.html.ini
new file mode 100644
index 00000000000..d03e3e56654
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-011.html.ini
@@ -0,0 +1,2 @@
+[outline-style-011.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-012.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-012.html.ini
new file mode 100644
index 00000000000..152b5a0e746
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-012.html.ini
@@ -0,0 +1,2 @@
+[outline-style-012.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-013.html.ini
new file mode 100644
index 00000000000..5b2c31352a5
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-013.html.ini
@@ -0,0 +1,2 @@
+[outline-style-013.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-014.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-014.html.ini
new file mode 100644
index 00000000000..c0125686ec7
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/outline-style-014.html.ini
@@ -0,0 +1,2 @@
+[outline-style-014.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/box-sizing-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/box-sizing-computed.html.ini
new file mode 100644
index 00000000000..1c68f53e0fc
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/box-sizing-computed.html.ini
@@ -0,0 +1,7 @@
+[box-sizing-computed.html]
+  [Property box-sizing value 'border-box']
+    expected: FAIL
+
+  [Property box-sizing value 'content-box']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-computed.html.ini
new file mode 100644
index 00000000000..c529c66d240
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-computed.html.ini
@@ -0,0 +1,10 @@
+[caret-color-computed.html]
+  [Property caret-color value 'currentColor']
+    expected: FAIL
+
+  [Property caret-color value 'red']
+    expected: FAIL
+
+  [Property caret-color value 'auto']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-valid.html.ini
new file mode 100644
index 00000000000..069a1a20c37
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/caret-color-valid.html.ini
@@ -0,0 +1,7 @@
+[caret-color-valid.html]
+  [e.style['caret-color'\] = "rgba(10, 20, 30, 0.4)" should set the property value]
+    expected: FAIL
+
+  [e.style['caret-color'\] = "auto" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/cursor-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/cursor-computed.html.ini
new file mode 100644
index 00000000000..b9e880507ac
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/cursor-computed.html.ini
@@ -0,0 +1,109 @@
+[cursor-computed.html]
+  [Property cursor value 'vertical-text']
+    expected: FAIL
+
+  [Property cursor value 'nwse-resize']
+    expected: FAIL
+
+  [Property cursor value 'grab']
+    expected: FAIL
+
+  [Property cursor value 'n-resize']
+    expected: FAIL
+
+  [Property cursor value 'ne-resize']
+    expected: FAIL
+
+  [Property cursor value 'help']
+    expected: FAIL
+
+  [Property cursor value 'progress']
+    expected: FAIL
+
+  [Property cursor value 'no-drop']
+    expected: FAIL
+
+  [Property cursor value 'not-allowed']
+    expected: FAIL
+
+  [Property cursor value 'alias']
+    expected: FAIL
+
+  [Property cursor value 's-resize']
+    expected: FAIL
+
+  [Property cursor value 'nw-resize']
+    expected: FAIL
+
+  [Property cursor value 'zoom-out']
+    expected: FAIL
+
+  [Property cursor value 'grabbing']
+    expected: FAIL
+
+  [Property cursor value 'default']
+    expected: FAIL
+
+  [Property cursor value 'sw-resize']
+    expected: FAIL
+
+  [Property cursor value 'zoom-in']
+    expected: FAIL
+
+  [Property cursor value 'row-resize']
+    expected: FAIL
+
+  [Property cursor value 'pointer']
+    expected: FAIL
+
+  [Property cursor value 'ew-resize']
+    expected: FAIL
+
+  [Property cursor value 'wait']
+    expected: FAIL
+
+  [Property cursor value 'cell']
+    expected: FAIL
+
+  [Property cursor value 'copy']
+    expected: FAIL
+
+  [Property cursor value 'nesw-resize']
+    expected: FAIL
+
+  [Property cursor value 'text']
+    expected: FAIL
+
+  [Property cursor value 'context-menu']
+    expected: FAIL
+
+  [Property cursor value 'all-scroll']
+    expected: FAIL
+
+  [Property cursor value 'col-resize']
+    expected: FAIL
+
+  [Property cursor value 'w-resize']
+    expected: FAIL
+
+  [Property cursor value 'ns-resize']
+    expected: FAIL
+
+  [Property cursor value 'auto']
+    expected: FAIL
+
+  [Property cursor value 'crosshair']
+    expected: FAIL
+
+  [Property cursor value 'se-resize']
+    expected: FAIL
+
+  [Property cursor value 'e-resize']
+    expected: FAIL
+
+  [Property cursor value 'move']
+    expected: FAIL
+
+  [Property cursor value 'none']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-computed.html.ini
new file mode 100644
index 00000000000..bbb4a8282c2
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-computed.html.ini
@@ -0,0 +1,10 @@
+[outline-color-computed.html]
+  [Property outline-color value 'currentColor']
+    expected: FAIL
+
+  [invert, if supported, computes to invert]
+    expected: FAIL
+
+  [Property outline-color value 'red']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-mandatory.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-mandatory.html.ini
new file mode 100644
index 00000000000..f0b3894b686
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-mandatory.html.ini
@@ -0,0 +1,4 @@
+[outline-color-valid-mandatory.html]
+  [e.style['outline-color'\] = "rgba(10, 20, 30, 0.4)" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-optional.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-optional.html.ini
new file mode 100644
index 00000000000..9b4b531885b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-color-valid-optional.html.ini
@@ -0,0 +1,4 @@
+[outline-color-valid-optional.html]
+  [e.style['outline-color'\] = "invert" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini
new file mode 100644
index 00000000000..8cefcef6475
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-computed.html.ini
@@ -0,0 +1,13 @@
+[outline-offset-computed.html]
+  [Property outline-offset value '0.5em']
+    expected: FAIL
+
+  [Property outline-offset value 'calc(10px + 0.5em)']
+    expected: FAIL
+
+  [Property outline-offset value 'calc(10px - 0.5em)']
+    expected: FAIL
+
+  [Property outline-offset value '10px']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini
new file mode 100644
index 00000000000..b9933b060e1
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-offset-valid.html.ini
@@ -0,0 +1,13 @@
+[outline-offset-valid.html]
+  [e.style['outline-offset'\] = "calc(3rem + 4vw)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-offset'\] = "0" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-offset'\] = "1px" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-offset'\] = "2em" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-shorthand.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-shorthand.html.ini
new file mode 100644
index 00000000000..b6d84e259b3
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-shorthand.html.ini
@@ -0,0 +1,13 @@
+[outline-shorthand.html]
+  [e.style['outline'\] = "3px ridge blue" should not set unrelated longhands]
+    expected: FAIL
+
+  [e.style['outline'\] = "3px ridge blue" should set outline-color]
+    expected: FAIL
+
+  [e.style['outline'\] = "3px ridge blue" should set outline-width]
+    expected: FAIL
+
+  [e.style['outline'\] = "3px ridge blue" should set outline-style]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-computed.html.ini
new file mode 100644
index 00000000000..f1e0bf765ae
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-computed.html.ini
@@ -0,0 +1,31 @@
+[outline-style-computed.html]
+  [Property outline-style value 'solid']
+    expected: FAIL
+
+  [Property outline-style value 'inset']
+    expected: FAIL
+
+  [Property outline-style value 'double']
+    expected: FAIL
+
+  [Property outline-style value 'dashed']
+    expected: FAIL
+
+  [Property outline-style value 'none']
+    expected: FAIL
+
+  [Property outline-style value 'outset']
+    expected: FAIL
+
+  [Property outline-style value 'auto']
+    expected: FAIL
+
+  [Property outline-style value 'dotted']
+    expected: FAIL
+
+  [Property outline-style value 'groove']
+    expected: FAIL
+
+  [Property outline-style value 'ridge']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-valid.html.ini
new file mode 100644
index 00000000000..1bf1a440e72
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-style-valid.html.ini
@@ -0,0 +1,31 @@
+[outline-style-valid.html]
+  [e.style['outline-style'\] = "outset" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "double" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "none" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "solid" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "groove" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "dotted" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "dashed" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "inset" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "auto" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-style'\] = "ridge" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini
new file mode 100644
index 00000000000..1a42df11fb0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini
@@ -0,0 +1,61 @@
+[outline-valid-mandatory.html]
+  [e.style['outline'\] = "double" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "thick" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "medium" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "solid" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "dashed thin" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "1px" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "dotted" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "auto" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "inset" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "dashed" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "ridge" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "outset" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "none" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "calc(2em + 3ex)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "medium rgba(10, 20, 30, 0.4)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "rgba(10, 20, 30, 0.4)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "groove" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "0" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "3px ridge rgba(10, 20, 30, 0.4)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "thin" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-optional.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-optional.html.ini
new file mode 100644
index 00000000000..14be5edbd3c
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-optional.html.ini
@@ -0,0 +1,7 @@
+[outline-valid-optional.html]
+  [e.style['outline'\] = "invert dotted 1px" should set the property value]
+    expected: FAIL
+
+  [e.style['outline'\] = "invert" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-computed.html.ini
new file mode 100644
index 00000000000..53533b58872
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-computed.html.ini
@@ -0,0 +1,14 @@
+[outline-width-computed.html]
+  expected: ERROR
+  [Property outline-width value 'calc(10px + 0.5em)']
+    expected: FAIL
+
+  [Property outline-width value '10px']
+    expected: FAIL
+
+  [Property outline-width value 'calc(10px - 0.5em)']
+    expected: FAIL
+
+  [Property outline-width value '0.5em']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-valid.html.ini
new file mode 100644
index 00000000000..f547c763eaf
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-width-valid.html.ini
@@ -0,0 +1,22 @@
+[outline-width-valid.html]
+  [e.style['outline-width'\] = "thick" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "medium" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "thin" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "calc(2em + 3ex)" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "2em" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "0" should set the property value]
+    expected: FAIL
+
+  [e.style['outline-width'\] = "1px" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-computed.html.ini
new file mode 100644
index 00000000000..c589d0144c1
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-computed.html.ini
@@ -0,0 +1,13 @@
+[resize-computed.html]
+  [Property resize value 'none']
+    expected: FAIL
+
+  [Property resize value 'horizontal']
+    expected: FAIL
+
+  [Property resize value 'vertical']
+    expected: FAIL
+
+  [Property resize value 'both']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-valid.html.ini
new file mode 100644
index 00000000000..18bdb3ae3f4
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/resize-valid.html.ini
@@ -0,0 +1,13 @@
+[resize-valid.html]
+  [e.style['resize'\] = "vertical" should set the property value]
+    expected: FAIL
+
+  [e.style['resize'\] = "horizontal" should set the property value]
+    expected: FAIL
+
+  [e.style['resize'\] = "both" should set the property value]
+    expected: FAIL
+
+  [e.style['resize'\] = "none" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-computed.html.ini
new file mode 100644
index 00000000000..a7f0f6ee38b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-computed.html.ini
@@ -0,0 +1,7 @@
+[text-overflow-computed.html]
+  [Property text-overflow value 'ellipsis']
+    expected: FAIL
+
+  [Property text-overflow value 'clip']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-valid.html.ini
new file mode 100644
index 00000000000..4894f67872d
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/text-overflow-valid.html.ini
@@ -0,0 +1,7 @@
+[text-overflow-valid.html]
+  [e.style['text-overflow'\] = "ellipsis" should set the property value]
+    expected: FAIL
+
+  [e.style['text-overflow'\] = "clip" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-computed.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-computed.html.ini
new file mode 100644
index 00000000000..a54ed8d348e
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-computed.html.ini
@@ -0,0 +1,16 @@
+[user-select-computed.html]
+  [Property user-select value 'all']
+    expected: FAIL
+
+  [Property user-select value 'text']
+    expected: FAIL
+
+  [Property user-select value 'none']
+    expected: FAIL
+
+  [Property user-select value 'auto']
+    expected: FAIL
+
+  [Property user-select value 'contain']
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-valid.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-valid.html.ini
new file mode 100644
index 00000000000..cd251188365
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/user-select-valid.html.ini
@@ -0,0 +1,16 @@
+[user-select-valid.html]
+  [e.style['user-select'\] = "contain" should set the property value]
+    expected: FAIL
+
+  [e.style['user-select'\] = "all" should set the property value]
+    expected: FAIL
+
+  [e.style['user-select'\] = "none" should set the property value]
+    expected: FAIL
+
+  [e.style['user-select'\] = "text" should set the property value]
+    expected: FAIL
+
+  [e.style['user-select'\] = "auto" should set the property value]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/resize-change-margin.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/resize-change-margin.html.ini
new file mode 100644
index 00000000000..65dbf895460
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/resize-change-margin.html.ini
@@ -0,0 +1,2 @@
+[resize-change-margin.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-001.html.ini
new file mode 100644
index 00000000000..a891dd92952
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-001.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-002.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-002.html.ini
new file mode 100644
index 00000000000..a0c39da828f
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-002.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-002.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-003.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-003.html.ini
new file mode 100644
index 00000000000..c708106682b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-003.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-003.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-004.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-004.html.ini
new file mode 100644
index 00000000000..0d1aee8f2d1
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-004.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-004.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-006.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-006.html.ini
new file mode 100644
index 00000000000..291c480ff92
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-006.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-006.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-007.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-007.html.ini
new file mode 100644
index 00000000000..b59be5c6fb6
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-007.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-007.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-010.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-010.html.ini
new file mode 100644
index 00000000000..9a06d16073b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-010.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-010.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-011.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-011.html.ini
new file mode 100644
index 00000000000..66ce7d84a03
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-011.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-011.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-012.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-012.html.ini
new file mode 100644
index 00000000000..b52c4ce1545
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-012.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-012.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-013.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-013.html.ini
new file mode 100644
index 00000000000..75c4e08b666
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-013.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-013.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-014.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-014.html.ini
new file mode 100644
index 00000000000..9189ce4490d
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-014.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-014.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-015.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-015.html.ini
new file mode 100644
index 00000000000..ad294fc4268
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-015.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-015.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-022.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-022.html.ini
new file mode 100644
index 00000000000..250db902e44
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-022.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-022.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-023.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-023.html.ini
new file mode 100644
index 00000000000..42478fa0b21
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-023.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-023.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-024.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-024.html.ini
new file mode 100644
index 00000000000..3efcee3ee66
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-024.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-024.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-025.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-025.html.ini
new file mode 100644
index 00000000000..a7d356084b2
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-025.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-025.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-026.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-026.html.ini
new file mode 100644
index 00000000000..eed6b77be27
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-026.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-026.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-027.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-027.html.ini
new file mode 100644
index 00000000000..b5ce5dd8f10
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-027.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-027.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-028.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-028.html.ini
new file mode 100644
index 00000000000..e80dc1ebaa0
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-028.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-028.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-029.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-029.html.ini
new file mode 100644
index 00000000000..ac59b754126
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-029.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-029.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-change-color.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-change-color.html.ini
new file mode 100644
index 00000000000..5f89cf29316
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-change-color.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-change-color.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-indent-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-indent-001.html.ini
new file mode 100644
index 00000000000..3548640a19f
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-indent-001.html.ini
@@ -0,0 +1,2 @@
+[text-overflow-ellipsis-indent-001.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-width-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-width-001.html.ini
new file mode 100644
index 00000000000..64f9cfb890d
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/text-overflow-ellipsis-width-001.html.ini
@@ -0,0 +1,4 @@
+[text-overflow-ellipsis-width-001.html]
+  [Ellipsizing should not affect `offsetWidth` of inline boxes.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-menulist-button-002.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-menulist-button-002.html.ini
new file mode 100644
index 00000000000..2bbdeb8a116
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-menulist-button-002.html.ini
@@ -0,0 +1,2 @@
+[webkit-appearance-menulist-button-002.html]
+  expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-parsing.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-parsing.html.ini
new file mode 100644
index 00000000000..5f0c9dd7382
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-parsing.html.ini
@@ -0,0 +1,10 @@
+[webkit-appearance-parsing.html]
+  [parsing via modification of cssText]
+    expected: FAIL
+
+  [parsing via attribute change steps of CSS declaration block's owner node]
+    expected: FAIL
+
+  [parsing via creation of CSS declaration block]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-property.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-property.html.ini
new file mode 100644
index 00000000000..e7dd1b0b9ef
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-property.html.ini
@@ -0,0 +1,40 @@
+[webkit-appearance-property.html]
+  [removeProperty - camel-cased property name (ignored)]
+    expected: FAIL
+
+  [removeProperty - webkit-cased property name (ignored)]
+    expected: FAIL
+
+  [setProperty - CSS property name]
+    expected: FAIL
+
+  [property assignment - webkit-cased property name]
+    expected: FAIL
+
+  [setProperty - camel-cased property name (ignored)]
+    expected: FAIL
+
+  [property assignment - camel-cased property name]
+    expected: FAIL
+
+  [property access - CSS property name]
+    expected: FAIL
+
+  [removeProperty - CSS property name]
+    expected: FAIL
+
+  [property access - webkit-cased property name]
+    expected: FAIL
+
+  [property access - camel-cased property name]
+    expected: FAIL
+
+  [getPropertyValue - CSS property name]
+    expected: FAIL
+
+  [property assignment - CSS property name]
+    expected: FAIL
+
+  [setProperty - webkit-cased property name (ignored)]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-serialization.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-serialization.html.ini
new file mode 100644
index 00000000000..86a85e1ab42
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-ui/webkit-appearance-serialization.html.ini
@@ -0,0 +1,10 @@
+[webkit-appearance-serialization.html]
+  [serialization via CSSStyleRule]
+    expected: FAIL
+
+  [serialization via CSSStyleDeclaration]
+    expected: FAIL
+
+  [serialization via CSSMediaRule]
+    expected: FAIL
+
diff --git a/tests/wpt/mozilla/meta-layout-2020/css/box_sizing_border_box_a.html.ini b/tests/wpt/mozilla/meta-layout-2020/css/box_sizing_border_box_a.html.ini
deleted file mode 100644
index 13cc53ff470..00000000000
--- a/tests/wpt/mozilla/meta-layout-2020/css/box_sizing_border_box_a.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[box_sizing_border_box_a.html]
-  expected: FAIL
diff --git a/tests/wpt/mozilla/meta-layout-2020/css/image_percentage_dimen.html.ini b/tests/wpt/mozilla/meta-layout-2020/css/image_percentage_dimen.html.ini
deleted file mode 100644
index a21b4b1010c..00000000000
--- a/tests/wpt/mozilla/meta-layout-2020/css/image_percentage_dimen.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[image_percentage_dimen.html]
-  expected: FAIL