blob: 2a60b83886311c8a358b0c3eeeae8d4106df8d01 [file] [log] [blame]
Dhruv Srivastava5e4ab102022-10-07 14:04:27 +02001/**
2 * @license
3 * Copyright 2022 Google LLC
4 * SPDX-License-Identifier: Apache-2.0
5 */
6
7import '../../test/common-test-setup';
8import {fixture, html, assert} from '@open-wc/testing';
9import {FitController} from './fit-controller';
10import {LitElement} from 'lit';
11import {customElement} from 'lit/decorators.js';
12
13@customElement('fit-element')
14class FitElement extends LitElement {
15 fitController = new FitController(this);
16
17 horizontalOffset = 0;
18
19 verticalOffset = 0;
20
21 override render() {
22 return html`<div></div>`;
23 }
24}
25
26suite('fit controller', () => {
27 let element: FitElement;
28 setup(async () => {
29 element = await fixture(html`<fit-element></fit-element>`);
30 });
31
32 test('refit positioning', async () => {
33 const hostRect = new DOMRect(0, 0, 50, 50);
34
35 const positionRect = new DOMRect(37, 37, 300, 60);
36
37 const windowRect = new DOMRect(0, 0, 600, 600);
38
39 element.fitController.calculateAndSetPositions(
40 hostRect,
41 positionRect,
42 windowRect
43 );
44
45 assert.equal(element.style.top, '37px');
46 assert.equal(element.style.left, '37px');
47 });
48
49 test('refit positioning with offset', async () => {
50 const elementWithOffset: FitElement = await fixture(
51 html`<fit-element></fit-element>`
52 );
53 elementWithOffset.verticalOffset = 10;
54 elementWithOffset.horizontalOffset = 20;
55
56 const hostRect = new DOMRect(0, 0, 50, 50);
57
58 const positionRect = new DOMRect(37, 37, 300, 60);
59
60 const windowRect = new DOMRect(0, 0, 600, 600);
61
62 elementWithOffset.fitController.calculateAndSetPositions(
63 hostRect,
64 positionRect,
65 windowRect
66 );
67
68 assert.equal(elementWithOffset.style.top, '47px');
69 assert.equal(elementWithOffset.style.left, '57px');
70 });
71
72 test('host margin updates positioning', async () => {
73 const hostRect = new DOMRect(0, 0, 50, 50);
74
75 const positionRect = new DOMRect(37, 37, 300, 60);
76
77 const windowRect = new DOMRect(0, 0, 600, 600);
78
79 element.style.marginLeft = '10px';
80 element.style.marginTop = '10px';
81 element.fitController.calculateAndSetPositions(
82 hostRect,
83 positionRect,
84 windowRect
85 );
86
87 // is 10px extra from the previous test due to host margin
88 assert.equal(element.style.top, '47px');
89 assert.equal(element.style.left, '47px');
90 });
91
92 test('host minWidth, minHeight overrides positioning', async () => {
93 const hostRect = new DOMRect(0, 0, 50, 50);
94
95 const positionRect = new DOMRect(37, 37, 300, 60);
96
97 const windowRect = new DOMRect(0, 0, 600, 600);
98
99 element.style.marginLeft = '10px';
100 element.style.marginTop = '10px';
101
102 element.style.minHeight = '50px';
103 element.style.minWidth = '60px';
104
105 element.fitController.calculateAndSetPositions(
106 hostRect,
107 positionRect,
108 windowRect
109 );
110
111 assert.equal(element.style.top, '47px');
112
113 // Should be 47 like the previous test but that would make it overall
114 // smaller in width than the minWidth defined
115 assert.equal(element.style.left, '37px');
116 assert.equal(element.style.maxWidth, '60px');
117 });
118
119 test('positioning happens within window size ', async () => {
120 const hostRect = new DOMRect(0, 0, 50, 50);
121
122 const positionRect = new DOMRect(37, 37, 300, 60);
123
124 // window size is small hence limits the position
125 const windowRect = new DOMRect(0, 0, 50, 50);
126
127 element.style.marginLeft = '10px';
128 element.style.marginTop = '10px';
129
130 element.fitController.calculateAndSetPositions(
131 hostRect,
132 positionRect,
133 windowRect
134 );
135
136 assert.equal(element.style.top, '47px');
137 assert.equal(element.style.left, '47px');
138 // With the window size being 50, the element is styled with width 3px
139 // width = windowSize - leftPosition = 50 - 47 = 3px
140 // Without the window width restriction, in previous test maxWidth is 60px
141 assert.equal(element.style.maxWidth, '3px');
142 });
143});