Bug 1499230 - Make empty <select>s have zero content-box inline-size, like in other UAs. r=emilio
authorMats Palmgren <mats@mozilla.com>
Mon, 22 Oct 2018 00:54:56 +0200
changeset 490613 a9b1d69e379ac93067c87570fd0b572d3af4c22c
parent 490612 50a3c9a567e3f8f6285ba6bb0c0b7e5e6a4358e9
child 490614 e1fde2f49f84ca071bc41175b3335969b974c88b
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersemilio
bugs1499230
milestone64.0a1
Bug 1499230 - Make empty <select>s have zero content-box inline-size, like in other UAs. r=emilio
layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
layout/reftests/native-theme/combobox-nonnative-when-styled.html
layout/style/res/forms.css
testing/web-platform/meta/css/css-display/select-4-option-optgroup-display-none.html.ini
testing/web-platform/tests/html/rendering/replaced-elements/the-select-element/select-empty-ref.html
testing/web-platform/tests/html/rendering/replaced-elements/the-select-element/select-empty.html
--- a/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
@@ -1,9 +1,12 @@
 <!DOCTYPE HTML>
+<style>
+  select { inline-size: 2.5em }
+</style>
 <div style="position:relative">
 <!-- mask the dropdown button -->
 <div style="position:absolute; width:50px; left:7px; top:0; bottom:0; background:black;"></div>
 <!-- these should make the select non-native -->
 <select size="1" style="-moz-appearance: none; border-width: 0"></select><br>
 <select size="1" style="-moz-appearance: none; border-width: 1px"></select><br>
 <select size="1" style="-moz-appearance: none; border-width: 2px"></select><br>
 <select size="1" style="-moz-appearance: none; border-width: 3px"></select><br>
--- a/layout/reftests/native-theme/combobox-nonnative-when-styled.html
+++ b/layout/reftests/native-theme/combobox-nonnative-when-styled.html
@@ -1,9 +1,12 @@
 <!DOCTYPE HTML>
+<style>
+  select { inline-size: 2.5em }
+</style>
 <div style="position:relative">
 <!-- mask the dropdown button -->
 <div style="position:absolute; width:50px; left:7px; top:0; bottom:0; background:black;"></div>
 <!-- these should make the select non-native -->
 <select size="1" style="border-width: 0"></select><br>
 <select size="1" style="border-width: 1px"></select><br>
 <select size="1" style="border-width: 2px"></select><br>
 <select size="1" style="border-width: 3px"></select><br>
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -307,20 +307,16 @@ select > button[orientation="right"] {
 select > button[orientation="left"]:active {
   background-image: url("arrowd-left.gif") !important;
 }
 
 select > button[orientation="right"]:active {
   background-image: url("arrowd-right.gif") !important;
 }
 
-select:empty {
-  inline-size: 2.5em;
-}
-
 *|*::-moz-display-comboboxcontrol-frame {
   overflow: -moz-hidden-unscrollable;
   /* This block-start/end padding plus the combobox block-start/end border need to
      add up to the block-start/end borderpadding of text inputs and buttons */
   padding-block-start: 1px;
   padding-block-end: 1px;
   padding-inline-start: 4px;
   padding-inline-end: 0;
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-display/select-4-option-optgroup-display-none.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[select-4-option-optgroup-display-none.html]
-  expected: FAIL
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/the-select-element/select-empty-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: empty SELECT</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+
+.none { display: none; }
+
+  </style>
+</head>
+<body>
+
+<table border="1" cellpadding="10">
+<tr>
+<td><select size="4"><option class="none"></select>
+<td><select size="4" style="-webkit-appearance: none"><option class="none">option</select>
+<td><select size="4" style="-webkit-appearance: none; border: 1px solid black"><option class="none">option</select>
+<td><select size="4" style="border: 1px solid black"><option class="none">option</select>
+</table>
+
+<table border="1" cellpadding="10">
+<tr>
+<td><select size="1"><option class="none"></select>
+<td><select size="1" style="-webkit-appearance: none"><option class="none"></select>
+<td><select size="1" style="-webkit-appearance: none; border: 1px solid black"><option class="none"></select>
+<td><select size="1" style="border: 1px solid black"><option class="none"></select>
+</table>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/the-select-element/select-empty.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Test: empty SELECT</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="match" href="select-empty-ref.html">
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499230">
+</head>
+<body>
+
+<table border="1" cellpadding="10">
+<tr>
+<td><select size="4"></select>
+<td><select size="4" style="-webkit-appearance: none"></select>
+<td><select size="4" style="-webkit-appearance: none; border: 1px solid black"></select>
+<td><select size="4" style="border: 1px solid black"></select>
+</table>
+
+<table border="1" cellpadding="10">
+<tr>
+<td><select size="1"></select>
+<td><select size="1" style="-webkit-appearance: none"></select>
+<td><select size="1" style="-webkit-appearance: none; border: 1px solid black"></select>
+<td><select size="1" style="border: 1px solid black"></select>
+</table>
+
+</body>
+</html>