Autoscale in testing

docs-app/package.json

@@ -49,7 +49,7 @@
     "@embroider/broccoli-side-watch": "0.0.2-unstable.ba9fd29",
     "@embroider/compat": "^3.4.8",
     "@embroider/core": "^3.4.8",
-    "@embroider/macros": "^1.16.0",
+    "@embroider/macros": "^1.16.1",
     "@embroider/router": "^2.1.6",
     "@embroider/webpack": "^4.0.0",
     "@glimmer/component": "^1.1.2",

docs-app/tests/helpers/index.ts

@@ -5,8 +5,6 @@ import {
   type SetupTestOptions,
 } from 'ember-qunit';
 
-import { resetViewport } from './reset-viewport';
-
 // This file exists to provide wrappers around ember-qunit's
 // test setup functions. This way, you can easily extend the setup that is
 // needed per test type.
@@ -16,7 +14,6 @@ function setupApplicationTest(
   options?: SetupTestOptions,
 ): void {
   upstreamSetupApplicationTest(hooks, options);
-  resetViewport(hooks);
 
   // Additional setup for application tests can be done here.
   //
@@ -52,5 +49,4 @@ function setupTest(hooks: NestedHooks, options?: SetupTestOptions): void {
 export { setupApplicationTest, setupRenderingTest, setupTest };
 
 export * from './percy';
-export * from './reset-viewport';
 export * from './resize-container';

ember-container-query/package.json

@@ -66,6 +66,7 @@
   },
   "dependencies": {
     "@embroider/addon-shim": "^1.8.7",
+    "@embroider/macros": "^1.16.1",
     "decorator-transforms": "^1.2.1",
     "ember-element-helper": "^0.8.6",
     "ember-modifier": "^3.2.7 || ^4.1.0",

ember-container-query/src/modifiers/container-query.ts

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import { debounce as _debounce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
+import { isTesting, macroCondition } from '@embroider/macros';
 import type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';
 import Modifier from 'ember-modifier';
 
@@ -120,13 +121,14 @@ export default class ContainerQueryModifier<
   }
 
   private measureDimensions(element: Element): void {
-    const height = element.clientHeight;
-    const width = element.clientWidth;
+    const scale = macroCondition(isTesting()) ? 2 : 1;
+
+    const { height, width } = element.getBoundingClientRect();
 
     this.dimensions = {
       aspectRatio: width / height,
-      height,
-      width,
+      height: scale * height,
+      width: scale * width,
     };
   }