Add properties container-type, mix-blend-mode and isolation

.changeset/great-dodos-cheer.md

@@ -0,0 +1,5 @@
+---
+"@siteimprove/alfa-style": minor
+---
+
+**Added:** Style properties `container-type`, `mix-blend-mode` and `isolation` were added.

packages/alfa-style/src/longhands.ts

@@ -53,6 +53,7 @@ import BoxShadow from "./property/box-shadow.js";
 import Clip from "./property/clip.js";
 import ClipPath from "./property/clip-path.js";
 import Color from "./property/color.js";
+import ContainerType from "./property/container-type.js";
 import Cursor from "./property/cursor.js";
 import Display from "./property/display.js";
 import FlexDirection from "./property/flex-direction.js";
@@ -73,6 +74,7 @@ import InsetBlockEnd from "./property/inset-block-end.js";
 import InsetBlockStart from "./property/inset-block-start.js";
 import InsetInlineEnd from "./property/inset-inline-end.js";
 import InsetInlineStart from "./property/inset-inline-start.js";
+import Isolation from "./property/isolation.js";
 import Left from "./property/left.js";
 import LetterSpacing from "./property/letter-spacing.js";
 import LineHeight from "./property/line-height.js";
@@ -82,6 +84,7 @@ import MarginRight from "./property/margin-right.js";
 import MarginTop from "./property/margin-top.js";
 import MinHeight from "./property/min-height.js";
 import MinWidth from "./property/min-width.js";
+import MixBlendMode from "./property/mix-blend-mode.js";
 import Opacity from "./property/opacity.js";
 import OutlineColor from "./property/outline-color.js";
 import OutlineOffset from "./property/outline-offset.js";
@@ -230,6 +233,7 @@ export namespace Longhands {
     "clip-path": ClipPath,
     clip: Clip,
     color: Color,
+    "container-type": ContainerType,
     cursor: Cursor,
     display: Display,
     "flex-direction": FlexDirection,
@@ -250,6 +254,7 @@ export namespace Longhands {
     "inset-block-start": InsetBlockStart,
     "inset-inline-end": InsetInlineEnd,
     "inset-inline-start": InsetInlineStart,
+    isolation: Isolation,
     left: Left,
     "letter-spacing": LetterSpacing,
     "line-height": LineHeight,
@@ -259,6 +264,7 @@ export namespace Longhands {
     "margin-top": MarginTop,
     "min-height": MinHeight,
     "min-width": MinWidth,
+    "mix-blend-mode": MixBlendMode,
     opacity: Opacity,
     "outline-color": OutlineColor,
     "outline-offset": OutlineOffset,

packages/alfa-style/src/property/container-type.ts

@@ -0,0 +1,12 @@
+import { Longhand } from "../longhand.js";
+
+/**
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/container-type}
+ * @internal
+ */
+export default Longhand.fromKeywords(
+  { inherits: false },
+  "normal",
+  "size",
+  "inline-size",
+);

packages/alfa-style/src/property/isolation.ts

@@ -0,0 +1,7 @@
+import { Longhand } from "../longhand.js";
+
+/**
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/isolation}
+ * @internal
+ */
+export default Longhand.fromKeywords({ inherits: false }, "auto", "isolate");

packages/alfa-style/src/property/mix-blend-mode.ts

@@ -0,0 +1,27 @@
+import { Longhand } from "../longhand.js";
+
+/**
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode}
+ * @internal
+ */
+export default Longhand.fromKeywords(
+  { inherits: false },
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+  "plus-darker",
+  "plus-lighter",
+);

packages/alfa-style/src/tsconfig.json

@@ -110,6 +110,7 @@
     "./property/clip.ts",
     "./property/clip-path.ts",
     "./property/color.ts",
+    "./property/container-type.ts",
     "./property/cursor.ts",
     "./property/display.ts",
     "./property/flex-direction.ts",
@@ -136,6 +137,7 @@
     "./property/inset-inline.ts",
     "./property/inset-inline-end.ts",
     "./property/inset-inline-start.ts",
+    "./property/isolation.ts",
     "./property/left.ts",
     "./property/letter-spacing.ts",
     "./property/line-height.ts",
@@ -146,6 +148,7 @@
     "./property/margin-top.ts",
     "./property/min-height.ts",
     "./property/min-width.ts",
+    "./property/mix-blend-mode.ts",
     "./property/opacity.ts",
     "./property/outline.ts",
     "./property/outline-color.ts",

packages/alfa-style/test/property/container-type.spec.tsx

@@ -0,0 +1,59 @@
+import { h } from "@siteimprove/alfa-dom/h";
+import { test } from "@siteimprove/alfa-test";
+
+import { Device } from "@siteimprove/alfa-device";
+
+import { Style } from "../../dist/style.js";
+
+const device = Device.standard();
+
+test("initial value is `normal`", (t) => {
+  const element = <div>Hello</div>;
+
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("container-type").toJSON(), {
+    value: { type: "keyword", value: "normal" },
+    source: null,
+  });
+});
+
+test("property is not inherited", (t) => {
+  const element = <div>Hello</div>;
+
+  h.document(
+    [<div class="container">{element}</div>],
+    [
+      h.sheet([
+        h.rule.style(".container", [h.declaration("container-type", "size")]),
+      ]),
+    ],
+  );
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("container-type").toJSON(), {
+    value: { type: "keyword", value: "normal" },
+    source: null,
+  });
+});
+
+test("#computed() parses the keywords", (t) => {
+  for (const kw of ["normal", "size", "inline-size"] as const) {
+    const element = <div class="container">Hello</div>;
+
+    h.document(
+      [element],
+      [
+        h.sheet([
+          h.rule.style(".container", [h.declaration("container-type", kw)]),
+        ]),
+      ],
+    );
+    const style = Style.from(element, device);
+
+    t.deepEqual(style.computed("container-type").toJSON(), {
+      value: { type: "keyword", value: kw },
+      source: h.declaration("container-type", kw).toJSON(),
+    });
+  }
+});

packages/alfa-style/test/property/isolation.spec.tsx

@@ -0,0 +1,55 @@
+import { h } from "@siteimprove/alfa-dom/h";
+import { test } from "@siteimprove/alfa-test";
+
+import { Device } from "@siteimprove/alfa-device";
+
+import { Style } from "../../dist/style.js";
+
+const device = Device.standard();
+
+test("initial value is `auto`", (t) => {
+  const element = <div>Hello</div>;
+
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("isolation").toJSON(), {
+    value: { type: "keyword", value: "auto" },
+    source: null,
+  });
+});
+
+test("property is not inherited", (t) => {
+  const element = <div>Hello</div>;
+
+  h.document(
+    [<div class="container">{element}</div>],
+    [
+      h.sheet([
+        h.rule.style(".container", [h.declaration("isolation", "isolate")]),
+      ]),
+    ],
+  );
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("isolation").toJSON(), {
+    value: { type: "keyword", value: "auto" },
+    source: null,
+  });
+});
+
+test("#computed() parses the keywords", (t) => {
+  for (const kw of ["auto", "isolate"] as const) {
+    const element = <div class="container">Hello</div>;
+
+    h.document(
+      [element],
+      [h.sheet([h.rule.style(".container", [h.declaration("isolation", kw)])])],
+    );
+    const style = Style.from(element, device);
+
+    t.deepEqual(style.computed("isolation").toJSON(), {
+      value: { type: "keyword", value: kw },
+      source: h.declaration("isolation", kw).toJSON(),
+    });
+  }
+});

packages/alfa-style/test/property/mix-blend-mode.spec.tsx

@@ -0,0 +1,80 @@
+import { h } from "@siteimprove/alfa-dom/h";
+import { test } from "@siteimprove/alfa-test";
+
+import { Device } from "@siteimprove/alfa-device";
+
+import { Style } from "../../dist/style.js";
+
+const device = Device.standard();
+
+test("initial value is `normal`", (t) => {
+  const element = <div>Hello</div>;
+
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("mix-blend-mode").toJSON(), {
+    value: { type: "keyword", value: "normal" },
+    source: null,
+  });
+});
+
+test("property is not inherited", (t) => {
+  const element = <div>Hello</div>;
+
+  h.document(
+    [<div class="container">{element}</div>],
+    [
+      h.sheet([
+        h.rule.style(".container", [
+          h.declaration("mix-blend-mode", "multiply"),
+        ]),
+      ]),
+    ],
+  );
+  const style = Style.from(element, device);
+
+  t.deepEqual(style.computed("mix-blend-mode").toJSON(), {
+    value: { type: "keyword", value: "normal" },
+    source: null,
+  });
+});
+
+test("#computed() parses the keywords", (t) => {
+  for (const kw of [
+    "normal",
+    "multiply",
+    "screen",
+    "overlay",
+    "darken",
+    "lighten",
+    "color-dodge",
+    "color-burn",
+    "hard-light",
+    "soft-light",
+    "difference",
+    "exclusion",
+    "hue",
+    "saturation",
+    "color",
+    "luminosity",
+    "plus-darker",
+    "plus-lighter",
+  ] as const) {
+    const element = <div class="container">Hello</div>;
+
+    h.document(
+      [element],
+      [
+        h.sheet([
+          h.rule.style(".container", [h.declaration("mix-blend-mode", kw)]),
+        ]),
+      ],
+    );
+    const style = Style.from(element, device);
+
+    t.deepEqual(style.computed("mix-blend-mode").toJSON(), {
+      value: { type: "keyword", value: kw },
+      source: h.declaration("mix-blend-mode", kw).toJSON(),
+    });
+  }
+});

packages/alfa-style/test/tsconfig.json

@@ -40,15 +40,18 @@
     "./property/border-image-width.spec.tsx",
     "./property/box-shadow.spec.tsx",
     "./property/clip.spec.tsx",
+    "./property/container-type.spec.tsx",
     "./property/cursor.spec.tsx",
     "./property/display.spec.tsx",
     "./property/font.spec.tsx",
     "./property/font-family.spec.tsx",
     "./property/font-size.spec.tsx",
     "./property/font-variant.spec.tsx",
     "./property/inset-block.spec.tsx",
+    "./property/isolation.spec.tsx",
     "./property/line-height.spec.tsx",
     "./property/margin.spec.tsx",
+    "./property/mix-blend-mode.spec.tsx",
     "./property/opacity.spec.tsx",
     "./property/outline.spec.tsx",
     "./property/rotate.spec.tsx",