test click events in shadow dom

Author: alexcjohnson

test/jasmine/assets/create_shadow_graph_div.js

@@ -0,0 +1,26 @@
+'use strict';
+
+module.exports = function createShadowGraphDiv() {
+    var container = document.createElement('div');
+    container.id = 'shadowcontainer';
+    document.body.appendChild(container);
+    var root = container.attachShadow({mode: 'open'});
+    var gd = document.createElement('div');
+    gd.id = 'graph2';
+    root.appendChild(gd);
+
+    // force the shadow container to be at position 0,0 no matter what
+    container.style.position = 'fixed';
+    container.style.left = 0;
+    container.style.top = 0;
+
+    var style = document.createElement('style');
+    root.appendChild(style);
+
+    for (var plotlyStyle of document.querySelectorAll('[id^="plotly.js-"]')) {
+      for (var rule of plotlyStyle.sheet.rules) {
+        style.sheet.insertRule(rule.cssText);
+      }
+    }
+    return gd;
+};

test/jasmine/assets/destroy_graph_div.js

@@ -1,7 +1,9 @@
 'use strict';
 
 module.exports = function destroyGraphDiv() {
-    var gd = document.getElementById('graph');
-
-    if(gd) document.body.removeChild(gd);
+    // remove both plain graphs and shadow DOM graph containers
+    ['graph', 'shadowcontainer'].forEach(function(id) {
+        var el = document.getElementById(id);
+        if(el) document.body.removeChild(el);
+    });
 };

test/jasmine/assets/mouse_event.js

@@ -33,7 +33,12 @@ module.exports = function(type, x, y, opts) {
         fullOpts.shiftKey = opts.shiftKey;
     }
 
-    var el = (opts && opts.element) || document.elementFromPoint(x, y);
+    var shadowContainer = document.getElementById('shadowcontainer');
+    var elementRoot = (opts && opts.elementRoot) || (
+        shadowContainer ? shadowContainer.shadowRoot : document
+    );
+
+    var el = (opts && opts.element) || elementRoot.elementFromPoint(x, y);
     var ev;
 
     if(type === 'scroll' || type === 'wheel') {

test/jasmine/tests/click_test.js

@@ -7,6 +7,7 @@ var DBLCLICKDELAY = require('../../../src/plot_api/plot_config').dfltConfig.doub
 var d3Select = require('../../strict-d3').select;
 var d3SelectAll = require('../../strict-d3').selectAll;
 var createGraphDiv = require('../assets/create_graph_div');
+var createShadowGraphDiv = require('../assets/create_shadow_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
 var mouseEvent = require('../assets/mouse_event');
@@ -1164,6 +1165,56 @@ describe('Test click interactions:', function() {
     });
 });
 
+describe('Click events in Shadow DOM', function() {
+    afterEach(destroyGraphDiv);
+
+    function fig() {
+        var x = [];
+        var y = [];
+        for (var i = 0; i <= 20; i++) {
+            for (var j = 0; j <= 20; j++) {
+                x.push(i);
+                y.push(j);
+            }
+        }
+        return {
+            data: [{x: x, y: y, mode: 'markers'}],
+            layout: {
+                width: 400,
+                height: 400,
+                margin: {l: 100, r: 100, t: 100, b: 100},
+                xaxis: {range: [0, 20]},
+                yaxis: {range: [0, 20]},
+            }
+        };
+    }
+
+    it('should select the same point in regular and shadow DOM', function(done) {
+        var clickData;
+        var clickX = 120;
+        var clickY = 150;
+        var expectedX = 2;  // counts up 1 every 10px from 0 at 100px
+        var expectedY = 15;  // counts down 1 every 10px from 20 at 100px
+
+        function check(gd) {
+            gd.on('plotly_click', function(event) { clickData = event; });
+            click(clickX, clickY);
+            expect(clickData.points.length).toBe(1);
+            var pt = clickData.points[0];
+            expect(pt.x).toBe(expectedX);
+            expect(pt.y).toBe(expectedY);
+            clickData = null;
+        }
+
+        Plotly.newPlot(createGraphDiv(), fig())
+        .then(check)
+        .then(destroyGraphDiv)
+        .then(function() { return Plotly.newPlot(createShadowGraphDiv(), fig()) })
+        .then(check)
+        .then(done, done.fail);
+    });
+});
+
 
 describe('dragbox', function() {
     afterEach(destroyGraphDiv);