Bug 1708370 - adjust UA stylesheet to match spec for form rendering. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D180812

accessible/tests/browser/mac/browser_selectables.js

@@ -189,17 +189,38 @@ addAccessibleTask(
         c.isAttributeSettable("AXSelected"),
         c.getAttributeValue("AXEnabled"),
       ]);
+    [
+      ["​", false, 0],
+      ["Fruits", false, 0],
+      ["Banana", true, 1],
+      ["Apple", true, 1],
+      ["Orange", true, 1],
+      ["​", false, 0],
+      ["Vegetables", false, 0],
+      ["Lettuce", true, 1],
+      ["Tomato", true, 1],
+      ["Onion", true, 1],
+      ["​", false, 0],
+      ["Spices", false, 0],
+      ["Cumin", true, 1],
+      ["Coriander", true, 1],
+      ["Allspice", true, 1],
+      ["Everything", true, 1],
+    ];
     Assert.deepEqual(
       childValueSelectablePairs,
       [
+        ["​", false, false],
         ["Fruits", false, false],
         ["Banana", true, true],
         ["Apple", true, true],
         ["Orange", true, true],
+        ["​", false, false],
         ["Vegetables", false, false],
         ["Lettuce", true, true],
         ["Tomato", true, true],
         ["Onion", true, true],
+        ["​", false, false],
         ["Spices", false, false],
         ["Cumin", true, true],
         ["Coriander", true, true],
@@ -237,7 +258,7 @@ addAccessibleTask(
       "Select is direct parent of nested option"
     );
 
-    let groupLabel = select.getAttributeValue("AXChildren")[0];
+    let groupLabel = select.getAttributeValue("AXChildren")[1];
     ok(
       !groupLabel.isAttributeSettable("AXSelected"),
       "Group label should not be selectable"

accessible/tests/mochitest/elm/test_HTMLSpec.html

@@ -1200,6 +1200,7 @@
         interfaces: [ nsIAccessibleSelectable ],
         children: [
           { GROUPING: [ // HTML:optgroup
+            { role: ROLE_STATICTEXT },
             { role: ROLE_STATICTEXT },
             { role: ROLE_OPTION }, // HTML:option
             { role: ROLE_OPTION },

accessible/tests/mochitest/tree/test_select.html

@@ -20,6 +20,10 @@
           {
             role: ROLE_GROUPING,
             children: [
+              {
+                role: ROLE_STATICTEXT,
+                children: [ ],
+              },
               {
                 role: ROLE_STATICTEXT,
                 children: [ ],

layout/style/res/forms.css

@@ -301,6 +301,11 @@ option[label]::before {
   content: attr(label);
 }
 
+select:-moz-select-list-box option,
+select:-moz-select-list-box optgroup {
+  line-height: normal !important;
+}
+
 option {
   display: block;
   float: none !important;
@@ -310,18 +315,15 @@ option {
 
   min-block-size: 1em;
   padding-block: 2px;
+  user-select: none;
   /*
    * Note that the "UA !important" tests in
    * layout/style/test/test_animations.html depend on this rule, because
    * they need some UA !important rule to test.  If this changes, use a
    * different one there.
    */
-  line-height: normal !important;
-  user-select: none;
-  text-indent: 0;
   white-space: nowrap !important;
   word-wrap: normal !important;
-  text-align: match-parent;
 }
 
 select > option {
@@ -342,13 +344,10 @@ optgroup {
   display: block;
   float: none !important;
   position: static !important;
-  font: -moz-list;
-  line-height: normal !important;
   font-style: italic;
   font-weight: bold;
   font-size: unset;
   user-select: none;
-  text-indent: 0;
   white-space: nowrap !important;
   word-wrap: normal !important;
 }
@@ -361,7 +360,7 @@ optgroup > option {
 
 optgroup:before {
   display: block;
-  content: attr(label);
+  content: "\200b" attr(label);
 }
 
 @media (-moz-platform: android) {
@@ -544,7 +543,6 @@ button,
 ::file-selector-button {
   /* Buttons should lay out like "normal" html, mostly */
   white-space: unset;
-  text-indent: 0;
   /* But no text-decoration reaching inside, by default */
   display: inline-block;
 }

layout/style/test/test_animations.html

@@ -99,7 +99,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=435442
   }
 
   @keyframes uaoverride {
-    0%, 100% { line-height: 3; margin-top: 20px }
+    0%, 100% { white-space: pre; margin-top: 20px }
     50% { margin-top: 120px }
   }
 
@@ -1379,20 +1379,22 @@ done_div();
 
 // Test that UA !important rules override animations.
 // This test depends on forms.css having a rule
-//   option { line-height: !important }
+//   option { white-space: !important }
 // If that rule changes, we should rewrite it to depend on a different rule.
 var option;
 [ option, cs ] = new_element("option", "");
-var default_line_height = cs.lineHeight;
+var default_white_space = cs.whiteSpace;
+isnot(default_white_space, "pre",
+   "default style should not be the same as animation style");
 done_element();
 [ option, cs ] = new_element("option",
                              "animation: uaoverride 2s linear infinite");
-is(cs.lineHeight, default_line_height,
+is(cs.whiteSpace, default_white_space,
    "animations should not override UA !important at 0ms");
 is(cs.marginTop, "20px",
    "rest of animation should still work when UA !important present at 0ms");
 advance_clock(200);
-is(cs.lineHeight, default_line_height,
+is(cs.whiteSpace, default_white_space,
    "animations should not override UA !important at 200ms");
 is(cs.marginTop, "40px",
    "rest of animation should still work when UA !important present at 200ms");

testing/web-platform/meta/html/rendering/non-replaced-elements/form-controls/resets.html.ini

@@ -1,17 +0,0 @@
-[resets.html]
-  expected:
-    if (os == "android") and fission: [TIMEOUT, OK]
-  [<optgroup> - text-indent]
-    expected: FAIL
-
-  [<option> - line-height]
-    expected: FAIL
-
-  [<option> - text-indent]
-    expected: FAIL
-
-  [<optgroup> - line-height]
-    expected: FAIL
-
-  [<option> (in <select><optgroup>) - text-align]
-    expected: FAIL