diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts
index aa15e74faf..7302687916 100644
--- a/src/ui/control/attribution_control.test.ts
+++ b/src/ui/control/attribution_control.test.ts
@@ -401,7 +401,7 @@ NodeList [
`);
});
- test('The attribute open="" SHOULD change on resize.', () => {
+ test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => {
Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
const attributionControl = new AttributionControl({
});
@@ -463,6 +463,206 @@ NodeList [
/>
,
]
+`);
+ });
+
+ test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => {
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+ const attributionControl = new AttributionControl({
+ });
+ map.addControl(attributionControl);
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+ });
+
+ test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => {
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+ const attributionControl = new AttributionControl({
+ });
+ map.addControl(attributionControl);
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+ });
+
+ test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => {
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+ const attributionControl = new AttributionControl({
+ });
+ map.addControl(attributionControl);
+ const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button');
+ simulate.click(toggle);
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
+`);
+
+ Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+ map.resize();
+
+ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
+NodeList [
+
+
+
+ ,
+]
`);
});
});