Bug 1324560 - Update test_bug961363.html to support e10s-based <select> dropdowns; r=mconley
authorJim Porter <jporter@mozilla.com>
Thu, 23 Mar 2017 16:27:37 -0500
changeset 350878 3192f0f5df95
parent 350877 83bc93264621
child 350879 718b4821cc6e
push id31593
push usercbook@mozilla.com
push dateMon, 03 Apr 2017 10:11:46 +0000
treeherdermozilla-central@b2d106b73e6a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1324560, 961363
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1324560 - Update test_bug961363.html to support e10s-based <select> dropdowns; r=mconley e10s-based <select> dropdowns behave differently from the old, non-e10s version. Most notably, their .value isn't updated until the dropdown is closed and the change confirmed (e.g. by hitting Enter). Since this test originally hit ctrl+space at the end of each test, this would open up the dropdown and effectively trigger the different behavior. Now, the test only hits ctrl+space for <select multiple> elements. MozReview-Commit-ID: G3toKNdRgC8
layout/forms/test/mochitest.ini
layout/forms/test/test_bug961363.html
layout/forms/test/test_select_key_navigation_bug961363.html
--- a/layout/forms/test/mochitest.ini
+++ b/layout/forms/test/mochitest.ini
@@ -46,18 +46,18 @@ skip-if = toolkit == 'android'
 [test_bug869314.html]
 [test_bug903715.html]
 skip-if = toolkit == 'android' || e10s #select elements don't use an in-page popup on Android
 [test_bug935876.html]
 # Bug 1023472 - Fails when pushed into a different chunk on Android
 skip-if = toolkit == 'android'
 [test_bug957562.html]
 [test_bug960277.html]
-[test_bug961363.html]
-skip-if = e10s || toolkit == 'android' # Bug 1324560 - Test needs to be re-written for e10s, Bug 1021644 - Fails when pushed into a different chunk on Android
+[test_select_key_navigation_bug961363.html]
+skip-if = toolkit == 'android' # Bug 1021644 - Fails when pushed into a different chunk on Android
 [test_bug1111995.html]
 [test_bug1301290.html]
 skip-if = buildapp == 'mulet' || buildapp == 'b2g' || toolkit == 'android' # b2g(resizing textarea not available in b2g) b2g-debug(resizing textarea not available in b2g) b2g-desktop(resizing textarea not available in b2g)
 [test_bug1305282.html]
 [test_listcontrol_search.html]
 skip-if = toolkit == 'android' #select elements don't use an in-page popup on Android
 [test_select_prevent_default.html]
 [test_select_vertical.html]
rename from layout/forms/test/test_bug961363.html
rename to layout/forms/test/test_select_key_navigation_bug961363.html
--- a/layout/forms/test/test_bug961363.html
+++ b/layout/forms/test/test_select_key_navigation_bug961363.html
@@ -10,87 +10,122 @@ https://bugzilla.mozilla.org/show_bug.cg
 <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 <script type="application/javascript">
   /** Test for Bug 961363 **/
 
   SimpleTest.waitForExplicitFinish();
 
   function test() {
+    SimpleTest.waitForFocus(function() {
+      const single_list = [
+        {key: "DOWN",      change: true,  state: [false, false, true,  false]},
+        {key: "UP",        change: true,  state: [false, true,  false, false]},
+        {key: "RIGHT",     change: true,  state: [false, false, true,  false]},
+        {key: "LEFT",      change: true,  state: [false, true,  false, false]},
+        {key: "END",       change: true,  state: [false, false, false, true ]},
+        {key: "HOME",      change: true,  state: [true,  false, false, false]},
+        {key: "PAGE_DOWN", change: false, state: [true,  false, false, false]},
+        {key: "PAGE_UP",   change: false, state: [true,  false, false, false]}
+      ];
 
-    SimpleTest.waitForFocus(function() {
-      var one = [{k:"DOWN",s:[false,true,true,false]}, {k:"UP",s:[false,false,true,false]},
-                 {k:"RIGHT",s:[false,false,false,false]}, {k:"LEFT",s:[false,true,false,false]},
-                 {k:"PAGE_DOWN",s:[false,true,false,true]}, {k:"PAGE_UP",s:[false,false,false,true]},
-                 {k:"END",s:[false,false,false,false]}, {k:"HOME",s:[true,false,false,false]} ];
-     var two_1 = [{k:"DOWN",s:[false,false,true,false]}, {k:"UP",s:[false,true,false,false]},
-                  {k:"RIGHT",s:[false,false,true,false]}, {k:"LEFT",s:[false,true,false,false]},
-                  {k:"END",s:[false,false,false,true]}, {k:"HOME",s:[true,false,false,false]} ];
-     var two_2 = [{k:"PAGE_DOWN",s:[true,false,false,false]}, {k:"PAGE_UP",s:[true,false,false,false]}];
-     var three_1 = [{k:"DOWN",s:[false,false,true,false]}, {k:"UP",s:[false,true,false,false]},
-                    {k:"RIGHT",s:[false,false,true,false]}, {k:"LEFT",s:[false,true,false,false]},
-                    {k:"END",s:[false,false,false,true]}, {k:"HOME",s:[true,false,false,false]} ];
-     var three_2 = [{k:"PAGE_DOWN",s:[true,false,false,false]}, {k:"PAGE_UP",s:[true,false,false,false]} ];
+      const single_dropdown = [
+        {key: "DOWN",      change: true,  state: [false, false, true,  false]},
+        {key: "UP",        change: true,  state: [false, true,  false, false]},
+        {key: "RIGHT",     change: true,  state: [false, false, true,  false]},
+        {key: "LEFT",      change: true,  state: [false, true,  false, false]},
+        {key: "END",       change: true,  state: [false, false, false, true ]},
+        {key: "HOME",      change: true,  state: [true,  false, false, false]},
+        {key: "PAGE_DOWN", change: false, state: [true,  false, false, false]},
+        {key: "PAGE_UP",   change: false, state: [true,  false, false, false]}
+      ];
 
-      function select_test(id, tests, ctrl_change) {
-        var element = document.getElementById(id);
+      const multiple = [
+        {key: "DOWN",      change: false, state: [false, true,  true,  false]},
+        {key: "UP",        change: false, state: [false, false, true,  false]},
+        {key: "RIGHT",     change: false, state: [false, false, false, false]},
+        {key: "LEFT",      change: false, state: [false, true,  false, false]},
+        {key: "PAGE_DOWN", change: false, state: [false, true,  false, true ]},
+        {key: "PAGE_UP",   change: false, state: [false, false, false, true ]},
+        {key: "END",       change: false, state: [false, false, false, false]},
+        {key: "HOME",      change: false, state: [true,  false, false, false]}
+      ];
+
+      function select_test(id, tests) {
+        let element = document.getElementById(id);
         element.focus();
-        var previousValue = element.value;
-        tests.forEach(function(data) {
-          var key = data.k;
-          synthesizeKey("VK_"+key, { shiftKey:false, metaKey:false, ctrlKey:true });
-          (ctrl_change ? isnot : is)(element.value, previousValue, "value should " +
-                 (ctrl_change?"":"not ") + "have changed while testing CTRL+key " + key + " (id: " + id + ")");
-          previousValue = element.value;
-          synthesizeKey(" ", { shiftKey:false, metaKey:false, ctrlKey:true });
-          var sel = Array.prototype.slice.call(element.options).map(function(o){return o.selected})
-          is(""+sel, ""+data.s, "selected options match after CTRL+SPACE (after testing CTRL+key " + key + ") for (id: " + id + ")");
-          previousValue = element.value;
-          });
-      };
-      select_test("one", one, false);
-      select_test("two", two_1, true);
-      select_test("two", two_2, false);
+        tests.forEach(data => {
+          let previousValue = element.value;
+          let key = data.k;
+          synthesizeKey("VK_" + data.key, {shiftKey: false, metaKey: false,
+                                           ctrlKey: true });
+          (data.change ? isnot : is)(
+            element.value, previousValue,
+            `value should ${data.change ? "": "not "} have changed while testing CTRL+${data.key} (id: ${id})`
+          );
+
+          // Hit ctrl+space, but only for <select multiple> elements; doing so
+          // for single <select> elements will just trigger the dropdown to
+          // open. This is especially important because e10s-backed dropdowns
+          // behave differently: their .value isn't updated until the dropdown
+          // is closed (and the change confirmed), e.g. by pressing Enter.
+          let action;
+          if (element.multiple) {
+            synthesizeKey(" ", {shiftKey: false, metaKey: false,
+                                ctrlKey: true});
+            action = `CTRL+SPACE (after testing CTRL+${data.key})`;
+          } else {
+            action = `testing CTRL+${data.key}`;
+          }
+
+          let selected = [...element.options].map(o => o.selected);
+          is(selected.toString(), data.state.toString(),
+             `selected options match after ${action} (id: ${id})`);
+        });
+      }
+
+      select_test("single-list", single_list);
       if (navigator.platform.indexOf("Mac") == -1) {
-        select_test("three", three_1, true);
-        select_test("three", three_2, false);
+        select_test("single-dropdown", single_dropdown);
       } else {
         todo(false, "Make these tests work on OSX");
       }
+
+      select_test("multiple", multiple);
       SimpleTest.finish();
     });
   }
 </script>
 </head>
 <body onload="test();">
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=961363">Mozilla Bug 961363</a>
 <div>
   <ul>
     <li>
-    <select id="one" multiple size="3">
-      <option>0</option>
-      <option selected>1</option>
-      <option>2</option>
-      <option>3</option>
-    </select>
+      <select id="single-list" size="3">
+        <option>0</option>
+        <option selected>1</option>
+        <option>2</option>
+        <option>3</option>
+      </select>
     </li>
     <li>
-    <select id="two" size="3">
-      <option>0</option>
-      <option selected>1</option>
-      <option>2</option>
-      <option>3</option>
-    </select>
+      <select id="single-dropdown" size="1">
+        <option>0</option>
+        <option selected>1</option>
+        <option>2</option>
+        <option>3</option>
+      </select>
     </li>
     <li>
-    <select id="three" size="1">
-      <option>0</option>
-      <option selected>1</option>
-      <option>2</option>
-      <option>3</option>
-    </select>
+      <select id="multiple" multiple size="3">
+        <option>0</option>
+        <option selected>1</option>
+        <option>2</option>
+        <option>3</option>
+      </select>
     </li>
   </ul>
 </div>
 <pre id="test">
 </pre>
 </body>
 </html>