From 5daf8f1435e467ca4017984d88400f849397d206 Mon Sep 17 00:00:00 2001
From: Satoshi Qazi Muhammed <info@pezkuwichain.io>
Date: Thu, 8 Oct 2026 11:08:22 +0400
Subject: [PATCH] ui-shared: test the beachball container through public style
 accessors

The two style tests read CSSStyleDeclaration._values, a private store
whose layout changed in cssstyle 4.6; with it, `background` is not a
key there and both tests failed (hidden until now by
continue-on-error). They compare style.background, style.borderRadius
and the rest instead. Setting a different default background turns
both red.
---
 .../src/icons/beachball/container.spec.ts     | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/ui-shared/src/icons/beachball/container.spec.ts b/packages/ui-shared/src/icons/beachball/container.spec.ts
index 9d2e994c..72a63125 100644
--- a/packages/ui-shared/src/icons/beachball/container.spec.ts
+++ b/packages/ui-shared/src/icons/beachball/container.spec.ts
@@ -1,4 +1,4 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// Copyright 2017-2026 @pezkuwi/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 /// <reference types="@pezkuwi/dev-test/globals.d.ts" />
@@ -6,13 +6,23 @@
 import { container } from './container.js';
 
 describe('container', (): void => {
+  // Read through the public CSSStyleDeclaration accessors; the private _values
+  // store these tests used to read is laid out differently by each cssstyle release.
+  const styles = ({ style }: HTMLElement) => ({
+    background: style.background,
+    borderRadius: style.borderRadius,
+    display: style.display,
+    height: style.height,
+    margin: style.margin,
+    overflow: style.overflow,
+    padding: style.padding,
+    width: style.width
+  });
+
   it('applies default styles', (): void => {
-    expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-      (container(100).style as any)._values
-    ).toMatchObject({
+    expect(styles(container(100))).toEqual({
       background: 'white',
-      'border-radius': '50px',
+      borderRadius: '50px',
       display: 'inline-block',
       height: '100px',
       margin: '0px',
@@ -23,12 +33,9 @@ describe('container', (): void => {
   });
 
   it('overrides with supplied styles', (): void => {
-    expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-      (container(50, 'black', '', { display: 'block' }).style as any)._values
-    ).toMatchObject({
+    expect(styles(container(50, 'black', '', { display: 'block' }))).toEqual({
       background: 'black',
-      'border-radius': '25px',
+      borderRadius: '25px',
       display: 'block',
       height: '50px',
       margin: '0px',