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 500784 a9b1d69e379ac93067c87570fd0b572d3af4c22c
parent 500783 50a3c9a567e3f8f6285ba6bb0c0b7e5e6a4358e9
child 500785 e1fde2f49f84ca071bc41175b3335969b974c88b
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1499230
milestone64.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 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>