Bug 1507663 part 2: Adjust reftest 'contain-size-button-001.html' to expect that contain:size *does not* suppress baseline alignment. r=TYLin

Note that Firefox doesn't actually match this expectation yet, so I've added a
'fails' annotation to the manifest with the followup bug number.

Also, this patch makes several other improvements to this test:

 - remove red background in testcase.  This was making the testcase spuriously
   fail in Chrome, because Chrome paints (at least) a 1px-tall background-area
   on empty buttons, which meant a 1px-tall red area in the testcase vs. a
   1px-tall gray area in the reference case.
 - clear floats to prevent them from piling up awkwardly.
 - use 'vertical-align:top' to turn off baseline alignment in parts of the test
   where the testcase has text and the reference case does not (and where we're
   not intentionally testing the baseline's influence on layout).

Depends on D12614

Differential Revision: https://phabricator.services.mozilla.com/D12615

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert 2018-11-26 21:05:34 +00:00
parent 856c7058bc
commit 6c0b28dbdd
3 changed files with 29 additions and 9 deletions

View File

@ -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>

View File

@ -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.-->

View File

@ -18,7 +18,7 @@ pref(layout.css.overflow-clip-box.enabled,true) == contain-paint-clip-006.html c
== contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html contain-paint-ignored-cases-ruby-stacking-and-clipping-001-ref.html
== contain-paint-stacking-context-001a.html contain-paint-stacking-context-001-ref.html
== contain-paint-stacking-context-001b.html contain-paint-stacking-context-001-ref.html
== contain-size-button-001.html contain-size-button-001-ref.html
fails == contain-size-button-001.html contain-size-button-001-ref.html # bug 1508441
== contain-size-block-001.html contain-size-block-001-ref.html
== contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
== contain-size-flex-001.html contain-size-flex-001-ref.html