Sync Mozilla CSS tests as of https://hg.mozilla.org/mozilla-central/rev/ce39a152428a7f8ba5a4c82455dcf501c76c031b . (#14264)
This contains changes from [bug 1507663](https://bugzilla.mozilla.org/show_bug.cgi?id=1507663) by @dholbert, reviewed by @aethanyc.
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001-ref.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001-ref.html
new file mode 100644
index 0000000..e1a478a
--- /dev/null
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style>
+ .flexBaselineCheck {
+ display: flex;
+ border: 1px solid black;
+ height: 100px;
+ }
+ .flexBaselineCheck > * {
+ border: 2px solid teal;
+
+ /* In the testcase, the (baseline-aligned) items should all have their
+ bottom borders aligned with the 80px-tall canvas. In other words, their
+ bottom borders should all be 20px away from the bottom of their flex
+ container. Here in the reference case, we just use "flex-end" alignment
+ plus a hardcoded 20px margin-bottom to produce a precise reference
+ for what that should look like. */
+ align-self: flex-end;
+ margin-bottom: 20px;
+ }
+ canvas {
+ background: purple;
+ width: 20px;
+ height: 80px;
+ box-sizing: border-box;
+ }
+ .flex {
+ display: flex;
+ }
+ .grid {
+ display: grid;
+ }
+ .multicol {
+ column-count: 2;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <div>block</div>
+ <fieldset><legend>leg</legend>fieldset</fieldset>
+ <div class="flex">flex</div>
+ <div class="grid">grid</div>
+ <div class="multicol">multi<br>col</div>
+ <details open><summary>summary</summary>details</details>
+ </div>
+</body>
+</html>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001.html
new file mode 100644
index 0000000..b023cfd
--- /dev/null
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+ <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
+ <style>
+ .flexBaselineCheck {
+ display: flex;
+ border: 1px solid black;
+ height: 100px;
+ }
+ .flexBaselineCheck > * {
+ contain: layout;
+ border: 2px solid teal;
+ align-self: baseline;
+ }
+ canvas {
+ background: purple;
+ width: 20px;
+ height: 80px;
+ box-sizing: border-box;
+ }
+ .flex {
+ display: flex;
+ }
+ .grid {
+ display: grid;
+ }
+ .multicol {
+ column-count: 2;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexBaselineCheck">
+ <!-- This canvas just exists to establish a precise, far-down baseline
+ alignment position: -->
+ <canvas></canvas>
+ <!-- "contain:layout" should force all the elements below to behave as if
+ they have no baseline. That means they all should *synthesize* a
+ baseline from their border-box edge, in order to participate in flex
+ item baseline alignment (to honor the outer flex container's
+ "align-items:baseline"). So, the expectation here is that all of these
+ elements' border-bottom edges should be aligned. -->
+ <div>block</div>
+ <fieldset><legend>leg</legend>fieldset</fieldset>
+ <div class="flex">flex</div>
+ <div class="grid">grid</div>
+ <div class="multicol">multi<br>col</div>
+ <details open><summary>summary</summary>details</details>
+ </div>
+</body>
+</html>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002-ref.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002-ref.html
new file mode 100644
index 0000000..d4095fd
--- /dev/null
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style>
+ .flexBaselineCheck {
+ display: flex;
+ border: 1px solid black;
+ height: 70px;
+ }
+ .flexBaselineCheck > * {
+ border: 2px solid teal;
+
+ /* In the testcase, the (baseline-aligned) items should all have their
+ bottom borders aligned with the 50px-tall canvas. In other words, their
+ bottom borders should all be 20px away from the bottom of their flex
+ container. Here in the reference case, we just use "flex-end" alignment
+ plus a hardcoded 20px margin-bottom to produce a precise reference
+ for what that should look like. */
+ align-self: flex-end;
+ margin-bottom: 20px;
+ }
+ canvas {
+ background: purple;
+ width: 20px;
+ height: 50px;
+ box-sizing: border-box;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <button>btn</button>
+ <input type="button" value="i-btn">
+ <input type="submit" value="i-sub">
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="text" value="text">
+ <input type="number" value="0">
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="date">
+ <input type="time">
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="file">
+ <textarea>textarea</textarea>
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <select><option>dropdown</option></select>
+ <select multiple style="max-height:40px"><option>multi</option></select>
+ </div>
+</body>
+</html>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002.html
new file mode 100644
index 0000000..eb79142
--- /dev/null
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-layout-suppress-baseline-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+ <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
+ <style>
+ .flexBaselineCheck {
+ display: flex;
+ border: 1px solid black;
+ height: 70px;
+ }
+ .flexBaselineCheck > * {
+ contain: layout;
+ border: 2px solid teal;
+ align-self: baseline;
+ }
+ canvas {
+ background: purple;
+ width: 20px;
+ height: 50px;
+ box-sizing: border-box;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexBaselineCheck">
+ <!-- This canvas just exists to establish a precise, far-down baseline
+ alignment position: -->
+ <canvas></canvas>
+ <!-- "contain:layout" should force all the elements below to behave as if
+ they have no baseline. That means they all should *synthesize* a
+ baseline from their border-box edge, in order to participate in flex
+ item baseline alignment (to honor the outer flex container's
+ "align-items:baseline"). So, the expectation here is that all of these
+ elements' border-bottom edges should be aligned. -->
+ <button>btn</button>
+ <input type="button" value="i-btn">
+ <input type="submit" value="i-sub">
+ </div>
+
+ <!-- Same as above, but with different form controls:
+ (split into multiple flex containers so as not to be too wide): -->
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="text" value="text">
+ <input type="number" value="0">
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="date">
+ <input type="time">
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <input type="file">
+ <textarea>textarea</textarea>
+ </div>
+
+ <div class="flexBaselineCheck">
+ <canvas></canvas>
+ <select><option>dropdown</option></select>
+ <select multiple style="max-height:40px"><option>multi</option></select>
+ </div>
+</body>
+</html>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001.html
index 20272cf..0ed82ff 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-block-001.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: size' on block elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+ <title>CSS Test: 'contain: size' on block elements should cause them to be sized as if they had no contents</title>
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<link rel="match" href="contain-size-block-001-ref.html">
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001-ref.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001-ref.html
index 0cb421b..efadf9b 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001-ref.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001-ref.html
@@ -7,6 +7,13 @@
<style>
button {
border: 1em solid green;
+ /* In case the testcase's 'inner' text is taller than the button, don't let
+ it influence its line-box's size. This lets us more-easily compare
+ sizing between empty buttons vs. contained nonempty buttons. */
+ vertical-align: top;
+ }
+ .vaBaseline {
+ vertical-align: baseline;
}
.width-ref {
width: 50px;
@@ -22,6 +29,7 @@
float: left;
width: 50px;
}
+ br { clear: both }
.iFlexBasic-ref {
display: inline-flex;
}
@@ -29,6 +37,11 @@
display: inline-flex;
width: 50px;
}
+ .innerContents {
+ color: transparent;
+ height: 0;
+ width: 0;
+ }
.orthog-ref {
writing-mode: vertical-lr;
}
@@ -50,7 +63,7 @@
<button class="iFlexWidth-ref"></button>
<br>
- outside before<button></button>outside after
+ outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
<br>
<button class="width-ref"></button>
@@ -65,7 +78,7 @@
<button class="height-ref"></button>
<br>
- s<button class="orthog-ref"></button>endtext
+ s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext
<br>
<button class="height-ref width-ref">inside</button>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001.html
index 015d33e..b29ef0f 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-button-001.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: size' on buttons should cause them to be sized and baseline-aligned as if they had no contents.</title>
+ <title>CSS Test: 'contain: size' on buttons should cause them to be sized as if they had no contents.</title>
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<link rel="match" href="contain-size-button-001-ref.html">
@@ -10,7 +10,13 @@
button {
contain: size;
border: 1em solid green;
- background: red;
+ /* In case the testcase's 'inner' text is taller than the button, don't let
+ it influence its line-box's size. This lets us more-easily compare
+ sizing between empty buttons vs. contained nonempty buttons. */
+ vertical-align: top;
+ }
+ .vaBaseline {
+ vertical-align: baseline;
}
.innerContents {
color: transparent;
@@ -38,6 +44,7 @@
float: left;
width: 50px;
}
+ br { clear: both }
.iFlexBasic {
display: inline-flex;
}
@@ -71,8 +78,8 @@
<button class="iFlexWidth"><div class="innerContents">inner</div></button>
<br>
- <!--CSS Test: A size-contained button should perform baseline alignment as if the container were empty.-->
- outside before<button><div class="innerContents">inner</div></button>outside after
+ <!--CSS Test: A size-contained button should perform baseline alignment regularly.-->
+ outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
<br>
<!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.-->
@@ -91,8 +98,8 @@
<button class="height"><div class="innerContents">inner</div></button>
<br>
- <!--CSS Test: A size-contained button with vertical text should perform baseline alignment as if the container were empty.-->
- s<button class="orthog"><div class="innerContents">inner</div></button>endtext
+ <!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.-->
+ s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext
<br>
<!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.-->
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002-ref.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002-ref.html
index 31ca883..198e8e1 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002-ref.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-fieldset-002-ref.html
@@ -5,10 +5,6 @@
<title>CSS Reftest Reference</title>
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<style>
- .basic {
- border: none;
- visibility: hidden;
- }
.container {
border: 10px solid green;
display: inline-block;
@@ -37,7 +33,7 @@
</head>
<body>
<div class="flexBaselineCheck">
- outside before<fieldset class="basc">
+ outside before<fieldset>
<legend>l</legend>
<div class="innerContents">i</div>
</fieldset>outside after
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-flex-001.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-flex-001.html
index 1866dfd..72ab970 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-flex-001.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-flex-001.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: size' on flex elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+ <title>CSS Test: 'contain: size' on flex elements should cause them to be sized as if they had no contents.</title>
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<link rel="match" href="contain-size-flex-001-ref.html">
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-grid-001.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-grid-001.html
index a85b0a3..c81fa1f 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-grid-001.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-grid-001.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: size' on grid elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+ <title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title>
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<link rel="match" href="contain-size-grid-001-ref.html">
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003-ref.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003-ref.html
index 07b3e5e..af927aa 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003-ref.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003-ref.html
@@ -9,6 +9,11 @@
border: 1em solid green;
column-count: 3;
}
+ .innerContents {
+ color: transparent;
+ height: 0;
+ width: 0;
+ }
.col-width-ref {
column-width: 20px;
}
@@ -28,12 +33,14 @@
</style>
</head>
<body>
- <!-- XXX: This chunk needs to move to a separate test (Bug 1507663)
<div class="flexBaselineCheck">
- outside before<div class="basic"></div>outside after
+ outside before
+ <div class="basic" style="max-height:0px">
+ <div class="innerContents">inner</div>
+ </div>
+ outside after
</div>
<br>
- -->
<div class="basic min col-width-ref"></div>
<br>
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html
index d2d1378..447e3cc 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
+ <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents</title>
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
<link rel="match" href="contain-size-multicol-003-ref.html">
@@ -37,13 +37,16 @@
</style>
</head>
<body>
- <!--CSS Test: A size-contained multicol element should perform baseline alignment as if it had no contents.-->
- <!-- XXX: This chunk needs to move to a separate test (Bug 1507663)
+ <!-- This test verifies that contain:size doesn't interfere with the
+ determination of a multicol element's baseline. -->
<div class="flexBaselineCheck">
- outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
+ outside before
+ <div class="contain">
+ <div class="innerContents">inner</div>
+ </div>
+ outside after
</div>
<br>
- -->
<!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/reftest.list b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/reftest.list
index 6b872e7..c99a7e5 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/contain/reftest.list
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/contain/reftest.list
@@ -40,3 +40,5 @@
== contain-layout-ignored-cases-no-principal-box-001.html contain-paint-ignored-cases-no-principal-box-001-ref.html
== contain-layout-ignored-cases-no-principal-box-002.html contain-layout-ignored-cases-no-principal-box-002-ref.html
== contain-layout-ignored-cases-no-principal-box-003.html contain-layout-ignored-cases-no-principal-box-003-ref.html
+== contain-layout-suppress-baseline-001.html contain-layout-suppress-baseline-001-ref.html
+== contain-layout-suppress-baseline-002.html contain-layout-suppress-baseline-002-ref.html
diff --git a/css/vendor-imports/mozilla/mozilla-central-reftests/ui3/reftest.list b/css/vendor-imports/mozilla/mozilla-central-reftests/ui3/reftest.list
index 4e493c8..c63b1f5 100644
--- a/css/vendor-imports/mozilla/mozilla-central-reftests/ui3/reftest.list
+++ b/css/vendor-imports/mozilla/mozilla-central-reftests/ui3/reftest.list
@@ -7,4 +7,4 @@
== box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht
== box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht
== box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht
-skip-if(cocoaWidget) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1383454
+== box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht
