mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 8d1253647cfe3809ddf58a4ad7c9da5f26985d7e
This commit is contained in:
WPT Sync Bot
parent
553ff20468
commit
48c420fdb5
440 changed files with 6186 additions and 3542 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Benjamin Beaudry" href="mailto:bebeaudr@microsoft.com">
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#break-decoration">
|
||||
<link rel="match" href="out-of-flow-in-multicolum-001-ref.html">
|
||||
<link rel="match" href="out-of-flow-in-multicolumn-001-ref.html">
|
||||
|
||||
<p>The abs element should be split equally into the two columns - no red!</p>
|
||||
<style>
|
||||
|
|
@ -36,4 +36,4 @@
|
|||
<div class="abs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#break-decoration">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Tests that empty column fragments are added if an OOF element begins layout
|
||||
in a fragmentainer that is more than one index beyond the last existing
|
||||
column fragmentainer. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
/* Move the multicolumn left to account for the first three empty columns */
|
||||
position: relative;
|
||||
left: -150px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Simulate two multi-column containers with an out-of-flow positioned child that
|
||||
fragments, even in the presence of break-inside: avoid and break-before: column. -->
|
||||
<style>
|
||||
.initial {
|
||||
float: left;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: blue;
|
||||
}
|
||||
.first-fragment {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background: green;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.second-fragment {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
background: green;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
<div class="initial"></div>
|
||||
<div class="second-fragment"></div>
|
||||
<div class="first-fragment"></div>
|
||||
<div class="initial"></div>
|
||||
<div class="second-fragment"></div>
|
||||
<div class="first-fragment"></div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#breaking-controls">
|
||||
<link rel="match" href="out-of-flow-in-multicolumn-004-ref.html">
|
||||
<!-- break-inside: avoid and break-before: column do not apply to absolute positioned elements. -->
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: green;
|
||||
}
|
||||
.content {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
.inside {
|
||||
break-inside: avoid;
|
||||
}
|
||||
.before {
|
||||
break-before: column;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="content"></div>
|
||||
<div class="rel">
|
||||
<div class="abs inside"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="multicol">
|
||||
<div class="content"></div>
|
||||
<div class="rel">
|
||||
<div class="abs before"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#breaking-controls">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- break-after: column does not apply to absolute positioned elements. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 10px;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
break-after: column;
|
||||
}
|
||||
.content {
|
||||
width: 100px;
|
||||
height: 45px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="content"></div>
|
||||
<div class="rel">
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Tests that the fragments of a positioned element are added to the right fragmentainer despite the presence of column spanners. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 140px;
|
||||
width: 100px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div class="spanner"></div>
|
||||
<div style="height: 60px; "></div>
|
||||
<div class="spanner"></div>
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Tests that a positioned element without a top or bottom property uses the static position -
|
||||
even though it's treated as an OOF element. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
/* Move the multicolumn left to account for the first empty column */
|
||||
position: relative;
|
||||
left: -50px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div style="height: 100px; width: 50px;"></div>
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Tests fragmented abspos elements with a spanner nested inside. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div class="abs">
|
||||
<div class="spanner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Tests that empty column fragments are added if an OOF element begins layout in a fragmentainer that is more than one index beyond the last existing column fragmentainer in the presence of a spanner. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
width: 50px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
<div style="column-span: all;"></div>
|
||||
<div style="column-span: all;"></div>
|
||||
<div style="column-span: all;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Fragmented OOF element with block-size percentage resolution. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
column-count: 3;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
/* last child is a spanner that takes up 33.33% so available height for
|
||||
.rel and .abs is 100px */
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
/* offset one full 100px column (accounted for by negative margin on #multicol */
|
||||
top: 100px;
|
||||
width: 50px;
|
||||
height: 66.667%;
|
||||
background: green;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
height: 33.33%;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div class="rel">
|
||||
<div class="abs"></div>
|
||||
<div style="width: 10px; height: 300px;"></div>
|
||||
</div>
|
||||
<div class="spanner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<!-- Fragmented OOF element with block-size percentage resolution and overflow. -->
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<style>
|
||||
#multicol {
|
||||
/* Set things up so that the absolutely positioned element takes up two
|
||||
columns of 50px each. Start in the second column so offset by negative
|
||||
50px margin. */
|
||||
columns: 5;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
margin-left: -50px;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="multicol">
|
||||
<div style="height: 100px;"></div>
|
||||
<div class="rel">
|
||||
<div class="abs"></div>
|
||||
<div style="width: 44px; height: 200px;">
|
||||
<div style="width: 33px; height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue