-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for <map-link rel="stylesheet" media="..."> attributes
- Loading branch information
1 parent
af3aed6
commit cf1d61e
Showing
9 changed files
with
146 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <title>map-link-stylesheet-media.html</title> | ||
| <script type="module" src="mapml.js"></script> | ||
| <style> | ||
| html, | ||
| body { | ||
| height: 100%; | ||
| } | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Ensure inline layer content is hidden if custom/built-in elements isn't | ||
| supported, or if javascript is disabled. This needs to be defined separately | ||
| from the above, because the `:not(:defined)` selector invalidates the entire | ||
| declaration in browsers that do not support it. */ | ||
| map-layer { | ||
| display: none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="14" lat="45.40954467619979" lon="-75.70168476290948" style="height: 500px;width:500px;"> | ||
| <map-layer data-testid="restaurants" label="Restaurants" checked=""> | ||
| <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta> | ||
| <map-extent units="OSMTILE" checked=""> | ||
| <!-- markers should be red on load --> | ||
| <map-link rel="stylesheet" data-testid="stylesheet-link" href="red.css"></map-link> | ||
| <map-select id="restaurants" name="cusine"> | ||
| <map-option value="restaurants" selected="selected">All cuisines</map-option> | ||
| <map-option value="african">African</map-option> | ||
| <map-option value="asian">Asian</map-option> | ||
| <map-option value="cajun">Cajun</map-option> | ||
| <map-option value="indian">Indian</map-option> | ||
| <map-option value="italian">Italian</map-option> | ||
| <map-option value="mexican">Mexican</map-option> | ||
| </map-select> | ||
| <map-link tref="restaurants/{cusine}.mapml" rel="features"></map-link> | ||
| </map-extent> | ||
| </map-layer> | ||
| </mapml-viewer> | ||
| </body> | ||
| </html> |
69 changes: 69 additions & 0 deletions
69
test/e2e/elements/map-link/map-link-stylesheet-media.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { test, expect, chromium } from '@playwright/test'; | ||
|
|
||
| test.describe('map-layer media attribute', () => { | ||
| let page; | ||
| let context; | ||
| let viewer; | ||
| let stylesheetLink; | ||
| test.beforeAll(async function () { | ||
| context = await chromium.launchPersistentContext(''); | ||
| page = | ||
| context.pages().find((page) => page.url() === 'about:blank') || | ||
| (await context.newPage()); | ||
| await page.goto('map-link-stylesheet-media.html'); | ||
| await page.waitForTimeout(1000); | ||
| viewer = page.getByTestId('viewer'); | ||
| stylesheetLink = page.locator('map-link[rel=stylesheet][href="red.css"]'); | ||
| }); | ||
| test(`when a map-link rel=stylesheet disables due to a media query, the styles\ | ||
| should be removed`,async ()=>{ | ||
| // map starts off at | ||
| await expect(viewer).toHaveScreenshot('red_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)'); | ||
| await page.waitForTimeout(500); | ||
| await expect(viewer).toHaveScreenshot('default_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| }); | ||
| test(`when a map-link rel=stylesheet enables due to a mq being removed, the \ | ||
| styles should apply`, async ()=>{ | ||
| await stylesheetLink.evaluate((l) => l.removeAttribute('media')); | ||
| await expect(viewer).toHaveScreenshot('red_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| }); | ||
|
|
||
| test(`when a map-link rel=stylesheet enables due to disabled attribute removed\ | ||
| ensure styles change`, async ()=>{ | ||
| await stylesheetLink.evaluate((l) => l.disabled = true); | ||
| await page.waitForTimeout(500); | ||
| await expect(viewer).toHaveScreenshot('default_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| await stylesheetLink.evaluate((l) => l.disabled = false); | ||
| await page.waitForTimeout(500); | ||
| await expect(viewer).toHaveScreenshot('red_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| }); | ||
| test(`when a map-link rel=stylesheet does not enable due to disabled attribute \ | ||
| removed while a non-matching media query is present, ensure that style does not \ | ||
| change`, async ()=>{ | ||
| await stylesheetLink.evaluate((l) => l.disabled = true); | ||
| await page.waitForTimeout(500); | ||
| await expect(viewer).toHaveScreenshot('default_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| // non-matching query (map z=14) | ||
| await stylesheetLink.evaluate((l) => l.media = '(14 < map-zoom <= 18)'); | ||
| await page.waitForTimeout(500); | ||
| // disabled overrides the media query because they compete to change it | ||
| await stylesheetLink.evaluate((l) => l.disabled = false); | ||
| await page.waitForTimeout(500); | ||
| await expect(viewer).toHaveScreenshot('red_styled_markers.png', { | ||
| maxDiffPixels: 20 | ||
| }); | ||
| }); | ||
| }); |
Binary file added
BIN
+8.31 KB
...nk/map-link-stylesheet-media.test.js-snapshots/default-styled-markers-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+8.31 KB
...nk/map-link-stylesheet-media.test.js-snapshots/default-styled-markers-win32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.51 KB
...p-link/map-link-stylesheet-media.test.js-snapshots/red-styled-markers-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.51 KB
...p-link/map-link-stylesheet-media.test.js-snapshots/red-styled-markers-win32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .restaurant { | ||
| fill: red; | ||
| stroke: red; | ||
| } |