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

Bug 1638174 [wpt PR 23622] - [css-grid] Add test checking the minimum contribution with percentages, a=testonly 

Automatic update from web-platform-tests
[css-grid] Add test checking the minimum contribution with percentages

The test checks grid track sizes coming from the minimum contribution of
an item, when the size properties contain percentages.

This is similar to grid-items/grid-item-percentage-sizes-00x.html tests,
but these are reftests so they check the size of the grid item instead
of the track sizes.

Also, after https://webkit.org/b/195967 some of the cases of this test
will pass in WebKit. The reftests will still fail due to other issues.

--

wpt-commits: 616f425e074db57f29e8c8559945fc4bfacd8393
wpt-pr: 23622
This commit is contained in:
Oriol Brufau 2020-05-21 10:20:19 +00:00 коммит произвёл moz-wptsync-bot
Родитель f7b3971d29
Коммит 69a156d85c
1 изменённых файлов: 87 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

87
testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html Normal file
Просмотреть файл

@ -0,0 +1,87 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: minimum contribution with percentages</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution">
<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage.">
<style>
#grid {
display: grid;
height: 50px;
width: 50px;
grid: auto / auto;
}
#item {
background: cyan;
}
#content {
height: 100px;
width: 100px;
}
.min {
min-height: calc(100% + 50px);
min-width: calc(100% + 50px);
}
.max {
max-height: calc(100% - 50px);
max-width: calc(100% - 50px);
}
.size {
height: calc(100% + 10px);
width: calc(100% + 10px);
}
</style>
<div id="log"></div>
<div id="grid">
<div id="item">
<div id="content"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
const cs = getComputedStyle(document.getElementById("grid"));
const item = document.getElementById("item");
function check(name, size) {
item.className = name;
test(function() {
assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns");
}, name + " - columns");
test(function() {
assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows");
}, name + " - rows");
}
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("auto", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("max", 100);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min max", 50);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min size", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("max size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min max size", 50);
</script>