mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision b'0339b7e9ebef65f3288f07167a17c123a782c66f'
This commit is contained in:
WPT Sync Bot
parent
550d80ad4f
commit
6c98c32c8a
92 changed files with 1650 additions and 2114 deletions
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50px 230px;
|
||||
}
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.td {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position:absolute;
|
||||
border: 4px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div style="position: relative;border: 10px solid yellow; width:290px; height: 290px">
|
||||
<!-- row 1 -->
|
||||
<div class="td bg" style="top:20px;left:20px;height:230px"></div>
|
||||
<div class="td bg" style="top:20px;left:80px;"></div>
|
||||
<div class="td" style="top:20px; left: 140px;"></div>
|
||||
<div class="td" style="top:20px; left: 200px;"></div>
|
||||
<!-- row 2
|
||||
additional -4 offsets on background-position are for borders.
|
||||
columns do not have borders.
|
||||
-->
|
||||
<div class="td bg" style="top:80px;left:80px;width:110px;height:110px;background-position-y:-64px;background-position-x:-4px"></div>
|
||||
<div class="td" style="top:80px; left: 200px;"></div>
|
||||
<!-- row 3 -->
|
||||
<div class="td" style="top:140px; left: 200px;"></div>
|
||||
<!-- row 4 -->
|
||||
<div class="td bg" style="top:200px;left:80px;background-position-y:-180px"></div>
|
||||
<div class="td" style="top:200px; left: 140px;"></div>
|
||||
<div class="td" style="top:200px; left: 200px;"></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Table column background image geometry</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" />
|
||||
<link rel="match" href="background-image-column-ref.html" />
|
||||
<meta name="assert" content="Column backgrounds get painted into cells with correct geometry.">
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 220px, blue 220px);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main table {
|
||||
border-spacing: 10px;
|
||||
border: 10px solid yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
main td {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
border: 4px solid black;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<main>
|
||||
<table>
|
||||
<col class="bg">
|
||||
<col class="bg">
|
||||
<tr>
|
||||
<td rowspan=4></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan=2 colspan=2></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
--border: transparent;
|
||||
margin:0;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%);
|
||||
background-size: 200px 50px;
|
||||
background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */
|
||||
}
|
||||
main > * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table {
|
||||
width: 200px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
margin-left:5px;
|
||||
}
|
||||
.row {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
.cell {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.bigsquarecell {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-position-x: -50px;
|
||||
}
|
||||
.c2 {
|
||||
background-position-x: -50px
|
||||
}
|
||||
.c3 {
|
||||
background-position-x: -100px;
|
||||
}
|
||||
.c4 {
|
||||
background-position-x: -150px;
|
||||
}
|
||||
.bottomrow > .cell {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div class="table">
|
||||
<div class="row bg"></div>
|
||||
<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div>
|
||||
<div class="row bg"></div>
|
||||
<div style="position:absolute;top:-5px;left:-5px;bottom:-5px;right:-5px;border: 10px solid var(--border)"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Collapsed table row background image geometry</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" />
|
||||
<link rel="match" href="background-image-row-collapsed-ref.html" />
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
--border: transparent;
|
||||
margin:0;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main table {
|
||||
border: 10px solid var(--border);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
main td {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<main>
|
||||
<table>
|
||||
<tr class="bg">
|
||||
<td colspan=4></td>
|
||||
</tr>
|
||||
<tr class="bg">
|
||||
<td></td>
|
||||
<td rowspan=2 colspan=2></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="bg">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%);
|
||||
background-size: 230px 50px;
|
||||
background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */
|
||||
}
|
||||
main > * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table {
|
||||
border: 10px solid yellow;
|
||||
padding: 10px;
|
||||
width: 290px;
|
||||
}
|
||||
.row {
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 230px;
|
||||
height: 50px;
|
||||
}
|
||||
.cell {
|
||||
margin: 10px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.firstcell {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.bigsquarecell {
|
||||
margin:10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-position-x: -60px;
|
||||
}
|
||||
.c2 {
|
||||
background-position-x: -60px
|
||||
}
|
||||
.c3 {
|
||||
background-position-x: -120px;
|
||||
}
|
||||
.c4 {
|
||||
background-position-x: -180px;
|
||||
}
|
||||
.bottomrow > .cell {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div class="table">
|
||||
<div class="row bg"></div>
|
||||
<div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div>
|
||||
<div class="bottomrow"><div class="cell firstcell bg"></div><div class="cell c2 bg"></div><div class="cell c3 bg"></div><div class="cell c4 bg"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Table row background image geometry</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" />
|
||||
<link rel="match" href="background-image-row-ref.html" />
|
||||
<meta name="assert" content="Row backgrounds get painted into cells with correct geometry.">
|
||||
<style>
|
||||
body {
|
||||
--peek: LightGreen;
|
||||
}
|
||||
.bg {
|
||||
background-color: var(--peek);
|
||||
background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%);
|
||||
background-size: 230px 50px;
|
||||
background-repeat: no-repeat;
|
||||
/* FF sometimes defaults to no-repeat for background images */
|
||||
}
|
||||
main > * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main table {
|
||||
border-spacing: 10px;
|
||||
border: 10px solid yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
main td {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<main>
|
||||
<table>
|
||||
<tr class="bg">
|
||||
<td colspan=4></td>
|
||||
</tr>
|
||||
<tr class="bg">
|
||||
<td></td>
|
||||
<td rowspan=2 colspan=2></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="bg">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body {
|
||||
--bluetrans: rgba(0,0,255,0.5);
|
||||
--yellowtrans: rgba(255,255, 0, 0.5);
|
||||
--orangetrans: rgba(255,165,0,0.5);
|
||||
--greentrans: rgba(0,255,0, 0.5);
|
||||
}
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#container > * {
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
<div id="container" style="position:relative;width:200px;height:200px">
|
||||
<!-- blues -->
|
||||
<div style="width:56px;height:150px;background:var(--bluetrans);border: 6px solid blue;border-bottom:none;"></div>
|
||||
<div style="width:56px;height:56px;top:150px;background:var(--bluetrans);border-left: 6px solid blue;border-bottom:6px solid blue;"></div>
|
||||
<!-- green -->
|
||||
<div style="width:94px;height:55px;top:51px;left:56px;background:var(--greentrans);border-top:4px solid green;"></div>
|
||||
<div style="width:99px;height:44px;top:106px;left:56px;
|
||||
background:var(--greentrans);border-right:4px solid green;"></div>
|
||||
<!-- yellow -->
|
||||
<div style="width:56px;height:56px;top:50px;left:150px;background:var(--yellowtrans);border:6px solid yellow"></div>
|
||||
<!-- orange -->
|
||||
<div style="width:156px;height:56px;top:150px;left:50px;background:var(--orangetrans);border: 6px solid orange"></div>
|
||||
<!-- transparent -->
|
||||
<div style="width:48px;height:49px;top:2px;left:56px;border-top: 2px solid black;border-right:2px solid black"></div>
|
||||
<div style="width:50px;height:48px;top:2px;left:104px;border-top: 2px solid black;border-right:2px solid black"></div>
|
||||
<div style="width:50px;height:48px;top:2px;left:154px;border-top: 2px solid black;border-right:2px solid black"></div>
|
||||
<div style="width:50px;height:44px;top:106px;left:154px;border-right:2px solid black"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Collapsed borders of large cells</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" />
|
||||
<link rel="match" href="collapsed-border-large-cell-ref.html" />
|
||||
<meta name="assert" content="Collapsed borders of large cells can collapse a single edge.">
|
||||
<style>
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
main td {
|
||||
padding:0px;
|
||||
width: 50px;
|
||||
height:50px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<table>
|
||||
<colgroup style="border:6px solid blue;background:rgba(0,0,255,0.5);"></colgroup>
|
||||
<tr>
|
||||
<td rowspan=4></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan=2 colspan=2 style="border:4px solid green; background: rgba(0,255,0, 0.5);"></td>
|
||||
<td style="border: 6px solid yellow;background:rgba(255,255, 0, 0.5)"></td>
|
||||
</tr>
|
||||
<td></td>
|
||||
<tr>
|
||||
<td colspan=3 style="border:6px solid orange;background:rgba(255,165,0,0.5)"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main .table {
|
||||
overflow: hidden;
|
||||
border: 20px solid green;
|
||||
width:90px;
|
||||
}
|
||||
main .caption {
|
||||
height: 30px;
|
||||
background: lightblue;
|
||||
width:90px;
|
||||
text-align: center;
|
||||
}
|
||||
main .cell {
|
||||
padding:0px;
|
||||
width: 50px;
|
||||
height:50px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div class="table">
|
||||
<div class="cell">
|
||||
<div style="width:50px;height:50px">
|
||||
<div style="width:500px;height:500px;background:pink"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption" style="caption-side:bottom">caption</caption>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Overflow hidden and captions</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#global-style-overrides" />
|
||||
<link rel="match" href="overflow-hidden-table-ref.html" />
|
||||
<meta name="assert" content="Overflow hidden clips table grid, but not captions.">
|
||||
<style>
|
||||
main * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main table {
|
||||
overflow: hidden;
|
||||
border: 20px solid green;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
main caption {
|
||||
height: 30px;
|
||||
background: lightblue;
|
||||
}
|
||||
main td {
|
||||
padding:0px;
|
||||
width: 50px;
|
||||
height:50px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="width:50px;height:50px">
|
||||
<div style="width:500px;height:500px;background:pink"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<caption style="caption-side:bottom">caption</caption>
|
||||
</table>
|
||||
</main>
|
||||
Loading…
Add table
Add a link
Reference in a new issue