mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 18:26:15 +00:00
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:
parent
856c7058bc
commit
6c0b28dbdd
@ -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>
|
||||
|
@ -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.-->
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user