Bug 1322780 - Part 3: Let logical height, block-size, accept keywords. r=emilio

We should let block-size/min-block-size/max-block-size accept keywords as the
initial value, just like width in vertical writing mode or height in horizontal
writing mode.

Depends on D7536

Differential Revision: https://phabricator.services.mozilla.com/D14320

--HG--
extra : moz-landing-system : lando

layout/style/test/property_database.js

@@ -5937,13 +5937,16 @@ var gCSSProperties = {
     initial_values: [ "auto" ],
     prerequisites: { "display": "block" },
     other_values: [ "15px", "3em", "15%",
+      // These keywords are treated as initial value.
+      "max-content", "min-content", "-moz-fit-content", "-moz-available",
+      "-moz-max-content", "-moz-min-content",
       "calc(2px)",
       "calc(50%)",
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
     ],
-    invalid_values: [ "none", "max-content", "min-content", "-moz-fit-content", "-moz-available" ],
+    invalid_values: [ "none" ],
   },
   "border-block-end-color": {
     domProp: "borderBlockEndColor",
@@ -6192,13 +6195,16 @@ var gCSSProperties = {
     prerequisites: { "display": "block" },
     initial_values: [ "none" ],
     other_values: [ "30px", "50%",
+      // These keywords are treated as initial value.
+      "max-content", "min-content", "-moz-fit-content", "-moz-available",
+      "-moz-max-content", "-moz-min-content",
       "calc(2px)",
       "calc(50%)",
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
     ],
-    invalid_values: [ "auto", "5", "max-content", "min-content", "-moz-fit-content", "-moz-available" ]
+    invalid_values: [ "auto", "5" ]
   },
   "max-inline-size": {
     domProp: "maxInlineSize",
@@ -6232,6 +6238,9 @@ var gCSSProperties = {
     prerequisites: { "display": "block" },
     initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)" ],
     other_values: [ "30px", "50%",
+      // These keywords are treated as initial value.
+      "max-content", "min-content", "-moz-fit-content", "-moz-available",
+      "-moz-max-content", "-moz-min-content",
       "calc(-1%)",
       "calc(2px)",
       "calc(50%)",
@@ -6239,7 +6248,7 @@ var gCSSProperties = {
       "calc(25px*3)",
       "calc(3*25px + 50%)",
     ],
-    invalid_values: [ "none", "5", "max-content", "min-content", "-moz-fit-content", "-moz-available" ]
+    invalid_values: [ "none", "5" ]
   },
   "min-inline-size": {
     domProp: "minInlineSize",

layout/style/test/test_box_size_keywords.html

@@ -111,50 +111,50 @@ var gTests = [
   { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "min-content", computed_value: "20px", },
   { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "max-content", computed_value: "20px", },
   { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-fit-content", computed_value: "20px", },
-  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "20px", },
   { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", },
   { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "min-content", computed_value: "min-content", },
   { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "max-content", computed_value: "max-content", },
   { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
-  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
   { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", },
   { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "min-content", computed_value: "min-content", },
   { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "max-content", computed_value: "max-content", },
   { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
-  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
   { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-available", computed_value: "20px", },
   { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "min-content", computed_value: "20px", },
   { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "max-content", computed_value: "20px", },
   { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-fit-content", computed_value: "20px", },
-  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "20px", },
   { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", },
   { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "min-content", computed_value: "min-content", },
   { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "max-content", computed_value: "max-content", },
   { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
-  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
   { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", },
   { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "min-content", computed_value: "min-content", },
   { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "max-content", computed_value: "max-content", },
   { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
-  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "30px", },
-  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
 ];
 
 gTests.forEach(function(t) {

layout/style/test/test_value_computation.html

@@ -96,6 +96,8 @@ var gSwapInitialWhenHaveFrame = {
   // value, i.e. `auto`, given the prerequisites of only 'display: block'.
   "height": [ "-moz-max-content", "-moz-min-content", "-moz-fit-content",
               "-moz-available", "max-content", "min-content" ],
+  "block-size": [ "-moz-max-content", "-moz-min-content", "-moz-fit-content",
+                  "-moz-available", "max-content", "min-content" ],
 };
 
 function swap_when_frame(property, value) {

servo/components/style/properties/longhands/position.mako.rs

@@ -244,21 +244,12 @@ ${helpers.predefined_type(
         if logical:
             spec = "https://drafts.csswg.org/css-logical-props/#propdef-%s"
     %>
-    // NOTE: Block-size doesn't support -moz-*-content keywords, since they make
-    // no sense on the block axis, but it simplifies things the have that it has
-    // the same type as the other properties, since otherwise we'd need to
-    // handle logical props where the types are different, which looks like a
-    // pain.
     % if product == "gecko":
-        <%
-            parse_function = "parse" if size != "block-size" else "parse_disallow_keyword"
-        %>
         // width, height, block-size, inline-size
         ${helpers.predefined_type(
             size,
             "MozLength",
             "computed::MozLength::auto()",
-            parse_function,
             logical=logical,
             logical_group="size",
             allow_quirks=not logical,
@@ -272,7 +263,6 @@ ${helpers.predefined_type(
             "min-%s" % size,
             "MozLength",
             "computed::MozLength::auto()",
-            parse_function,
             logical=logical,
             logical_group="min-size",
             allow_quirks=not logical,
@@ -284,7 +274,6 @@ ${helpers.predefined_type(
             "max-%s" % size,
             "MaxLength",
             "computed::MaxLength::none()",
-            parse_function,
             logical=logical,
             logical_group="max-size",
             allow_quirks=not logical,

servo/components/style/values/specified/length.rs

@@ -1264,17 +1264,6 @@ impl Parse for MozLength {
 }
 
 impl MozLength {
-    /// Parses, without quirks, and disallowing ExtremumLength values.
-    ///
-    /// Used for logical props in the block direction.
-    pub fn parse_disallow_keyword<'i, 't>(
-        context: &ParserContext,
-        input: &mut Parser<'i, 't>,
-    ) -> Result<Self, ParseError<'i>> {
-        let length = LengthOrPercentageOrAuto::parse_non_negative(context, input)?;
-        Ok(GenericMozLength::LengthOrPercentageOrAuto(length))
-    }
-
     /// Parses, with quirks.
     pub fn parse_quirky<'i, 't>(
         context: &ParserContext,
@@ -1316,17 +1305,6 @@ impl Parse for MaxLength {
 }
 
 impl MaxLength {
-    /// Parses, without quirks, and disallowing ExtremumLength values.
-    ///
-    /// Used for logical props in the block direction.
-    pub fn parse_disallow_keyword<'i, 't>(
-        context: &ParserContext,
-        input: &mut Parser<'i, 't>,
-    ) -> Result<Self, ParseError<'i>> {
-        let length = LengthOrPercentageOrNone::parse_non_negative(context, input)?;
-        Ok(GenericMaxLength::LengthOrPercentageOrNone(length))
-    }
-
     /// Parses, with quirks.
     pub fn parse_quirky<'i, 't>(
         context: &ParserContext,

testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("block-size", "none");
+
+test_invalid_value("block-size", "min-content available");
+test_invalid_value("block-size", "max-content 10px");
+test_invalid_value("block-size", "20% available");
+
+test_invalid_value("block-size", "-10px");
+test_invalid_value("block-size", "-20%");
+test_invalid_value("block-size", "60");
+test_invalid_value("block-size", "10px 20%");
+
+test_invalid_value("block-size", "10px border-box");
+test_invalid_value("block-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("block-size", "auto");
+
+test_valid_value("block-size", "10px");
+test_valid_value("block-size", "20%");
+test_valid_value("block-size", "calc(2em + 3ex)");
+
+test_valid_value("block-size", "min-content");
+test_valid_value("block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("block-size", "fit-content(100px)");
+// test_valid_value("block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("inline-size", "none");
+
+test_invalid_value("inline-size", "min-content available");
+test_invalid_value("inline-size", "max-content 10px");
+test_invalid_value("inline-size", "20% available");
+
+test_invalid_value("inline-size", "-10px");
+test_invalid_value("inline-size", "-20%");
+test_invalid_value("inline-size", "60");
+test_invalid_value("inline-size", "10px 20%");
+
+test_invalid_value("inline-size", "10px border-box");
+test_invalid_value("inline-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("inline-size", "auto");
+
+test_valid_value("inline-size", "10px");
+test_valid_value("inline-size", "20%");
+test_valid_value("inline-size", "calc(2em + 3ex)");
+
+test_valid_value("inline-size", "min-content");
+test_valid_value("inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("inline-size", "fit-content(100px)");
+// test_valid_value("inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("max-block-size", "auto");
+
+test_invalid_value("max-block-size", "min-content available");
+test_invalid_value("max-block-size", "max-content 10px");
+test_invalid_value("max-block-size", "20% available");
+
+test_invalid_value("max-block-size", "-10px");
+test_invalid_value("max-block-size", "-20%");
+test_invalid_value("max-block-size", "60");
+test_invalid_value("max-block-size", "10px 20%");
+
+test_invalid_value("max-block-size", "10px border-box");
+test_invalid_value("max-block-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("max-block-size", "none");
+
+test_valid_value("max-block-size", "10px");
+test_valid_value("max-block-size", "20%");
+test_valid_value("max-block-size", "calc(2em + 3ex)");
+
+test_valid_value("max-block-size", "min-content");
+test_valid_value("max-block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("max-block-size", "fit-content(100px)");
+// test_valid_value("max-block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("max-inline-size", "auto");
+
+test_invalid_value("max-inline-size", "min-content available");
+test_invalid_value("max-inline-size", "max-content 10px");
+test_invalid_value("max-inline-size", "20% available");
+
+test_invalid_value("max-inline-size", "-10px");
+test_invalid_value("max-inline-size", "-20%");
+test_invalid_value("max-inline-size", "60");
+test_invalid_value("max-inline-size", "10px 20%");
+
+test_invalid_value("max-inline-size", "10px border-box");
+test_invalid_value("max-inline-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("max-inline-size", "none");
+
+test_valid_value("max-inline-size", "10px");
+test_valid_value("max-inline-size", "20%");
+test_valid_value("max-inline-size", "calc(2em + 3ex)");
+
+test_valid_value("max-inline-size", "min-content");
+test_valid_value("max-inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("max-inline-size", "fit-content(100px)");
+// test_valid_value("max-inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("min-block-size", "none");
+
+test_invalid_value("min-block-size", "min-content available");
+test_invalid_value("min-block-size", "max-content 10px");
+test_invalid_value("min-block-size", "20% available");
+
+test_invalid_value("min-block-size", "-10px");
+test_invalid_value("min-block-size", "-20%");
+test_invalid_value("min-block-size", "60");
+test_invalid_value("min-block-size", "10px 20%");
+
+test_invalid_value("min-block-size", "10px border-box");
+test_invalid_value("min-block-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("min-block-size", "auto");
+
+test_valid_value("min-block-size", "10px");
+test_valid_value("min-block-size", "20%");
+test_valid_value("min-block-size", "calc(2em + 3ex)");
+
+test_valid_value("min-block-size", "min-content");
+test_valid_value("min-block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("min-block-size", "fit-content(100px)");
+// test_valid_value("min-block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("min-inline-size", "none");
+
+test_invalid_value("min-inline-size", "min-content available");
+test_invalid_value("min-inline-size", "max-content 10px");
+test_invalid_value("min-inline-size", "20% available");
+
+test_invalid_value("min-inline-size", "-10px");
+test_invalid_value("min-inline-size", "-20%");
+test_invalid_value("min-inline-size", "60");
+test_invalid_value("min-inline-size", "10px 20%");
+
+test_invalid_value("min-inline-size", "10px border-box");
+test_invalid_value("min-inline-size", "content-box 20%");
+</script>
+</body>
+</html>

testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("min-inline-size", "auto");
+
+test_valid_value("min-inline-size", "10px");
+test_valid_value("min-inline-size", "20%");
+test_valid_value("min-inline-size", "calc(2em + 3ex)");
+
+test_valid_value("min-inline-size", "min-content");
+test_valid_value("min-inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("min-inline-size", "fit-content(100px)");
+// test_valid_value("min-inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>