diff --git a/pages/container-queries.page.tsx b/pages/container-queries.page.tsx
index 294b4c9efc..4698f92f55 100644
--- a/pages/container-queries.page.tsx
+++ b/pages/container-queries.page.tsx
@@ -21,7 +21,11 @@ function MeasureReporter(props: { id?: string; style?: React.CSSProperties; type
[props.type]
);
if (value === null) {
- return
Loading...
;
+ return (
+
+ Loading...
+
+ );
}
return (
@@ -72,8 +76,15 @@ export default function ColumnLayoutPage() {
type={measureType}
/>
+
Reports content-box dimensions when border is present
+
+
Adjusts as the element changes size (resize browser)
-
+
Returns correct breakpoints
diff --git a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
index ee4b698526..ea29688462 100644
--- a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
+++ b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
@@ -24,6 +24,12 @@ jest.mock('../../../lib/components/popover/utils/positions', () => {
};
});
+jest.mock('@cloudscape-design/component-toolkit', () => ({
+ ...jest.requireActual('@cloudscape-design/component-toolkit'),
+ // Mock the chart width with enough space to fit all expected elements (labels, x ticks, etc)
+ useContainerQuery: () => [900, null],
+}));
+
jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
getIsRtl: jest.fn().mockReturnValue(false),
@@ -113,7 +119,7 @@ const thresholdSeries: MixedLineBarChartProps.ThresholdSeries = {
// Transformation to fallback colors for browsers that don't support them are covered by the `parseCssVariable` utility.
const originalCSS = window.CSS;
-let originalGetComputedStyle: Window['getComputedStyle'];
+const originalGetComputedStyle = window.getComputedStyle;
const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
const result = originalGetComputedStyle(...args);
result.borderWidth = '2px'; // Approximate mock value for the popover body' border width
@@ -124,9 +130,7 @@ const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
beforeEach(() => {
window.CSS.supports = () => true;
- originalGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = fakeGetComputedStyle;
-
jest.resetAllMocks();
});
afterEach(() => {