forked from mirrors/gecko-dev
83f58e67e0
Before this patch, this WPT doesn't robustly pass in *any* browser that I tested. In Firefox on Ubuntu, the lower section (the 'last baseline'-aligned items) are positioned about 1px differently when comparing the testcase vs. reference case. Chrome on Ubuntu shows a similar misalignment, if you zoom in the testcase and the reference case to 500% full-page-zoom level and compare them. (And Safari fails with a more substantial mismatch that looks like an actual implementation bug.) The test fails as described above because its reference case has a fragile dependency on using 'margin-top:4px' as a fudge-factor to approximately bottom-align some content. That content's size is font-dependent, so there's no guarantee that 4px will be the right amount to make it bottom-aligned. This 4px value seems to have just been chosen since it happened to make things line up properly in Chrome when the test was edited at some point in the past. In this patch, I'm fixing the reference case to properly bottom-align the relevant elements, by using a flex container with `align-items:end`. This should make the test more robust, such that it can be expected to pass, regardless of the font that's used. Differential Revision: https://phabricator.services.mozilla.com/D186424
72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
<?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.
|
|
-->
|
|
<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,
|
|
.containerEndAlign {
|
|
border: 1px dashed blue;
|
|
font: 14px sans-serif;
|
|
height: 50px;
|
|
}
|
|
|
|
.container > div,
|
|
.wrapper > div{
|
|
display: inline-block;
|
|
}
|
|
|
|
.containerEndAlign {
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
.wrapper {
|
|
/* This accounts for the 'margin-bottom: 3px' on the 'offset' element
|
|
in the last-baseline-aligned part of the testcase: */
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.ortho {
|
|
writing-mode: vertical-rl;
|
|
width: 17px;
|
|
height: 40px;
|
|
}
|
|
|
|
.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
|
|
><div class="orange" style="display: inline-flex;">two<br/>lines</div
|
|
><div class="pink">offset</div>
|
|
</div>
|
|
|
|
<!-- Note: in the testcase, there's a flex container here, whose flex items
|
|
are 'last baseline'-aligned and collectively snapped to the end
|
|
(bottom) edge. To mock that up, we use a simple flex container with a
|
|
single end-aligned 'display:block' flex item; and that item has
|
|
inline-block children, which are mockups of the testcase's flex items.
|
|
(These inline-blocks get automatically 'last-baseline' aligned to each
|
|
other, as part of regular inline-block layout behavior.) -->
|
|
<div class="containerEndAlign">
|
|
<div class="wrapper">
|
|
<div class="lime ortho">ortho</div
|
|
><div class="yellow">one line</div
|
|
><div class="orange">two<br/>lines</div
|
|
><div class="pink">offset</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|