mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation (with no items).
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
background: red;
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
border: 3px solid green;
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
width: 9px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex" style="height: 134px;"></div>
|
||||
<div class="flex" style="height: 234px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation with break-inside: avoid.
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
background: red;
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
break-inside: avoid;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
}
|
||||
.abs {
|
||||
background: green;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex" style="height: 250px;"></div>
|
||||
<div class="flex" style="height: 100px;"></div>
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation with break-before: avoid.
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
background: red;
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
}
|
||||
.abs {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex" style="height: 50px;"></div>
|
||||
<div class="flex" style="height: 50px;"></div>
|
||||
<div class="flex" style="height: 300px; break-before: avoid;"></div>
|
||||
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
|
||||
<div class="abs" style="background: white; top: 0px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation with break-after: avoid.
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
background: red;
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
}
|
||||
.abs {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex" style="height: 50px;"></div>
|
||||
<div class="flex" style="height: 50px; break-after: avoid;"></div>
|
||||
<div class="flex" style="height: 300px;"></div>
|
||||
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
|
||||
<div class="abs" style="background: white; top: 0px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation with break-before: column.
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
background: red;
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
display: flex;
|
||||
width: 25px;
|
||||
}
|
||||
.abs {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex" style="height: 50px;"></div>
|
||||
<div class="flex" style="height: 50px; break-before: column;"></div>
|
||||
<div class="flex" style="height: 300px;"></div>
|
||||
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
|
||||
<div class="abs" style="background: white; top: 0px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Flex container fragmentation with tall margin.
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
.multicol {
|
||||
column-count: 4;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
margin-left: -25px;
|
||||
width: 100px;
|
||||
}
|
||||
.flex {
|
||||
background: green;
|
||||
display: flex;
|
||||
height: 400px;
|
||||
margin-top: 200px;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div class="multicol">
|
||||
<div class="flex"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference Case</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.multicol {
|
||||
width: 300px;
|
||||
columns: 100px auto;
|
||||
max-height: 160px;
|
||||
border: 3px solid pink;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.weird-flex-item {
|
||||
border: 4px solid teal;
|
||||
outline: 4px solid blue;
|
||||
}
|
||||
.tallFloat {
|
||||
float: left;
|
||||
border: 3px solid black;
|
||||
height: 500px;
|
||||
width: 100px;
|
||||
background: yellow;
|
||||
}
|
||||
.float {
|
||||
/* In this reference case, this is not actually a float. */
|
||||
background: cyan;
|
||||
width: 100px;
|
||||
}
|
||||
.inside-float {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="multicol">
|
||||
<div class="container">
|
||||
<div class="weird-flex-item">
|
||||
<div class="tallFloat"></div>
|
||||
<br>
|
||||
<div class="float">
|
||||
<div class="inside-float">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Floats in fragmented flex container shouldn't improperly inflate overflow areas</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695509">
|
||||
<link rel="match" href="flex-fragmented-with-float-descendant-001-ref.html">
|
||||
<!-- This is a regression test for a Firefox bug where Firefox was improperly
|
||||
contributing a float's stale position (at an intermediate point in
|
||||
layout where it's pushed off the bottom of one column) to the overflow
|
||||
areas. This test checks for this by using "outline" to visualize the
|
||||
overflow areas, to ensure they're not unexpectedly large. -->
|
||||
<style>
|
||||
.multicol {
|
||||
width: 300px;
|
||||
columns: 100px auto;
|
||||
max-height: 160px;
|
||||
border: 3px solid pink;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.weird-flex-item {
|
||||
border: 4px solid teal;
|
||||
outline: 4px solid blue;
|
||||
}
|
||||
.tallFloat {
|
||||
float: left;
|
||||
border: 3px solid black;
|
||||
height: 500px;
|
||||
width: 100px;
|
||||
background: yellow;
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
background: cyan;
|
||||
width: 100px;
|
||||
}
|
||||
.inside-float {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: purple;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="multicol">
|
||||
<div class="container">
|
||||
<div class="weird-flex-item">
|
||||
<div class="tallFloat"></div>
|
||||
<br>
|
||||
<div class="float">
|
||||
<div class="inside-float">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: flexbox fragmentation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708007">
|
||||
<style>
|
||||
* {
|
||||
display: inline-flex;
|
||||
border-left-style: ridge;
|
||||
border-top: green ridge 3289332275.907055mm;
|
||||
box-sizing: border-box;
|
||||
white-space: pre;
|
||||
max-block-size: 2307181333.664816mm;
|
||||
float: inline-end;
|
||||
columns: 2800509010 1630715400.2851658ex;
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load', () => {
|
||||
const details = document.createElement('details')
|
||||
details.setAttribute('open', true)
|
||||
const span = document.createElement('span')
|
||||
const small = document.createElement('small')
|
||||
small.innerText = '𧄚۹㏬1q/\n\rI퐆҆徢۹𠹅𝅧۹٠𖩡zc\r\naB-=^<>辴x?>>>=𝅯🨸-銒㿎٩𢂷+=\bᣰ&\b\r0A۹'
|
||||
span.appendChild(small)
|
||||
details.appendChild(span)
|
||||
document.documentElement.appendChild(details)
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue