mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1509438 [wpt PR 14196] - [css-contain] Fix baseline for elements with contain: layout, a=testonly 

Automatic update from web-platform-tests
[css-contain] Fix baseline for elements with contain: layout

Layout containment elements are treated as having no baseline,
when that's applied to table cells, flex or grid items
that are baseline aligned that means that they should use
their synthesized baseline.

The patch adds simple check in LayoutBlockFlow::FirstLineBoxBaseline()
similar to what we have in other methods. If the element has
layout containment it has no baseline (it returns -1).
The same thing is done in LayoutNGMixin<Base>::FragmentBaseline()
for LayoutNG.

Two tests from the WPT suite has been modified in order to avoid
baseline alignment as they are not checking that feature
of layout containment but something else.

BUG=907709
TEST=external/wpt/css/css-contain/contain-layout-baseline-002.html
TEST=external/wpt/css/css-contain/contain-layout-baseline-003.html
TEST=external/wpt/css/css-contain/contain-layout-baseline-004.html

Change-Id: Id393787dd24bf3e34aaf73476e446fb9d0a4e593
Reviewed-on: https://chromium-review.googlesource.com/c/1348892
Commit-Queue: Manuel Rego <rego@igalia.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610833}

--

wpt-commits: 3b78c96b77028a81550e43f3561c2c32d23358ab
wpt-pr: 14196
This commit is contained in:
Manuel Rego Casasnovas 2018-11-30 18:02:59 +00:00 коммит произвёл moz-wptsync-bot
Родитель f1489c046c
Коммит df55d5b640
6 изменённых файлов: 124 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

34
testing/web-platform/tests/css/css-contain/contain-layout-baseline-002.html Normal file
Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name=assert content="Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.">
<style>
#flex {
display: inline-flex;
align-items: baseline;
background: red;
}
canvas {
background: green;
width: 50px;
height: 100px;
}
#item {
contain: layout;
color: transparent;
background: green;
width: 50px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flex">
<canvas></canvas>
<div id="item">item</div>
</div>

35
testing/web-platform/tests/css/css-contain/contain-layout-baseline-003.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name=assert content="Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.">
<style>
#grid {
display: inline-grid;
align-items: baseline;
background: red;
grid-auto-flow: column;
}
canvas {
background: green;
width: 50px;
height: 100px;
}
#item {
contain: layout;
color: transparent;
background: green;
width: 50px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<canvas></canvas>
<div id="item">item</div>
</div>

31
testing/web-platform/tests/css/css-contain/contain-layout-baseline-004.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment supress baseline in table cells</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-baseline-004-ref.html">
<meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.">
<style>
#table {
display: table;
font: 100px/1 Ahem;
}
#table > * {
display: table-cell;
}
#first {
color: blue;
}
#second {
color: green;
contain: layout;
}
</style>
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
<div id="table">
<div id="first">X</div>
<div id="second">X</div>
</div>

1
testing/web-platform/tests/css/css-contain/contain-layout-cell-001.html
Просмотреть файл

@ -31,6 +31,7 @@
{
background-color: white;
display: table-cell;
vertical-align: top;
}
div#contain

2
testing/web-platform/tests/css/css-contain/contain-layout-cell-002.html
Просмотреть файл

@ -25,7 +25,7 @@
{
background-color: white;
padding: 0px;
vertical-align: baseline;
vertical-align: top;
}
td#contain

22
testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<!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>
div {
display: inline-block;
font: 100px/1 Ahem;
width: 100px;
height: 100px;
}
#first {
color: blue;
position: relative;
top: 20px;
}
#second {
color: green;
}
</style>
<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
<div id="first">X</div><div id="second">X</div>