michael@0: 'use strict';
michael@0: 
michael@0: SimpleTest.waitForExplicitFinish();
michael@0: browserElementTestHelpers.setEnabledPref(true);
michael@0: browserElementTestHelpers.addPermission();
michael@0: 
michael@0: let audioUrl = 'http://mochi.test:8888/tests/dom/browser-element/mochitest/audio.ogg';
michael@0: let videoUrl = 'http://mochi.test:8888/tests/dom/browser-element/mochitest/short-video.ogv';
michael@0: 
michael@0: function runTests() {
michael@0:   createIframe(function onIframeLoaded() {
michael@0:     checkEmptyContextMenu();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkEmptyContextMenu() {
michael@0:   sendContextMenuTo('body', function onContextMenu(detail) {
michael@0:     is(detail.contextmenu, null, 'Body context clicks have no context menu');
michael@0: 
michael@0:     checkInnerContextMenu();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkInnerContextMenu() {
michael@0:   sendContextMenuTo('#inner-link', function onContextMenu(detail) {
michael@0:     is(detail.systemTargets.length, 1, 'Includes anchor data');
michael@0:     is(detail.contextmenu.items.length, 2, 'Inner clicks trigger correct menu');
michael@0: 
michael@0:     checkCustomContextMenu();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkCustomContextMenu() {
michael@0:   sendContextMenuTo('#menu1-trigger', function onContextMenu(detail) {
michael@0:     is(detail.contextmenu.items.length, 2, 'trigger custom contextmenu');
michael@0: 
michael@0:     checkNestedContextMenu();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkNestedContextMenu() {
michael@0:   sendContextMenuTo('#menu2-trigger', function onContextMenu(detail) {
michael@0:     var innerMenu = detail.contextmenu.items.filter(function(x) {
michael@0:       return x.type === 'menu';
michael@0:     });
michael@0:     is(detail.systemTargets.length, 2, 'Includes anchor and img data');
michael@0:     ok(innerMenu.length > 0, 'Menu contains a nested menu');
michael@0: 
michael@0:     checkPreviousContextMenuHandler();
michael@0:   });
michael@0: }
michael@0: 
michael@0:  // Finished testing the data passed to the contextmenu handler,
michael@0:  // now we start selecting contextmenu items
michael@0: function checkPreviousContextMenuHandler() {
michael@0:   // This is previously triggered contextmenu data, since we have
michael@0:   // fired subsequent contextmenus this should not be mistaken
michael@0:   // for a current menuitem
michael@0:   var detail = previousContextMenuDetail;
michael@0:   var previousId = detail.contextmenu.items[0].id;
michael@0:   checkContextMenuCallbackForId(detail, previousId, function onCallbackFired(label) {
michael@0:     is(label, null, 'Callback label should be empty since this handler is old');
michael@0: 
michael@0:     checkCurrentContextMenuHandler();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkCurrentContextMenuHandler() {
michael@0:   // This triggers a current menuitem
michael@0:   var detail = currentContextMenuDetail;
michael@0: 
michael@0:   var innerMenu = detail.contextmenu.items.filter(function(x) {
michael@0:     return x.type === 'menu';
michael@0:   });
michael@0: 
michael@0:   var currentId = innerMenu[0].items[1].id;
michael@0:   checkContextMenuCallbackForId(detail, currentId, function onCallbackFired(label) {
michael@0:     is(label, 'inner 2', 'Callback label should be set correctly');
michael@0: 
michael@0:     checkAgainCurrentContextMenuHandler();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkAgainCurrentContextMenuHandler() {
michael@0:   // Once an item it selected, subsequent selections are ignored
michael@0:   var detail = currentContextMenuDetail;
michael@0: 
michael@0:   var innerMenu = detail.contextmenu.items.filter(function(x) {
michael@0:     return x.type === 'menu';
michael@0:   });
michael@0: 
michael@0:   var currentId = innerMenu[0].items[1].id;
michael@0:   checkContextMenuCallbackForId(detail, currentId, function onCallbackFired(label) {
michael@0:     is(label, null, 'Callback label should be empty since this handler has already been used');
michael@0: 
michael@0:     checkCallbackWithPreventDefault();
michael@0:   });
michael@0: };
michael@0: 
michael@0: // Finished testing callbacks if the embedder calls preventDefault() on the
michael@0: // mozbrowsercontextmenu event, now we start checking for some cases where the embedder
michael@0: // does not want to call preventDefault() for some reasons.
michael@0: function checkCallbackWithPreventDefault() {
michael@0:   sendContextMenuTo('#menu1-trigger', function onContextMenu(detail) {
michael@0:     var id = detail.contextmenu.items[0].id;
michael@0:     checkContextMenuCallbackForId(detail, id, function onCallbackFired(label) {
michael@0:       is(label, 'foo', 'Callback label should be set correctly');
michael@0: 
michael@0:       checkCallbackWithoutPreventDefault();
michael@0:     });
michael@0:   });
michael@0: }
michael@0: 
michael@0: function checkCallbackWithoutPreventDefault() {
michael@0:   sendContextMenuTo('#menu1-trigger', function onContextMenu(detail) {
michael@0:     var id = detail.contextmenu.items[0].id;
michael@0:     checkContextMenuCallbackForId(detail, id, function onCallbackFired(label) {
michael@0:       is(label, null, 'Callback label should be null');
michael@0: 
michael@0:       checkImageContextMenu();
michael@0:     });
michael@0:   }, /* ignorePreventDefault */ true);
michael@0: }
michael@0: 
michael@0: function checkImageContextMenu() {
michael@0:   sendContextMenuTo('#menu3-trigger', function onContextMenu(detail) {
michael@0:     var target = detail.systemTargets[0];
michael@0:     is(target.nodeName, 'IMG', 'Reports correct nodeName');
michael@0:     is(target.data.uri, 'example.png', 'Reports correct uri');
michael@0: 
michael@0:     checkVideoContextMenu();
michael@0:   }, /* ignorePreventDefault */ true);
michael@0: }
michael@0: 
michael@0: function checkVideoContextMenu() {
michael@0:   sendContextMenuTo('#menu4-trigger', function onContextMenu(detail) {
michael@0:     var target = detail.systemTargets[0];
michael@0:     is(target.nodeName, 'VIDEO', 'Reports correct nodeName');
michael@0:     is(target.data.uri, videoUrl, 'Reports uri correctly in data');
michael@0:     is(target.data.hasVideo, true, 'Video data in video tag does "hasVideo"');
michael@0: 
michael@0:     checkAudioContextMenu();
michael@0:   }, /* ignorePreventDefault */ true);
michael@0: }
michael@0: 
michael@0: function checkAudioContextMenu() {
michael@0:   sendContextMenuTo('#menu6-trigger', function onContextMenu(detail) {
michael@0:     var target = detail.systemTargets[0];
michael@0:     is(target.nodeName, 'AUDIO', 'Reports correct nodeName');
michael@0:     is(target.data.uri, audioUrl, 'Reports uri correctly in data');
michael@0: 
michael@0:     checkAudioinVideoContextMenu();
michael@0:   }, /* ignorePreventDefault */ true);
michael@0: }
michael@0: 
michael@0: function checkAudioinVideoContextMenu() {
michael@0:   sendSrcTo('#menu5-trigger', audioUrl, function onSrcSet() {
michael@0:     sendContextMenuTo('#menu5-trigger', function onContextMenu(detail) {
michael@0:       var target = detail.systemTargets[0];
michael@0:       is(target.nodeName, 'VIDEO', 'Reports correct nodeName');
michael@0:       is(target.data.uri, audioUrl, 'Reports uri correctly in data');
michael@0:       is(target.data.hasVideo, false, 'Audio data in video tag reports no "hasVideo"');
michael@0: 
michael@0:       SimpleTest.finish();
michael@0:     }, /* ignorePreventDefault */ true);
michael@0:   });
michael@0: }
michael@0: 
michael@0: /* Helpers */
michael@0: var mm = null;
michael@0: var previousContextMenuDetail = null;
michael@0: var currentContextMenuDetail = null;
michael@0: 
michael@0: function sendSrcTo(selector, src, callback) {
michael@0:   mm.sendAsyncMessage('setsrc', { 'selector': selector, 'src': src });
michael@0:   mm.addMessageListener('test:srcset', function onSrcSet(msg) {
michael@0:     mm.removeMessageListener('test:srcset', onSrcSet);
michael@0:     callback();
michael@0:   });
michael@0: }
michael@0: 
michael@0: function sendContextMenuTo(selector, callback, ignorePreventDefault) {
michael@0:   iframe.addEventListener('mozbrowsercontextmenu', function oncontextmenu(e) {
michael@0:     iframe.removeEventListener(e.type, oncontextmenu);
michael@0: 
michael@0:     // The embedder should call preventDefault() on the event if it will handle
michael@0:     // it. Not calling preventDefault() means it won't handle the event and 
michael@0:     // should not be able to deal with context menu callbacks.
michael@0:     if (ignorePreventDefault !== true) {
michael@0:       e.preventDefault();
michael@0:     }
michael@0: 
michael@0:     // Keep a reference to previous/current contextmenu event details.
michael@0:     previousContextMenuDetail = currentContextMenuDetail;
michael@0:     currentContextMenuDetail = e.detail;
michael@0: 
michael@0:     setTimeout(function() { callback(e.detail); });
michael@0:   });
michael@0: 
michael@0:   mm.sendAsyncMessage('contextmenu', { 'selector': selector });
michael@0: }
michael@0: 
michael@0: function checkContextMenuCallbackForId(detail, id, callback) {
michael@0:   mm.addMessageListener('test:callbackfired', function onCallbackFired(msg) {
michael@0:     mm.removeMessageListener('test:callbackfired', onCallbackFired);
michael@0: 
michael@0:     msg = SpecialPowers.wrap(msg);
michael@0:     setTimeout(function() { callback(msg.data.label); });
michael@0:   });
michael@0: 
michael@0:   detail.contextMenuItemSelected(id);
michael@0: }
michael@0: 
michael@0: 
michael@0: var iframe = null;
michael@0: function createIframe(callback) {
michael@0:   iframe = document.createElement('iframe');
michael@0:   SpecialPowers.wrap(iframe).mozbrowser = true;
michael@0: 
michael@0:   iframe.src = 'data:text/html,<html>' +
michael@0:     '<body>' +
michael@0:     '<menu type="context" id="menu1" label="firstmenu">' +
michael@0:       '<menuitem label="foo" onclick="window.onContextMenuCallbackFired(event)"></menuitem>' +
michael@0:       '<menuitem label="bar" onclick="window.onContextMenuCallbackFired(event)"></menuitem>' +
michael@0:     '</menu>' +
michael@0:     '<menu type="context" id="menu2" label="secondmenu">' +
michael@0:       '<menuitem label="outer" onclick="window.onContextMenuCallbackFired(event)"></menuitem>' +
michael@0:       '<menu>' +
michael@0:         '<menuitem label="inner 1"></menuitem>' +
michael@0:         '<menuitem label="inner 2" onclick="window.onContextMenuCallbackFired(event)"></menuitem>' +
michael@0:       '</menu>' +
michael@0:     '</menu>' +
michael@0:     '<div id="menu1-trigger" contextmenu="menu1"><a id="inner-link" href="foo.html">Menu 1</a></div>' +
michael@0:     '<a href="bar.html" contextmenu="menu2"><img id="menu2-trigger" src="example.png" /></a>' +
michael@0:     '<img id="menu3-trigger" src="example.png" />' +
michael@0:     '<video id="menu4-trigger" src="' + videoUrl + '"></video>' +
michael@0:     '<video id="menu5-trigger" preload="metadata"></video>' +
michael@0:     '<audio id="menu6-trigger" src="' + audioUrl + '"></audio>' +
michael@0:     '</body></html>';
michael@0:   document.body.appendChild(iframe);
michael@0: 
michael@0:   // The following code will be included in the child
michael@0:   // =========================================================================
michael@0:   function iframeScript() {
michael@0:     addMessageListener('contextmenu', function onContextMenu(msg) {
michael@0:       var document = content.document;
michael@0:       var evt = document.createEvent('HTMLEvents');
michael@0:       evt.initEvent('contextmenu', true, true);
michael@0:       document.querySelector(msg.data.selector).dispatchEvent(evt);
michael@0:     });
michael@0: 
michael@0:     addMessageListener('setsrc', function onContextMenu(msg) {
michael@0:       var wrappedTarget = content.document.querySelector(msg.data.selector);
michael@0:       var target = XPCNativeWrapper.unwrap(wrappedTarget);
michael@0:       target.addEventListener('loadedmetadata', function() {
michael@0:         sendAsyncMessage('test:srcset');
michael@0:       });
michael@0:       target.src = msg.data.src;
michael@0:     });
michael@0: 
michael@0:     addMessageListener('browser-element-api:call', function onCallback(msg) {
michael@0:       if (msg.data.msg_name != 'fire-ctx-callback')
michael@0:         return;
michael@0: 
michael@0:       /* Use setTimeout in order to react *after* the platform */
michael@0:       content.setTimeout(function() {
michael@0:         sendAsyncMessage('test:callbackfired', { label: label });
michael@0:         label = null;
michael@0:       });
michael@0:     });
michael@0: 
michael@0:     var label = null;
michael@0:     XPCNativeWrapper.unwrap(content).onContextMenuCallbackFired = function(e) {
michael@0:       label = e.target.getAttribute('label');
michael@0:     };
michael@0:   }
michael@0:   // =========================================================================
michael@0: 
michael@0:   iframe.addEventListener('mozbrowserloadend', function onload(e) {
michael@0:     iframe.removeEventListener(e.type, onload);
michael@0:     mm = SpecialPowers.getBrowserFrameMessageManager(iframe);
michael@0:     mm.loadFrameScript('data:,(' + iframeScript.toString() + ')();', false);
michael@0: 
michael@0:     // Now we're ready, let's start testing.
michael@0:     callback();
michael@0:   });
michael@0: }
michael@0: 
michael@0: addEventListener('testready', runTests);