summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-grid
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-grid')
-rw-r--r--testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html8
-rw-r--r--testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html7
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html7
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html7
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001-ref.html68
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001.html68
-rw-r--r--testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-002.html73
7 files changed, 231 insertions, 7 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
index 8e322fe38e..db466b82cd 100644
--- a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
@@ -50,7 +50,7 @@
<div class="item" data-expected-height=20>The first item.</div>
<div class="item" data-expected-height=20>The second item.</div>
</div>
- <div data-expected-height=200>Out of grid.</div>
+ <div data-expected-height=20>Out of grid.</div>
</div>
<div class="container container-first-letter">
@@ -65,7 +65,7 @@
<div class="grid grid-first-letter" data-expected-height=20>
Anonymous item.
</div>
- <div data-expected-height=200>Out of grid.</div>
+ <div data-expected-height=20>Out of grid.</div>
</div>
<div class="container container-first-letter">
@@ -80,7 +80,7 @@
<div class="item" data-expected-height=20>The first item.</div>
<div class="item" data-expected-height=20>The second item.</div>
</div>
- <div data-expected-height=200>Out of grid.</div>
+ <div data-expected-height=20>Out of grid.</div>
</div>
<div class="container container-first-letter">
@@ -95,7 +95,7 @@
<div class="grid" data-expected-height=20>
Anonymous item.
</div>
- <div data-expected-height=200>Out of grid.</div>
+ <div data-expected-height=20>Out of grid.</div>
</div>
<div class="container container-first-letter">
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
index 7751fd883b..29bab75f61 100644
--- a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
@@ -33,11 +33,12 @@
}
if (declarations) {
- let cssText = div.style.cssText;
+ let cssTextSerialization = div.style.cssText;
declarations.forEach(decl => {
test(function(){
- assert_true(cssText.indexOf(decl) !== -1, `cssText ('${cssText}') must contain '${decl}'`);
- }, `cssText ('${cssText}') must contain '${decl}'`);
+ assert_true(cssTextSerialization.indexOf(decl) !== -1,
+ `cssText serialization ('${cssTextSerialization}') must contain contain '${decl}'`);
+ }, `cssText ('${cssText}') must contain '${decl}' in its serialization`);
});
}
}
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html
index 9232f1dcf2..a4408517b4 100644
--- a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html
@@ -102,5 +102,12 @@
<x style="grid-column: 1 / 4">x</x>
</div>
</div>
+
+<div style="display:grid; grid-template-areas: 'a b c d'; grid-template-rows: 1fr 1fr;">
+ <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+ <div style="display:grid; grid:subgrid/subgrid; grid-column: a / d; grid-row: 2;">
+ <x style="grid-column: 3">x</x>
+ </div>
+</div>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html
index f22cfe3303..49295b50b4 100644
--- a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html
@@ -103,5 +103,12 @@
<x style="grid-column: a">x</x>
</div>
</div>
+
+<div style="display:grid; grid-template-areas: 'a b c d'; grid-template-rows: 1fr 1fr;">
+ <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+ <div style="display:grid; grid:subgrid/subgrid; grid-column: a / d; grid-row: 2;">
+ <x style="grid-column: c">x</x>
+ </div>
+</div>
</body>
</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001-ref.html
new file mode 100644
index 0000000000..0d00d380b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Reference: Subgrids with 'overflow' and/or 'scrollbar-gutter'</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<style>
+:root {
+ overflow: scroll; /* Required to reproduce the bug on Firefox */
+}
+.grid {
+ display: inline-block;
+ inline-size: 75px;
+ border: 5px solid blue;
+ vertical-align: top;
+}
+.subgrid {
+ block-size: 75px;
+}
+.item {
+ inline-size: 50px;
+ block-size: 50px;
+ background: green;
+}
+fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+</style>
+
+<p>All the following subgrid scroll container shouldn't have any scrollbars.</p>
+
+<p>Testcase 1: subgrid with 'overflow: scroll'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </div>
+</div>
+
+<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+
+<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001.html b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001.html
new file mode 100644
index 0000000000..664e4bc70e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-001.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrids with 'overflow' and/or 'scrollbar-gutter'</title>
+<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://bugzilla.mozilla.org/show_bug.cgi?id=1879770">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution">
+<link rel="match" href="scrollbar-gutter-001-ref.html">
+
+<style>
+:root {
+ overflow: scroll; /* Required to reproduce the bug on Firefox */
+}
+.grid {
+ inline-size: 75px;
+ display: inline-grid;
+ border: 5px solid blue;
+ vertical-align: top;
+}
+.subgrid {
+ block-size: 75px;
+ display: grid;
+ grid: auto / subgrid;
+}
+.item {
+ inline-size: 50px;
+ block-size: 50px;
+ background: green;
+}
+</style>
+
+<p>All the following subgrid scroll container shouldn't have any scrollbars.</p>
+
+<p>Testcase 1: subgrid with 'overflow: scroll'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </div>
+</div>
+
+<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+
+<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <div class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-002.html b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-002.html
new file mode 100644
index 0000000000..724bf06104
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/scrollbar-gutter-002.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Test: Fieldset subgrids with 'overflow' and/or 'scrollbar-gutter'</title>
+<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://bugzilla.mozilla.org/show_bug.cgi?id=1879770">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution">
+<link rel="match" href="scrollbar-gutter-001-ref.html">
+
+<style>
+:root {
+ overflow: scroll; /* Required to reproduce the bug on Firefox */
+}
+.grid {
+ inline-size: 75px;
+ display: inline-grid;
+ border: 5px solid blue;
+ vertical-align: top;
+}
+.subgrid {
+ block-size: 75px;
+ display: grid;
+ grid: auto / subgrid;
+}
+.item {
+ inline-size: 50px;
+ block-size: 50px;
+ background: green;
+}
+fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+</style>
+
+<p>All the following subgrid scroll container shouldn't have any scrollbars.</p>
+
+<p>Testcase 1: subgrid with 'overflow: scroll'</p>
+<div class="grid">
+ <fieldset class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </fieldset>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <fieldset class="subgrid" style="overflow: scroll;">
+ <div class="item"></div>
+ </fieldset>
+</div>
+
+<p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </fieldset>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </fieldset>
+</div>
+
+<p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p>
+<div class="grid">
+ <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </fieldset>
+</div>
+<div class="grid" style="writing-mode: vertical-rl;">
+ <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;">
+ <div class="item"></div>
+ </fieldset>
+</div>