mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
c016e21c54
In particular: - In contain-layout-suppress-baseline-002.html, the test currently indirectly relies on the 50px-tall-canvas being the tallest thing in each flex container. This isn't robustly true (and in fact on windows, the textarea is taller at 50.8px tall). So I'm adjusting this test so that it no longer has a hardcoded flex container size and no longer depends on this. - 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 --HG-- extra : moz-landing-system : lando
61 lines
1.8 KiB
HTML
61 lines
1.8 KiB
HTML
<!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>
|
|
.wrapper {
|
|
height: 110px;
|
|
}
|
|
.wrapper > * {
|
|
vertical-align: bottom;
|
|
background: cyan;
|
|
font-size: 20px;
|
|
}
|
|
.wrapper > :nth-child(1) {
|
|
background: magenta;
|
|
}
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
canvas {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
fieldset, details {
|
|
display: inline-block;
|
|
width: max-content;
|
|
}
|
|
</style>
|
|
<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p>
|
|
<div class="wrapper">
|
|
<div class="inline-block" style="font-size: 80px;">foo</div>
|
|
<div class="inline-block">foo</div>
|
|
<div class="inline-block" style="border: solid thick; padding: 2px;">foo</div>
|
|
<div style="display: inline-flex;">foo</div>
|
|
<div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div>
|
|
<div style="display: inline-grid;">foo</div>
|
|
<div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<canvas></canvas>
|
|
<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" 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>
|
|
<fieldset><legend>foo</legend>foo</fieldset>
|
|
<details></details>
|
|
<details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details>
|
|
</div>
|