third_party/WebKit/LayoutTests/http/tests/misc/custom-context-menu.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="/js-test-resources/js-test.js"></script>
   4 </head>
   5 <button id="button" style="height: 100px; width: 100px;">
   6 </button>
   7 <button id="button_with_contextmenu" contextmenu="menu_id" style="height: 100px; width: 100px;">
   8     <menu id="menu_id" type="PopUp">
   9         <!-- Test removal of separator at the start. -->
  10         <hr>
  11         <menuitem label="Item1"></menuitem>
  12         <!-- Test disabled menuitem. -->
  13         <menuitem label="Item2" disabled></menuitem>
  14         <!-- Test addition of separator for <hr>. -->
  15         <hr>
  16         <menuitem label="Item3"></menuitem>
  17         <!-- Test child menu with label. -->
  18         <menu label="Submenu">
  19             <menuitem label="Item4"></menuitem>
  20             <menu label="Deeper submenu">
  21                 <!-- Test removal of separator at the start inside submenu. -->
  22                 <hr>
  23                 <menuitem label="Item5"></menuitem>
  24                 <hr>
  25                 <menuitem label="Item6"></menuitem>
  26                 <!-- Test removal of separator at the end inside submenu. -->
  27                 <hr>
  28             </menu>
  29         </menu>
  30         <menuitem label="Item7"></menuitem>
  31         <!-- Test child menu without label. -->
  32         <menu>
  33             <menuitem label="Item8"></menuitem>
  34             <!-- Test child menu with empty label. -->
  35             <menu label="">
  36                 <menuitem label="Item9"></menuitem>
  37                 <menuitem label="Item10"></menuitem>
  38             </menu>
  39             <menuitem label="Item11"></menuitem>
  40             <menuitem label="Item12"></menuitem>
  41         </menu>
  42         <!-- Test collapsing two or more adjacent separators. -->
  43         <hr>
  44         <hr>
  45         <hr>
  46         <hr>
  47         <!-- Test menuitem menu without label. -->
  48         <menuitem></menuitem>
  49         <!-- Test menuitem menu with empty label. -->
  50         <menuitem label=""></menuitem>
  51         <menuitem label="Item13"></menuitem>
  52         <!-- Test menuitem of type "checkbox" without "checked" attribute. -->
  53         <menuitem type="checkbox" label="Item14"></menuitem>
  54         <!-- Test menuitem of type "checkbox" with "checked" attribute. -->
  55         <menuitem type="checkbox" label="Item15" checked></menuitem>
  56         <!-- Test default menuitem with "checked" attribute. -->
  57         <menuitem label="Item16" checked></menuitem>
  58         <!-- Test menuitem of type "radio" with "checked" attribute. -->
  59         <menuitem type="radio" radiogroup="group" label="Item17"></menuitem>
  60         <menuitem type="radio" radiogroup="group" label="Item18" checked></menuitem>
  61         <menuitem type="radio" radiogroup="group" label="Item19"></menuitem>
  62         <!-- Test menuitem with "icon" attribute. -->
  63         <menuitem label="Item20" icon="icon1.png" checked></menuitem>
  64         <!-- Test menuitem with "icon" attribute having leading and trailing white spaces. -->
  65         <menuitem label="Item21" icon="  icon2.png   " checked></menuitem>
  66         <!-- Test removal of separator at the end. -->
  67         <hr>
  68     </menu>
  69 </button>
  70 <!-- Test with menu element without type attribute specified. -->
  71 <button id="button_1" contextmenu="menu_without_type" style="height: 100px; width: 100px;">
  72     <menu id="menu_without_type">
  73         <menuitem label="Item1"></menuitem>
  74         <menuitem label="Item2"></menuitem>
  75         <menuitem label="Item3"></menuitem>
  76     </menu>
  77 </button>
  78 <!-- Test cancelling show event. -->
  79 <button id="button_2" contextmenu="menu_2" style="height: 100px; width: 100px;">
  80     <menu id="menu_2" type="popup">
  81         <menuitem label="Item1"></menuitem>
  82         <menuitem label="Item2"></menuitem>
  83         <menuitem label="Item3"></menuitem>
  84     </menu>
  85 </button>
  86 <!-- Test removing menu element inside show event handler. -->
  87 <button id="button_3" contextmenu="menu_3" style="height: 100px; width: 100px;">
  88     <menu id="menu_3" type="popup">
  89         <menuitem label="Item1"></menuitem>
  90         <menuitem label="Item2"></menuitem>
  91         <menuitem label="Item3"></menuitem>
  92     </menu>
  93 </button>
  94 <!-- Test with menu element without any children. -->
  95 <button id="button_4" contextmenu="menu_4" style="height: 100px; width: 100px;">
  96     <menu id="menu_4" type="popup">
  97     </menu>
  98 </button>
  99 <!-- Test if an element A has a parent element, then A's assigned context menu is the assigned context menu of its parent element. -->
 100 <div contextmenu="menu_5">
 101     <div>
 102         <button id="button_5" style="height: 100px; width: 100px;"></button>
 103     </div>
 104     <menu id="menu_5" type="popup">
 105         <menuitem label="Item1">
 106         <menuitem label="Item2">
 107         <menuitem label="Item3">
 108     </menu>
 109 </div>
 110 <script>
 111 if (!window.eventSender)
 112     debug("This test requires window.eventSender.")
 113
 114 function contextClickAndGetMenuItems(element) {
 115     var x = element.offsetParent.offsetLeft + element.offsetLeft + 4;
 116     var y = element.offsetParent.offsetTop + element.offsetTop + element.offsetHeight / 2;
 117     eventSender.mouseMoveTo(x, y);
 118     return eventSender.contextClick();
 119 }
 120
 121 function cancel(event) {
 122     event.preventDefault();
 123 }
 124
 125 function removeMenu(event) {
 126     event.target.remove();
 127 }
 128
 129 description("Tests the custom context menu items.");
 130 var button = document.getElementById("button");
 131 var items = contextClickAndGetMenuItems(button);
 132
 133 // Esc key to hide the context menu.
 134 eventSender.keyDown("escape");
 135
 136 var buttonWithContextMenu = document.getElementById("button_with_contextmenu");
 137 var itemsWithCustomContextMenu = contextClickAndGetMenuItems(buttonWithContextMenu);
 138
 139 // Esc key to hide the context menu.
 140 eventSender.keyDown("escape");
 141
 142 var button1 = document.getElementById("button_1");
 143 var items1 = contextClickAndGetMenuItems(button1);
 144
 145 // Esc key to hide the context menu.
 146 eventSender.keyDown("escape");
 147
 148 var button2 = document.getElementById("button_2");
 149 document.getElementById("menu_2").addEventListener("show", cancel, false);
 150 var items2 = contextClickAndGetMenuItems(button2);
 151
 152 // Esc key to hide the context menu.
 153 eventSender.keyDown("escape");
 154
 155 var button3 = document.getElementById("button_3");
 156 document.getElementById("menu_3").addEventListener("show", removeMenu, false);
 157 var items3 = contextClickAndGetMenuItems(button3);
 158
 159 // Esc key to hide the context menu.
 160 eventSender.keyDown("escape");
 161
 162 var button4 = document.getElementById("button_4");
 163 var items4 = contextClickAndGetMenuItems(button4);
 164
 165 // Esc key to hide the context menu.
 166 eventSender.keyDown("escape");
 167
 168 var button5 = document.getElementById("button_5");
 169 var items5 = contextClickAndGetMenuItems(button5);
 170
 171 shouldBeEqualToNumber("itemsWithCustomContextMenu.length - items.length", 25);
 172 shouldBeEqualToString("itemsWithCustomContextMenu[0]", "Item1");
 173 shouldBeEqualToString("itemsWithCustomContextMenu[1]", "#Item2");
 174 shouldBeEqualToString("itemsWithCustomContextMenu[2]", "---------");
 175 shouldBeEqualToString("itemsWithCustomContextMenu[3]", "Item3");
 176 shouldBeEqualToString("itemsWithCustomContextMenu[4]", "Submenu >");
 177 shouldBeEqualToString("itemsWithCustomContextMenu[5]", "_Item4");
 178 shouldBeEqualToString("itemsWithCustomContextMenu[6]", "_Deeper submenu >");
 179 shouldBeEqualToString("itemsWithCustomContextMenu[7]", "__Item5");
 180 shouldBeEqualToString("itemsWithCustomContextMenu[8]", "__---------");
 181 shouldBeEqualToString("itemsWithCustomContextMenu[9]", "__Item6");
 182 shouldBeEqualToString("itemsWithCustomContextMenu[10]", "Item7");
 183 shouldBeEqualToString("itemsWithCustomContextMenu[11]", "---------");
 184 shouldBeEqualToString("itemsWithCustomContextMenu[12]", "Item8");
 185 shouldBeEqualToString("itemsWithCustomContextMenu[13]", "Item11");
 186 shouldBeEqualToString("itemsWithCustomContextMenu[14]", "Item12");
 187 shouldBeEqualToString("itemsWithCustomContextMenu[15]", "---------");
 188 shouldBeEqualToString("itemsWithCustomContextMenu[16]", "Item13");
 189 shouldBeEqualToString("itemsWithCustomContextMenu[17]", "Item14");
 190 shouldBeEqualToString("itemsWithCustomContextMenu[18]", "*Item15");
 191 shouldBeEqualToString("itemsWithCustomContextMenu[19]", "Item16");
 192 shouldBeEqualToString("itemsWithCustomContextMenu[20]", "Item17");
 193 shouldBeEqualToString("itemsWithCustomContextMenu[21]", "*Item18");
 194 shouldBeEqualToString("itemsWithCustomContextMenu[22]", "Item19");
 195 shouldBeEqualToString("itemsWithCustomContextMenu[23]", "Item20http://127.0.0.1:8000/misc/icon1.png");
 196 shouldBeEqualToString("itemsWithCustomContextMenu[24]", "Item21http://127.0.0.1:8000/misc/icon2.png");
 197 shouldBeEqualToNumber("items1.length - items.length", 0);
 198 shouldBeEqualToNumber("items2.length - items.length", 0);
 199 shouldBeEqualToNumber("items3.length - items.length", 0);
 200 shouldBeEqualToNumber("items4.length - items.length", 0);
 201 shouldBeEqualToNumber("items5.length - items.length", 3);
 202 shouldBeEqualToString("items5[0]", "Item1");
 203 shouldBeEqualToString("items5[1]", "Item2");
 204 shouldBeEqualToString("items5[2]", "Item3");
 205
 206 </script>