Use eReplacedSizing to assert replaced elements for aspect-ratio.
It seems `eReplacedSizing` is much closer to the definition of replaced
elements (defined in [1]), and we override ComputeSize() for those
frames which are set eReplacedSizing or inline/table frames.
Perhaps we have to update the comments for the frame type bits later.
[1] https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
Differential Revision: https://phabricator.services.mozilla.com/D117372
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1681958
gecko-commit: 738bc12bd497cbb828435bbf761c5820c5cb8ffc
gecko-reviewers: TYLin
diff --git a/css/css-sizing/aspect-ratio/select-element-001-ref.html b/css/css-sizing/aspect-ratio/select-element-001-ref.html
new file mode 100644
index 0000000..c3de58e
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/select-element-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio reference: select elements</title>
+<select style="height: 50px; width: 50px; background: green;">
+ <option value=""></option>
+</select>
+<br>
+<select style="height: 50px; width: 50px; background: green;">
+ <option value="">The long text is selected</option>
+</select>
+<br>
+<select style="height: 50px; width: auto; background: green;">
+ <option value="">The long text is selected</option>
+</select>
diff --git a/css/css-sizing/aspect-ratio/select-element-001.html b/css/css-sizing/aspect-ratio/select-element-001.html
new file mode 100644
index 0000000..7f1626c
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/select-element-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: select elements with min-width</title>
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="match" href="select-element-001-ref.html">
+
+<!-- Sanity Check - aspect-ratio should be applied on the select element -->
+<select style="height: 50px; aspect-ratio: 1/1; background: green;">
+ <option value=""></option>
+</select>
+<br>
+<!-- The content size shouldn't override the size when min-width is non-auto -->
+<select style="height: 50px; aspect-ratio: 1/1; background: green; min-width: 0px;">
+ <option value="">The long text is selected</option>
+</select>
+<br>
+<!-- The content size should override the size when min-width is auto -->
+<select style="height: 50px; aspect-ratio: 1/1; background: green;">
+ <option value="">The long text is selected</option>
+</select>
