Support for map-link[rel=stylesheet] and map-style in map-extent

Closes #944

Add sloMo to ArrowKeyNaveContextMenu.test.js

Author: prushfor

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;
       }

src/map-link.js

@@ -316,6 +316,8 @@ export class MapLink extends HTMLElement {
       this._stylesheetHost._layer.appendStyleLink(this);
     } else if (this._stylesheetHost._templatedLayer) {
       this._stylesheetHost._templatedLayer.appendStyleLink(this);
+    } else if (this._stylesheetHost._extentLayer) {
+      this._stylesheetHost._extentLayer.appendStyleLink(this);
     }
 
     function copyAttributes(source, target) {

src/map-style.js

@@ -27,11 +27,12 @@ export class MapStyle extends HTMLElement {
     this.styleElement.mapStyle = this;
     this.styleElement.textContent = this.textContent;
     copyAttributes(this, this.styleElement);
-
     if (this._stylesheetHost._layer) {
       this._stylesheetHost._layer.appendStyleElement(this);
     } else if (this._stylesheetHost._templatedLayer) {
       this._stylesheetHost._templatedLayer.appendStyleElement(this);
+    } else if (this._stylesheetHost._extentLayer) {
+      this._stylesheetHost._extentLayer.appendStyleElement(this);
     }
 
     function copyAttributes(source, target) {

src/mapml/layers/ExtentLayer.js

@@ -75,6 +75,31 @@ export var ExtentLayer = L.LayerGroup.extend({
     this._extentEl._opacity = opacity;
     if (this._extentEl._opacitySlider)
       this._extentEl._opacitySlider.value = opacity;
+  },
+  appendStyleLink: function (mapLink) {
+    if (!mapLink.link) return;
+    let positionAndNode = this._getStylePositionAndNode();
+    positionAndNode.node.insertAdjacentElement(
+      positionAndNode.position,
+      mapLink.link
+    );
+  },
+  _getStylePositionAndNode: function () {
+    return this._container.lastChild &&
+      (this._container.lastChild.nodeName.toUpperCase() === 'SVG' ||
+        this._container.lastChild.classList.contains('mapml-vector-container'))
+      ? { position: 'beforebegin', node: this._container.lastChild }
+      : this._container.lastChild
+      ? { position: 'afterend', node: this._container.lastChild }
+      : { position: 'afterbegin', node: this._container };
+  },
+  appendStyleElement: function (mapStyle) {
+    if (!mapStyle.styleElement) return;
+    let positionAndNode = this._getStylePositionAndNode();
+    positionAndNode.node.insertAdjacentElement(
+      positionAndNode.position,
+      mapStyle.styleElement
+    );
   }
 });
 export var extentLayer = function (options) {

src/mapml/layers/TemplatedTileLayer.js

@@ -196,14 +196,15 @@ export var TemplatedTileLayer = L.TileLayer.extend({
         if (href) {
           if (!container.querySelector("link[href='" + href + "']")) {
             var linkElm = document.createElement('link');
+            copyAttributes(stylesheets[i], linkElm);
             linkElm.setAttribute('href', href);
-            linkElm.setAttribute('rel', 'stylesheet');
             ss.push(linkElm);
           }
         }
       } else {
         // <map-style>
         var styleElm = document.createElement('style');
+        copyAttributes(stylesheets[i], styleElm);
         styleElm.textContent = stylesheets[i].textContent;
         ss.push(styleElm);
       }
@@ -215,6 +216,12 @@ export var TemplatedTileLayer = L.TileLayer.extend({
     for (var s = ss.length - 1; s >= 0; s--) {
       container.insertAdjacentElement('afterbegin', ss[s]);
     }
+    function copyAttributes(source, target) {
+      return Array.from(source.attributes).forEach((attribute) => {
+        if (attribute.nodeName !== 'href')
+          target.setAttribute(attribute.nodeName, attribute.nodeValue);
+      });
+    }
   },
 
   _createFeatures: function (markup, coords, tile) {

test/e2e/core/ArrowKeyNavContextMenu.test.js

@@ -4,7 +4,7 @@ test.describe('Using arrow keys to navigate context menu', () => {
   let page;
   let context;
   test.beforeAll(async function () {
-    context = await chromium.launchPersistentContext('');
+    context = await chromium.launchPersistentContext('', { slowMo: 250 });
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());

test/e2e/core/styleParsing.html

@@ -22,19 +22,19 @@
 <body>
   <map data-testid="map1" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
 
-    <layer- label="Arizona" checked>
+    <layer- data-testid="arizona" label="Arizona" checked>
       <map-meta name="projection" content="CBMTILE"></map-meta>
       <map-meta name="zoom" content="min=0,max=5,value=0"></map-meta>
       <map-meta name="extent"
                 content="cs=tilematrix,top-left-vertical=0,top-left-horizontal=0,bottom-right-vertical=5,bottom-right-horizontal=5"></map-meta>
-
+      <!-- Local-content styles rendered as style/link in same order as found, in expected shadow root location -->
       <map-link id="first" rel="stylesheet" type="text/css" href="first.css"></map-link>
-      <map-style>
+      <map-style id="second">
         .second {
           stroke: aqua;
         }
       </map-style>
-      <map-style>
+      <map-style id="third">
         .third {
           stroke: blue
         }
@@ -88,40 +88,50 @@ <h1>Colorado</h1>
         </map-geometry>
       </map-feature>
     </layer->
-    <layer- label="Alabama" checked>
+    <layer- data-testid="alabama" label="Alabama" checked>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
       <map-extent units="CBMTILE" checked hidden>
         <map-input name="z" type="zoom" min="2" max="18" ></map-input>
         <map-input name="xmin" type="location" units="gcrs" axis="longitude" position="top-left" min="-76" max="-74" ></map-input>
         <map-input name="ymin" type="location" units="gcrs" axis="latitude" position="bottom-right" min="45" max="46" ></map-input>
         <map-input name="xmax" type="location" units="gcrs" axis="longitude" position="bottom-right" min="-76" max="-74" ></map-input>
         <map-input name="ymax" type="location" units="gcrs" axis="latitude" position="top-left" min="45" max="46" ></map-input>
-        <map-link rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
+        <!-- Local layer content map-link[rel=features] remote styles rendered as style/link in same order as found, in expected shadow root location -->
+        <map-link data-testid="alabama-features" rel="features" tref="data/alabama_feature.mapml?{xmin}{ymin}{xmax}{ymax}{z}" ></map-link>
       </map-extent>
     </layer->
   </map>
   <map data-testid="map2" is="web-map" projection="WGS84" zoom="0" lat="0" lon="0" controls>
 
     <layer- label="Inline Countries" checked>
-      <map-link rel="stylesheet" href="styleParsing.css"></map-link>
-      <map-style>
-        .secondVector {
+      <map-style id="one">
+        .firstVector {
           color: aliceblue;
         }
       </map-style>
+      <map-link id="two" rel="stylesheet" href="styleParsing.css"></map-link>
       <map-meta name="zoom" content="min=0,max=10"></map-meta>
-      <map-extent units="WGS84" checked hidden>
+      <map-extent data-testid="map-ext1" units="WGS84" checked hidden>
+        <!-- Local style children of map-extent rendered as style/link in same order as found, in expected shadow root location -->
+        <map-style id="one">.foo { bar:none; }</map-style>
+        <map-link id="two" rel="stylesheet" href="styleParsing.css"></map-link>
         <map-input name="zoomLevel" type="zoom" min="0" max="2" value="0" ></map-input>
 
         <map-input name="row" type="location" axis="row" units="tilematrix" min="0" max="5" ></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="0" max="5" ></map-input>
 
+        <!-- map-style and map-link elements in tiles should be rendered in the
+          container of the svg element that renders the tile, so that the style
+        rules in them apply to the svg content elements such as path and g -->
+        <!-- Local content map-link[rel=tile][type=text/mapml] with remote styles embedded in text/mapml tiles are rendered in same order as found in shadow root tile container -->
+        <!-- see r0_c0.mapml -->
         <map-link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)'
           tref='data/wgs84/{zoomLevel}/r{row}_c{col}.mapml' ></map-link>
 
       </map-extent>
     </layer->
-    <layer- label="src-based Countries" src="data/vector-tile-test.mapml" checked></layer->
+    
+    <layer- data-testid="remote" label="src-based Countries" src="data/vector-tile-test.mapml" checked></layer->
   </map>
 </body>