mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision ac16628eb7eb601957382053011363d2bcf8ce44
This commit is contained in:
WPT Sync Bot
parent
ea7e753cea
commit
7e7c8873e4
4408 changed files with 664787 additions and 857286 deletions
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that we use the aspect ratio, clamped by min/max, to compute the main size</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
float: left;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 40px;
|
||||
min-height: 0; /* Disable min-size: auto. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div class="flex">
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that we use the aspect ratio, clamped by min/max, to compute the main size</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 200px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 20%;
|
||||
min-height: 0; /* Disable min-size: auto. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div class="flex">
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that padding % are resolved against parent's inline size when aspect ratio item doesn't have a definite cross size</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 200px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
img {
|
||||
padding-left: 5%;
|
||||
min-width: 40px;
|
||||
min-height: 0; /* Disable min-size: auto. */
|
||||
margin-left: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div class="flex">
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: multiplying integers by the aspect ratio doesn't accumulate rounding errors</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
float: left;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0;
|
||||
min-height: 0; /* Disable min-size: auto so we don't have to think about it. */
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div class="flex">
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that we use the aspect ratio to compute the main size when there is a definite cross size and a specified but indefinite flex-basis</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
float: left;
|
||||
}
|
||||
|
||||
img {
|
||||
flex: 0 0 0%;
|
||||
height: 500px;
|
||||
min-width: 0;
|
||||
min-height: 0; /* Disable min-size: auto so we don't have to think about it. */
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Force a relayout after the image loads to work around http://crbug.com/1042329
|
||||
window.onload = (event) => {
|
||||
flex.style.width = "50px";
|
||||
flex.offsetTop;
|
||||
flex.style.width = "auto";
|
||||
flex.offsetTop;
|
||||
document.documentElement.classList.remove("reftest-wait")
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div class="flex" id=flex>
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that we use the aspect ratio, clamped by cross min/max, to compute the main size.</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#flex {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
img {
|
||||
min-width: 0; /* Disable min-size: auto so we don't have to think about it. */
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Force a relayout after the image loads to work around http://crbug.com/1042329
|
||||
window.onload = (event) => {
|
||||
flex.style.width = "50px";
|
||||
flex.offsetTop;
|
||||
flex.style.removeProperty("width");
|
||||
flex.offsetTop;
|
||||
document.documentElement.classList.remove("reftest-wait")
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="width:60px; height: 100px; background: green; float: left;"></div>
|
||||
<div id="flex">
|
||||
<img src="support/20x50-green.png">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Test Reference: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-flex;
|
||||
background: fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<span>B</span>
|
||||
<span style="width: 100px;"></span>
|
||||
<span>C</span>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps">
|
||||
<link rel="match" href="flexbox-gap-position-absolute-ref.html">
|
||||
<meta name="assert" content="This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size.">
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-flex;
|
||||
gap: 100px;
|
||||
background: fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<span style="position: absolute;"></span>
|
||||
<span style="position: fixed;"></span>
|
||||
<span>B</span>
|
||||
<span>C</span>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with LR vertical writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
34
tests/wpt/web-platform-tests/css/css-flexbox/gap-001-lr.html
Normal file
34
tests/wpt/web-platform-tests/css/css-flexbox/gap-001-lr.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with vertical LR writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-001-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-001-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with vertical RL writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
34
tests/wpt/web-platform-tests/css/css-flexbox/gap-001-rl.html
Normal file
34
tests/wpt/web-platform-tests/css/css-flexbox/gap-001-rl.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with vertical RL writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-001-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with RTL writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - horizontal with RTL writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-001-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical with LR vertical writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: gray;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
33
tests/wpt/web-platform-tests/css/css-flexbox/gap-002-lr.html
Normal file
33
tests/wpt/web-platform-tests/css/css-flexbox/gap-002-lr.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical with vertical LR writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps">
|
||||
<link rel="match" href="gap-002-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps">
|
||||
<link rel="match" href="gap-002-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical with RL vertical writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
33
tests/wpt/web-platform-tests/css/css-flexbox/gap-002-rl.html
Normal file
33
tests/wpt/web-platform-tests/css/css-flexbox/gap-002-rl.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical with vertical RL writing mode</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps">
|
||||
<link rel="match" href="gap-002-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green vertical line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" title="The 'gap' property" href="https://www.w3.org/TR/css-align-3/#gaps">
|
||||
<link rel="match" href="gap-002-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>a green horizontal line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - lr rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
}
|
||||
section > div {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-003-lr.html
Normal file
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-003-lr.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - lr rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-003-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-003-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rl rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
}
|
||||
section > div {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-003-rl.html
Normal file
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-003-rl.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rl rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-003-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
}
|
||||
section > div {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL rows and columns</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-003-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical LR intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-004-lr.html
Normal file
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-004-lr.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical LR intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-004-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-004-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical RL intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-004-rl.html
Normal file
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-004-rl.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical RL intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-004-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL intrinsic horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-004-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical LR intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-005-lr.html
Normal file
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-005-lr.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical LR intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-005-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-005-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical rl intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-005-rl.html
Normal file
35
tests/wpt/web-platform-tests/css/css-flexbox/gap-005-rl.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - vertical rl intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-005-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - RTL intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - intrinsic vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-005-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap lr horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-lr.html
Normal file
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-lr.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap lr horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-006-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-006-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap rl horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rl.html
Normal file
37
tests/wpt/web-platform-tests/css/css-flexbox/gap-006-rl.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap rl horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-006-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap rtl horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap rtl horizontal</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-006-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - lr wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:nth-child(2) {
|
||||
margin-block: 20px;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
38
tests/wpt/web-platform-tests/css/css-flexbox/gap-007-lr.html
Normal file
38
tests/wpt/web-platform-tests/css/css-flexbox/gap-007-lr.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - lr wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-007-lr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:nth-child(2) {
|
||||
margin-block: 20px;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-007-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rl wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:nth-child(2) {
|
||||
margin-block: 20px;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
38
tests/wpt/web-platform-tests/css/css-flexbox/gap-007-rl.html
Normal file
38
tests/wpt/web-platform-tests/css/css-flexbox/gap-007-rl.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rl wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-007-rl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rtl wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
section > div:nth-child(2) {
|
||||
margin-block: 20px;
|
||||
}
|
||||
section > div:not(:last-of-type) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - rtl wrap vertical</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-007-rtl-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
body {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
inline-size: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div>Black Panther</div>
|
||||
<div>Wonder Woman</div>
|
||||
<div>Storm</div>
|
||||
<div>Flash</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - row and column gap</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-block-start: 40px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>40px horizontal green lines and 20px vertical green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - row and column gap</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-008-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 40px 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> 40px horizontal green lines and 20px vertical green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - mixed units</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
}
|
||||
section > div {
|
||||
width: calc(50% - .5rem);
|
||||
}
|
||||
section > div:nth-child(1),
|
||||
section > div:nth-child(3) {
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
section > div:nth-child(3),
|
||||
section > div:nth-child(4) {
|
||||
margin-block-start: 50px; /* half block size */
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - mixed units</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-008-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: 50% 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
width: calc(50% - .5rem);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong> 50% horizontal green line and 1rem vertical green line between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - calc gap</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div {
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
section > div:not(:first-child) {
|
||||
margin-inline-start: calc(10% - 1rem / 2);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>vertical green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Test: gap - calc gap</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-008-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
section {
|
||||
background-color: green;
|
||||
block-size: 100px;
|
||||
display: flex;
|
||||
gap: calc(10% - 1rem / 2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
section > div{
|
||||
background-color: grey;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>vertical green lines between boxes</strong>.</p>
|
||||
<section>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Chrome had a bug https://crbug.com/1042329 where min-height:auto was not updated after an image load when the image has a specified height and width.">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; height: 5px">
|
||||
<img style="width: 100px; height: 100px;" src="support/200x200-green.png">
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
// This test relies on the harness screenshotting after the image has loaded.
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins">
|
||||
<link rel="match" href="reference/negative-margins-001-ref.html">
|
||||
<meta name="assert" content="Tests that for intrinsic size computations,
|
||||
an item will not take up less than zero space even with negative margins.">
|
||||
an item may take up less than zero space when it has negative margins.">
|
||||
<style>
|
||||
.container {
|
||||
width: 60px;
|
||||
width: 40px;
|
||||
background-color: red;
|
||||
line-height: 0px;
|
||||
border: 3px black solid;
|
||||
|
|
@ -34,7 +34,7 @@ an item will not take up less than zero space even with negative margins.">
|
|||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
|
||||
<p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
<link rel="author" title="Google Inc." href="https://www.google.com/">
|
||||
<style>
|
||||
.container {
|
||||
width: 60px;
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
background-color: green;
|
||||
border: 3px black solid;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
|
||||
<p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p>
|
||||
|
||||
<div class="container">
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Loading…
Add table
Add a link
Reference in a new issue