Skip to content

Commit cf1d61e

Browse files
committed
Add tests for <map-link rel="stylesheet" media="..."> attributes
1 parent af3aed6 commit cf1d61e

File tree

9 files changed

+146
-14
lines changed

9 files changed

+146
-14
lines changed

src/map-link.js

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,9 @@ export class HTMLLinkElement extends HTMLElement {
277277
case 'image':
278278
case 'features':
279279
case 'query':
280+
// because we skip the attributeChangedCallback for initialization,
281+
// respect the disabled attribute which can be set by the author prior
282+
// to initialization
280283
if (!this.disabled) {
281284
this._initTemplateVars();
282285
await this._createTemplatedLink();
@@ -296,7 +299,9 @@ export class HTMLLinkElement extends HTMLElement {
296299
//this._createLegendLink();
297300
break;
298301
case 'stylesheet':
299-
this._createStylesheetLink();
302+
if (!this.disabled) {
303+
this._createStylesheetLink();
304+
}
300305
break;
301306
case 'alternate':
302307
this._createAlternateLink(); // add media attribute
@@ -305,6 +310,9 @@ export class HTMLLinkElement extends HTMLElement {
305310
// this._createLicenseLink();
306311
break;
307312
}
313+
// the media attribute uses / overrides the disabled attribute to enable or
314+
// disable the link, so at this point the #hasConnected must be true so
315+
// that the disabled attributeChangedCallback can have its desired side effect
308316
await this._registerMediaQuery(this.media);
309317
// create the type of templated leaflet layer appropriate to the rel value
310318
// image/map/features = templated(Image/Feature), tile=templatedTile,
@@ -361,11 +369,9 @@ export class HTMLLinkElement extends HTMLElement {
361369
case 'image':
362370
case 'features':
363371
case 'query':
364-
if (!this.disabled) {
365-
this._initTemplateVars();
366-
await this._createTemplatedLink();
367-
this.getLayerEl()._validateDisabled();
368-
}
372+
this._initTemplateVars();
373+
await this._createTemplatedLink();
374+
this.getLayerEl()._validateDisabled();
369375
break;
370376
case 'stylesheet':
371377
this._createStylesheetLink();
@@ -383,6 +389,8 @@ export class HTMLLinkElement extends HTMLElement {
383389
if (mq) {
384390
let map = this.getMapEl();
385391
if (!map) return;
392+
// have to wait until map has an extent i.e. is ready, because the
393+
// matchMedia function below relies on it for map related queries
386394
await map.whenReady();
387395

388396
// Remove listener from the old media query (if it exists)
@@ -398,6 +406,8 @@ export class HTMLLinkElement extends HTMLElement {
398406
// Clean up the existing listener
399407
this._mql.removeEventListener('change', this._changeHandler);
400408
delete this._mql;
409+
// unlike map-layer.disabled, map-link.disabled is an observed attribute
410+
this.disabled = false;
401411
}
402412
}
403413
_createAlternateLink(mapml) {

test/e2e/data/restaurants/restaurants.mapml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<map-meta name="extent" content="top-left-easting=1509080.1964270622,top-left-northing=-169400.558801122,bottom-right-easting=1512094.3357886747,bottom-right-northing=-172702.5654051304" ></map-meta>
1111
</map-head>
1212
<map-body>
13-
<map-feature id="restaurant_map-point.77" class="restaurant_map-point asian chinese">
13+
<map-feature id="restaurant_map-point.77" class="restaurant restaurant_map-point asian chinese">
1414
<map-featurecaption>Hung Sum Restaurant</map-featurecaption>
1515
<map-geometry>
1616
<map-point>
@@ -50,7 +50,7 @@
5050
</table>
5151
</map-properties>
5252
</map-feature>
53-
<map-feature id="restaurant_map-point.2" class="restaurant_map-point cajun">
53+
<map-feature id="restaurant_map-point.2" class="restaurant restaurant_map-point cajun">
5454
<map-featurecaption>Big Daddy's</map-featurecaption>
5555
<map-geometry>
5656
<map-point>
@@ -90,7 +90,7 @@
9090
</table>
9191
</map-properties>
9292
</map-feature>
93-
<map-feature id="restaurant_map-point.9" class="restaurant_map-point african">
93+
<map-feature id="restaurant_map-point.9" class="restaurant restaurant_map-point african">
9494
<map-featurecaption>Hareg Cafe &amp; Variety</map-featurecaption>
9595
<map-geometry>
9696
<map-point>
@@ -130,7 +130,7 @@
130130
</table>
131131
</map-properties>
132132
</map-feature>
133-
<map-feature id="restaurant_map-point.13" class="restaurant_map-point asian thai">
133+
<map-feature id="restaurant_map-point.13" class="restaurant restaurant_map-point asian thai">
134134
<map-featurecaption>Phucket Royal</map-featurecaption>
135135
<map-geometry>
136136
<map-point>
@@ -170,7 +170,7 @@
170170
</table>
171171
</map-properties>
172172
</map-feature>
173-
<map-feature id="restaurant_map-point.18" class="restaurant_map-point asian japanese">
173+
<map-feature id="restaurant_map-point.18" class="restaurant restaurant_map-point asian japanese">
174174
<map-featurecaption>Sushi 88</map-featurecaption>
175175
<map-geometry>
176176
<map-point>
@@ -242,7 +242,7 @@
242242
</table>
243243
</map-properties>
244244
</map-feature>
245-
<map-feature id="restaurant_polygon.2" class="restaurant_polygon mexican">
245+
<map-feature id="restaurant_polygon.2" class="restaurant restaurant_polygon mexican">
246246
<map-featurecaption>Banditos</map-featurecaption>
247247
<map-geometry>
248248
<map-point>
@@ -286,7 +286,7 @@
286286
</table>
287287
</map-properties>
288288
</map-feature>
289-
<map-feature id="restaurant_polygon.7" class="restaurant_polygon asian indian">
289+
<map-feature id="restaurant_polygon.7" class="restaurant restaurant_polygon asian indian">
290290
<map-featurecaption>India Palace</map-featurecaption>
291291
<map-geometry>
292292
<map-point>
@@ -338,7 +338,7 @@
338338
</table>
339339
</map-properties>
340340
</map-feature>
341-
<map-feature id="restaurant_polygon.20" class="restaurant_polygon italian">
341+
<map-feature id="restaurant_polygon.20" class="restaurant restaurant_polygon italian">
342342
<map-featurecaption>The Prescott</map-featurecaption>
343343
<map-geometry>
344344
<map-point>
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>map-link-stylesheet-media.html</title>
7+
<script type="module" src="mapml.js"></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
19+
supported, or if javascript is disabled. This needs to be defined separately
20+
from the above, because the `:not(:defined)` selector invalidates the entire
21+
declaration in browsers that do not support it. */
22+
map-layer {
23+
display: none;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
29+
<mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="14" lat="45.40954467619979" lon="-75.70168476290948" style="height: 500px;width:500px;">
30+
<map-layer data-testid="restaurants" label="Restaurants" checked="">
31+
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
32+
<map-extent units="OSMTILE" checked="">
33+
<!-- markers should be red on load -->
34+
<map-link rel="stylesheet" data-testid="stylesheet-link" href="red.css"></map-link>
35+
<map-select id="restaurants" name="cusine">
36+
<map-option value="restaurants" selected="selected">All cuisines</map-option>
37+
<map-option value="african">African</map-option>
38+
<map-option value="asian">Asian</map-option>
39+
<map-option value="cajun">Cajun</map-option>
40+
<map-option value="indian">Indian</map-option>
41+
<map-option value="italian">Italian</map-option>
42+
<map-option value="mexican">Mexican</map-option>
43+
</map-select>
44+
<map-link tref="restaurants/{cusine}.mapml" rel="features"></map-link>
45+
</map-extent>
46+
</map-layer>
47+
</mapml-viewer>
48+
</body>
49+
</html>
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { test, expect, chromium } from '@playwright/test';
2+
3+
test.describe('map-layer media attribute', () => {
4+
let page;
5+
let context;
6+
let viewer;
7+
let stylesheetLink;
8+
test.beforeAll(async function () {
9+
context = await chromium.launchPersistentContext('');
10+
page =
11+
context.pages().find((page) => page.url() === 'about:blank') ||
12+
(await context.newPage());
13+
await page.goto('map-link-stylesheet-media.html');
14+
await page.waitForTimeout(1000);
15+
viewer = page.getByTestId('viewer');
16+
stylesheetLink = page.locator('map-link[rel=stylesheet][href="red.css"]');
17+
});
18+
test(`when a map-link rel=stylesheet disables due to a media query, the styles\
19+
should be removed`,async ()=>{
20+
// map starts off at
21+
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
22+
maxDiffPixels: 20
23+
});
24+
await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)');
25+
await page.waitForTimeout(500);
26+
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
27+
maxDiffPixels: 20
28+
});
29+
});
30+
test(`when a map-link rel=stylesheet enables due to a mq being removed, the \
31+
styles should apply`, async ()=>{
32+
await stylesheetLink.evaluate((l) => l.removeAttribute('media'));
33+
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
34+
maxDiffPixels: 20
35+
});
36+
});
37+
38+
test(`when a map-link rel=stylesheet enables due to disabled attribute removed\
39+
ensure styles change`, async ()=>{
40+
await stylesheetLink.evaluate((l) => l.disabled = true);
41+
await page.waitForTimeout(500);
42+
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
43+
maxDiffPixels: 20
44+
});
45+
await stylesheetLink.evaluate((l) => l.disabled = false);
46+
await page.waitForTimeout(500);
47+
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
48+
maxDiffPixels: 20
49+
});
50+
});
51+
test(`when a map-link rel=stylesheet does not enable due to disabled attribute \
52+
removed while a non-matching media query is present, ensure that style does not \
53+
change`, async ()=>{
54+
await stylesheetLink.evaluate((l) => l.disabled = true);
55+
await page.waitForTimeout(500);
56+
await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
57+
maxDiffPixels: 20
58+
});
59+
// non-matching query (map z=14)
60+
await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)');
61+
await page.waitForTimeout(500);
62+
// disabled overrides the media query because they compete to change it
63+
await stylesheetLink.evaluate((l) => l.disabled = false);
64+
await page.waitForTimeout(500);
65+
await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
66+
maxDiffPixels: 20
67+
});
68+
});
69+
});

test/e2e/elements/map-link/red.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.restaurant {
2+
fill: red;
3+
stroke: red;
4+
}

0 commit comments

Comments
 (0)