Use Tuple in mask-size

Siteimprove · Dec 12, 2024 · 978b09f · 978b09f
1 parent beafecf
commit 978b09f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 43 deletions.
diff --git a/packages/alfa-style/src/property/mask-size.ts b/packages/alfa-style/src/property/mask-size.ts
@@ -1,10 +1,11 @@
-import { Keyword, LengthPercentage, List } from "@siteimprove/alfa-css";
+import { Keyword, LengthPercentage, List, Tuple } from "@siteimprove/alfa-css";
 import { Parser } from "@siteimprove/alfa-parser";
+import { Selective } from "@siteimprove/alfa-selective";
 
 import { Longhand } from "../longhand.js";
 import { Resolver } from "../resolver.js";
 
-const { either } = Parser;
+const { either, map } = Parser;
 
 type Specified = List<Specified.Item>;
 
@@ -13,7 +14,9 @@ type Specified = List<Specified.Item>;
  */
 export namespace Specified {
   export type Item =
-    | List<LengthPercentage | Keyword<"auto">>
+    | Tuple<
+        [LengthPercentage | Keyword<"auto">, LengthPercentage | Keyword<"auto">]
+      >
     | Keyword<"cover">
     | Keyword<"contain">;
 }
@@ -24,10 +27,13 @@ type Computed = Specified;
  * @internal
  */
 export const parse = either(
-  List.parseSpaceSeparated(
-    either(LengthPercentage.parse, Keyword.parse("auto")),
-    1,
-    2,
+  map(
+    List.parseSpaceSeparated(
+      either(LengthPercentage.parse, Keyword.parse("auto")),
+      1,
+      2,
+    ),
+    ([horizontal, vertical = horizontal]) => Tuple.of(horizontal, vertical),
   ),
   Keyword.parse("cover", "contain"),
 );
@@ -37,7 +43,7 @@ const parseList = List.parseCommaSeparated(parse);
 /**
  * @internal
  */
-export const initialItem = List.of([Keyword.of("auto")], " ");
+export const initialItem = Tuple.of(Keyword.of("auto"), Keyword.of("auto"));
 
 /**
  * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size}
@@ -49,19 +55,22 @@ export default Longhand.of<Specified, Computed>(
   parseList,
   (value, style) => {
     const layers = Resolver.layers(style, "mask-image");
+    const lengthResolver = LengthPercentage.partiallyResolve(
+      Resolver.length(style),
+    );
 
     return value.map((sizes) =>
       layers(
         sizes.map((size) =>
-          Keyword.isKeyword(size)
-            ? size
-            : size.map((value) =>
-                Keyword.isKeyword(value)
-                  ? value
-                  : LengthPercentage.partiallyResolve(Resolver.length(style))(
-                      value,
-                    ),
-              ),
+          Selective.of(size)
+            .if(Tuple.isTuple, (tuple) => {
+              const [h, v] = tuple.values;
+              return Tuple.of(
+                Keyword.isKeyword(h) ? h : lengthResolver(h),
+                Keyword.isKeyword(v) ? v : lengthResolver(v),
+              );
+            })
+            .get(),
         ),
       ),
     );

diff --git a/packages/alfa-style/test/property/mask-size.spec.tsx b/packages/alfa-style/test/property/mask-size.spec.tsx
@@ -15,14 +15,18 @@ test("initial value is auto", (t) => {
         separator: ", ",
         values: [
           {
-            type: "list",
-            separator: " ",
-            values: [{ type: "keyword", value: "auto" }],
+            type: "tuple",
+            values: [
+              { type: "keyword", value: "auto" },
+              { type: "keyword", value: "auto" },
+            ],
           },
           {
-            type: "list",
-            separator: " ",
-            values: [{ type: "keyword", value: "auto" }],
+            type: "tuple",
+            values: [
+              { type: "keyword", value: "auto" },
+              { type: "keyword", value: "auto" },
+            ],
           },
         ],
       },
@@ -51,9 +55,11 @@ test("#computed parses percentage width", (t) => {
       separator: ", ",
       values: [
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "percentage", value: 0.5 }],
+          type: "tuple",
+          values: [
+            { type: "percentage", value: 0.5 },
+            { type: "percentage", value: 0.5 },
+          ],
         },
       ],
     },
@@ -68,9 +74,11 @@ test("#computed resolves em width", (t) => {
       separator: ", ",
       values: [
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "length", unit: "px", value: 48 }],
+          type: "tuple",
+          values: [
+            { type: "length", unit: "px", value: 48 },
+            { type: "length", unit: "px", value: 48 },
+          ],
         },
       ],
     },
@@ -85,9 +93,11 @@ test("#computed parses pixel width", (t) => {
       separator: ", ",
       values: [
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "length", unit: "px", value: 12 }],
+          type: "tuple",
+          values: [
+            { type: "length", unit: "px", value: 12 },
+            { type: "length", unit: "px", value: 12 },
+          ],
         },
       ],
     },
@@ -104,8 +114,7 @@ test("#computed parses width and height", (t) => {
         separator: ", ",
         values: [
           {
-            type: "list",
-            separator: " ",
+            type: "tuple",
             values: [
               { type: "length", unit: "px", value: 48 },
               { type: "percentage", value: 0.25 },

diff --git a/packages/alfa-style/test/property/mask.spec.tsx b/packages/alfa-style/test/property/mask.spec.tsx
@@ -47,9 +47,11 @@ test("longhands resolve correctly from shorthand", (t) => {
       separator: ", ",
       values: [
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "length", unit: "px", value: 12 }],
+          type: "tuple",
+          values: [
+            { type: "length", unit: "px", value: 12 },
+            { type: "length", unit: "px", value: 12 },
+          ],
         },
       ],
     },
@@ -217,14 +219,18 @@ test("longhands resolves correctly from shorthand with layers", (t) => {
       separator: ", ",
       values: [
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "length", unit: "px", value: 12 }],
+          type: "tuple",
+          values: [
+            { type: "length", unit: "px", value: 12 },
+            { type: "length", unit: "px", value: 12 },
+          ],
         },
         {
-          type: "list",
-          separator: " ",
-          values: [{ type: "keyword", value: "auto" }],
+          type: "tuple",
+          values: [
+            { type: "keyword", value: "auto" },
+            { type: "keyword", value: "auto" },
+          ],
         },
       ],
     },