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

Bug 1909761 Part 5 - Add web-platform reftests for percentage resolution during intrinsic size computation. r=dholbert 

All the tests pass in Google Chrome. They fail in the current Firefox Nightly
but will pass with the patches in this bug.

`intrinsic-percent-replaced-{012,013,014}.html` are adapted from the second
testcase in bug 1231059 comment 0.

`intrinsic-percent-replaced-{015,016}.html` are adapted from the testcase in bug
1800991 comment 2.

`intrinsic-percent-replaced-017.html` is adapted from bug 1910290 comment 7.

`intrinsic-percent-replaced-018.html` is adapted from dholbert's review comments
in https://phabricator.services.mozilla.com/D219523#inline-1222435

Differential Revision: https://phabricator.services.mozilla.com/D219524
This commit is contained in:
Ting-Yu Lin 2024-09-03 04:25:43 +00:00
Родитель 6fc99638a4
Коммит 4f0616a1c6
7 изменённых файлов: 244 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

38
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-012.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1231059">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This test verifies that the inner div's padding is resolved against the outer div's width when computing its max-content width.">
<style>
.outer {
width: 25px;
height: 50px;
}
.inner {
box-sizing: border-box;
width: max-content;
height: 100%;
padding-top: 100%; /* 25px */
background: green;
}
canvas {
height: 100%;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div class="outer">
<div class="inner">
<!-- display:block on <canvas> exercises a different code path in Firefox. -->
<canvas width="40" height="10" style="display: block;"></canvas>
</div>
</div>
<div class="outer">
<div class="inner">
<canvas width="40" height="10"></canvas>
</div>
</div>

38
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-013.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1231059">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This test verifies that the inner div's padding is resolved against the outer div's width when computing its min-content width.">
<style>
.outer {
width: 25px;
height: 50px;
}
.inner {
box-sizing: border-box;
width: min-content;
height: 100%;
padding-top: 100%; /* 25px */
background: green;
}
canvas {
height: 100%;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div class="outer">
<div class="inner">
<!-- display:block on <canvas> exercises a different code path in Firefox. -->
<canvas width="40" height="10" style="display: block;"></canvas>
</div>
</div>
<div class="outer">
<div class="inner">
<canvas width="40" height="10"></canvas>
</div>
</div>

38
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-014.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1231059">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This test verifies that the inner div's padding is resolved against the outer div's width when computing its min-content width.">
<style>
.outer {
width: 25px;
height: 50px;
}
.inner {
display: inline-block;
box-sizing: border-box;
height: 100%;
padding-top: 100%; /* 25px */
background: green;
}
canvas {
height: 100%;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div class="outer">
<div class="inner">
<!-- display:block on <canvas> exercises a different code path in Firefox. -->
<canvas width="40" height="10" style="display: block;"></canvas>
</div>
</div>
<div class="outer">
<div class="inner">
<canvas width="40" height="10"></canvas>
</div>
</div>

32
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-015.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800991">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the outer div's width is transferring through aspect-ratio as a percentage basis for its children when computing their min-content contribution.">
<style>
.outer {
width: 200px;
aspect-ratio: 2/1;
}
.inner {
width: min-content;
height: 100%;
background: red;
}
img {
height: 100%;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">
<div style="height:100%">
<img src="aspect-ratio/support/200x200-green.png">
</div>
</div>
</div>

32
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-016.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800991">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the outer div's width is transferring through aspect-ratio as a percentage basis for its children when computing their max-content contribution.">
<style>
.outer {
width: 200px;
aspect-ratio: 2/1;
}
.inner {
width: max-content;
height: 100%;
background: red;
}
img {
height: 100%;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">
<div style="height:100%">
<img src="aspect-ratio/support/200x200-green.png">
</div>
</div>
</div>

32
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-017.html Normal file
Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1910290">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the outer div's height is served as a percentage basis for its children when computing their intrinsic size contribution.">
<style>
.outer {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
align-items: center;
}
.inner {
max-height: 100%;
background: red;
}
img {
max-height: 100%;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">
<img src="aspect-ratio/support/200x200-green.png">
</div>
</div>

34
testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-018.html Normal file
Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1909761">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the outer div's height is NOT used as a percentage basis for the table cell's children when computing their intrinsic size contribution.">
<style>
.outer {
display: table;
width: min-content;
height: 100px;
background: red;
border-right: 10px solid red;
}
.inner {
display: table-cell;
height: 100%;
}
canvas {
vertical-align: top;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">
<canvas width="10" height="4" style="height: 40%"></canvas>
<canvas width="10" height="6" style="height: 60%"></canvas>
</div>
</div>