From b820e2cfce894d330c8fbe0cefc50b4f50021f95 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Fri, 22 Mar 2024 09:14:36 -0400 Subject: [PATCH] More WIP --- src/map-extent.js | 24 ++++++++++++++++- test/e2e/core/styleParsing.html | 2 +- test/e2e/core/styleParsing.test.js | 41 ++++++++++++++++++------------ 3 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/map-extent.js b/src/map-extent.js index fea5d50b5..303be55cf 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -262,6 +262,11 @@ export class MapExtent extends HTMLElement { // this._layerControlHTML is the fieldset for the extent in the LayerControl this._layerControlHTML = this._createLayerControlExtentHTML(); this._calculateBounds(); + // instead of children using parents' whenReady which can be cyclic, + // when this element is ready, run stuff that is only available after + // initialization + this._runMutationObserver(this.children); + // make sure same thing happens when children are added this._bindMutationObserver(); } /* @@ -290,6 +295,16 @@ export class MapExtent extends HTMLElement { this._validateDisabled(); }); }; + const _addStylesheetLink = (mapLink) => { + this.whenReady().then(() => { + this._extentLayer.appendStyleLink(mapLink); + }); + }; + const _addStyleElement = (mapStyle) => { + this.whenReady().then(() => { + this._extentLayer.appendStyleElement(mapStyle); + }); + }; for (let i = 0; i < elementsGroup.length; ++i) { let element = elementsGroup[i]; switch (element.nodeName) { @@ -303,7 +318,14 @@ export class MapExtent extends HTMLElement { } break; case 'MAP-LINK': - // might need this in future, among others + if (element.link && !element.link.isConnected) + _addStylesheetLink(element); + break; + case 'MAP-STYLE': + if (element.styleElement && !element.styleElement.isConnected) { + _addStyleElement(element); + } + break; default: break; } diff --git a/test/e2e/core/styleParsing.html b/test/e2e/core/styleParsing.html index 549a98aec..839ca8aed 100644 --- a/test/e2e/core/styleParsing.html +++ b/test/e2e/core/styleParsing.html @@ -22,7 +22,7 @@ - + { }); //tests using the 1st map in the page - test('CSS within html page added to inorder to overlay-pane container', async () => { - const firstMap = page.getByTestId('map1'); - - const styleContent = await page.$eval( - 'css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div', - (styleE) => styleE.innerHTML - ); - await expect(styleContent.indexOf('first')).toBeLessThan( - styleContent.indexOf('.second') - ); - await expect(styleContent.indexOf('.second')).toBeLessThan( - styleContent.indexOf('.third') - ); - await expect(styleContent.indexOf('.third')).toBeLessThan( - styleContent.indexOf('fourth') - ); + test.only('CSS within html page added to inorder to overlay-pane container', async () => { + const arizona = page.getByTestId('arizona'); + const ids = await arizona.evaluate((layer) => { + const elementSequence = layer.querySelectorAll( + 'map-link[rel=stylesheet],map-style' + ); + let ids = ''; + for (let i = 0; i < elementSequence.length; i++) + ids += + elementSequence[i].getAttribute('id') + + (i < elementSequence.length - 1 ? ',' : ''); + return ids; + }); + const renderedIds = await arizona.evaluate((layer) => { + const elementSequence = layer._layer._container.querySelectorAll( + 'link[rel=stylesheet],style' + ); + let ids = ''; + for (let i = 0; i < elementSequence.length; i++) + ids += + elementSequence[i].getAttribute('id') + + (i < elementSequence.length - 1 ? ',' : ''); + return ids; + }); + expect(ids).toEqual(renderedIds); }); test('CSS from a retrieved MapML file added inorder inside templated-layer container', async () => {