| author | Brad Werth <bwerth@mozilla.com> |
| Mon, 07 Nov 2016 09:46:50 -0800 | |
| changeset 321596 | 428ede5e855bb39377d4e3b80215a82fd4c5a159 |
| parent 321595 | 9e51cd6950834a8809de0e5441cb348a2fd69804 |
| child 321597 | 951f657c539915a28a3c61216bb65bf445d0ce43 |
| push id | 83647 |
| push user | kwierso@gmail.com |
| push date | Tue, 08 Nov 2016 22:08:41 +0000 |
| treeherder | mozilla-inbound@1d0b02250149 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | dholbert |
| bugs | 1221524 |
| milestone | 52.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
|
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml @@ -56,10 +56,18 @@ ><div class="orange"><span class="super">super</span></div ><div class="pink"><span class="sub">sub</span></div ><table cellspacing="0" cellpadding="0" class="aqua big">big<br/>text<br/>3lines</table ><table class="tan" cellspacing="0" cellpadding="0"> <i>ital<br/>ic</i> </table> </div> + <div class="flexbox"> + <div class="lime">blk_1line</div + ><div class="yellow">blk<br/>2lines</div + ><div class="orange"><span class="super">super</span></div + ><div class="pink"><span class="sub">sub</span></div + ><div class="aqua big">big<br/>text<br/>3lines</div + ><div class="tan"><i>ital<br/>ic</i></div> + </div> </body> </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml @@ -12,20 +12,25 @@ <head> <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> <style> .flexbox { display: flex; - align-items: baseline; border: 1px dashed blue; font: 14px sans-serif; } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } .big { height: 100px; font: 24px sans-serif; margin-top: 20px; } .super { vertical-align: super; @@ -40,17 +45,25 @@ .yellow { background: yellow; } .orange { background: orange; } .pink { background: pink; } .aqua { background: aqua; } .tan { background: tan; } </style> </head> <body> - <div class="flexbox"> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> <div class="lime">blk_1line</div> <div class="yellow">blk<br/>2lines</div> <div class="orange"><span class="super">super</span></div> <div class="pink"><span class="sub">sub</span></div> <div class="aqua big">big<br/>text<br/>3lines</div> <i class="tan">ital<br/>ic</i> </div> </body>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml @@ -14,21 +14,26 @@ <head> <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> <style> .flexbox { display: flex; - align-items: baseline; flex-wrap: wrap-reverse; border: 1px dashed blue; font: 14px sans-serif; } + .base { + align-items: baseline; + } + .lastbase { + align-items: last baseline; + } .big { height: 100px; font: 24px sans-serif; margin-top: 20px; } .super { vertical-align: super; @@ -43,17 +48,25 @@ .yellow { background: yellow; } .orange { background: orange; } .pink { background: pink; } .aqua { background: aqua; } .tan { background: tan; } </style> </head> <body> - <div class="flexbox"> + <div class="flexbox base"> + <div class="lime">blk_1line</div> + <div class="yellow">blk<br/>2lines</div> + <div class="orange"><span class="super">super</span></div> + <div class="pink"><span class="sub">sub</span></div> + <div class="aqua big">big<br/>text<br/>3lines</div> + <i class="tan">ital<br/>ic</i> + </div> + <div class="flexbox lastbase"> <div class="lime">blk_1line</div> <div class="yellow">blk<br/>2lines</div> <div class="orange"><span class="super">super</span></div> <div class="pink"><span class="sub">sub</span></div> <div class="aqua big">big<br/>text<br/>3lines</div> <i class="tan">ital<br/>ic</i> </div> </body>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml @@ -1,51 +1,51 @@ <?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- Reference case for behavior of the 'baseline' value for align-items and align-self when tested against content with an orthogonal writing-mode. - - NOTE: For multi-line 'display: block' elements in the testcase (and inline - content that gets wrapped in an anonymous block), we add an inline-table - wrapper here in the reference case, so that we get first-line baseline - alignment instead of the last-line baseline-alignment that an inline-block - would give us. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Reftest Reference</title> <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> <style> .container { - display: block; + display: flex; border: 1px dashed blue; font: 14px sans-serif; height: 50px; } - div { display: inline-block; } - table { display: inline-table; } - .ortho { writing-mode: vertical-rl; width: 17px; + height: 40px; float: left; } - .offset { margin-top: 10px; } + .offset { margin-top: 10px; + margin-bottom: 3px; } + .start { align-self: flex-start; } + .end { align-self: flex-end; } .lime { background: lime; } .yellow { background: yellow; } .orange { background: orange; } .pink { background: pink; } </style> </head> <body> <div class="container"> - <div class="lime ortho">ortho</div - ><div class="yellow">one line</div - ><table cellspacing="0" cellpadding="0" - class="orange">two<br/>lines</table - ><div class="pink offset">offset</div> + <div class="lime ortho start">ortho</div + ><div class="yellow offset start">one line</div + ><div class="orange offset start">two<br/>lines</div + ><div class="pink offset start">offset</div> + </div> + <div class="container"> + <div class="lime ortho end">ortho</div + ><div class="yellow offset end">one line</div + ><div class="orange offset end">two<br/>lines</div + ><div class="pink offset end">offset</div> </div> </body> </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml @@ -12,37 +12,43 @@ <head> <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title> <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/> <style> .container { display: flex; - align-items: baseline; border: 1px dashed blue; font: 14px sans-serif; height: 50px; } - div { display: inline-block; } - table { display: inline-table; } + .base { align-items: baseline; } + .lastbase { align-items: last baseline; } .ortho { writing-mode: vertical-rl; - width: 17px; } - .offset { margin-top: 10px; } - + width: 17px; + height: 40px; } + .offset { margin-top: 10px; + margin-bottom: 3px; } .lime { background: lime; } .yellow { background: yellow; } .orange { background: orange; } .pink { background: pink; } </style> </head> <body> - <div class="container"> + <div class="container base"> + <div class="lime ortho">ortho</div> + <div class="yellow">one line</div> + <div class="orange">two<br/>lines</div> + <div class="pink offset">offset</div> + </div> + <div class="container lastbase"> <div class="lime ortho">ortho</div> <div class="yellow">one line</div> <div class="orange">two<br/>lines</div> <div class="pink offset">offset</div> </div> </body> </html>