Bug 1552287 part 1: [css-contain] Fix some CSS layout-containment web-platform-tests to make their assumptions more valid. r=TYLin
☠☠ backed out by 3b14313df83b ☠ ☠
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 23 May 2019 21:41:24 +0000
changeset 475285 888c32d2a32e849046cfe945593fe684c79e9ffa
parent 475284 7a039c35fc6f96e13d1a24c54139c942902ee5a4
child 475286 815c6657d164d34b215a39d233cc60b2e6f546fa
push id36058
push useraciure@mozilla.com
push dateFri, 24 May 2019 03:53:25 +0000
treeherdermozilla-central@c87317c41902 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersTYLin
bugs1552287, 965740
milestone69.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 1552287 part 1: [css-contain] Fix some CSS layout-containment web-platform-tests to make their assumptions more valid. r=TYLin In particular: - In contain-layout-baseline-005.html and its reference case, we need to explicitly specify 'vertical-align:baseline' to test baseline-alignment, because some of its tested form controls have other UA-stylesheet-provided default values of 'vertical-align'. (e.g. <select multiple> defaults to 'vertical-align:text-bottom") - Also: in that same test, we need to reduce the width of the an <input> textfield -- otherwise, it and the other elements on its line may not fit and may linewrap, which prevents us from effectively testing baseline-alignment on the linewrapped element. - In contain-layout-button-001.html, the expectation was not correct. Before this patch, the test expects that a layout-contained button will have the same baseline as an empty button, and that's an invalid expectation. An empty button uses a point inside of its content-box as its baseline, whereas a layout-contained element *has no baseline*, which means that it does 'vertical-align:baseline' alignment by aligning its own margin-bottom edge with the parent's baseline, per https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align So, I'm amending the test to have this expectation and updating its meta tags to reference the updated expectation and with a reference to that spec text. Firefox fails the amended contain-layout-button-001.html test, so this patch adds a .ini file to reflect that failure. The next patch in this series will fix our implementation to make us pass the test, and will remove the .ini file. Chrome also fails the amended contain-layout-button-001.html tests, and I filed https://bugs.chromium.org/p/chromium/issues/detail?id=965740 on them with an explanation. Differential Revision: https://phabricator.services.mozilla.com/D32182
testing/web-platform/meta/css/css-contain/contain-layout-button-001.html.ini
testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
testing/web-platform/tests/css/css-contain/contain-layout-button-001.html
testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/css/css-contain/contain-layout-button-001.html.ini
@@ -0,0 +1,2 @@
+[contain-layout-button-001.html]
+  expected: FAIL
--- a/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
@@ -8,16 +8,17 @@
 <style>
 .wrapper {
   height: 110px;
 }
 .wrapper > * {
   contain: layout;
   background: cyan;
   font-size: 20px;
+  vertical-align: baseline;
 }
 .wrapper > :nth-child(1) {
   background: magenta;
 }
 .inline-block {
   display: inline-block;
 }
 canvas {
@@ -44,17 +45,17 @@ fieldset, details {
   <div class="inline-block">foo</div>
   <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>
 </div>
 <div class="wrapper">
   <canvas></canvas>
-  <input value="foo"></input>
+  <input value="foo" size="3"></input>
   <input type="file"></input>
 </div>
 <div class="wrapper">
   <canvas></canvas>
   <table style="display: inline-table;"><tr><td>foo</td></tr></table>
   <canvas></canvas>
   <fieldset></fieldset>
   <fieldset><legend>foo</legend></fieldset>
--- a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Containment Test: Layout containment on button</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
 <link rel="match" href="reference/contain-layout-button-001-ref.html">
-<meta name=assert content="Layout containment does apply to buttons, thus their baseline is the same than if they don't have contents.">
+<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">
 <style>
 button {
   border: 5px solid green;
   padding: 0;
+  /* We use a nonzero margin-bottom to be sure we're synthesizing a baseline
+     from the margin-box rather than from the border-box: */
+  margin-bottom: 2px;
   contain: layout;
   color: transparent;
   width: 0;
   height: 0;
 }
 </style>
 
-<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
+<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
 before<button>b</button>after
--- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
@@ -41,17 +41,17 @@ fieldset, details {
   <div class="inline-block">foo</div>
   <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>
 </div>
 <div class="wrapper">
   <canvas></canvas>
-  <input value="foo"></input>
+  <input value="foo" size="3"></input>
   <input type="file"></input>
 </div>
 <div class="wrapper">
   <canvas></canvas>
   <table style="display: inline-table;"><tr><td>foo</td></tr></table>
   <canvas></canvas>
   <fieldset></fieldset>
   <fieldset><legend>foo</legend></fieldset>
--- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Containment Test: Reference file</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <style>
-button {
+div.fakeButton {
+  display: inline-block;
   border: 5px solid green;
   padding: 0;
+  margin-bottom: 2px;
   color: transparent;
   width: 0;
   height: 0px;
   /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
   position: relative;
   z-index: 1;
 }
 </style>
 
-<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
-before<button></button>after
+<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>
+before<div class="fakeButton"></div>after