mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision 2df7f9ff620cbdaa2928464892fb1dfb880fd6c6
This commit is contained in:
parent
97e3c5f3a9
commit
7ba3376dde
74 changed files with 1985 additions and 504 deletions
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment on button</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-layout-button-001-ref.html">
|
||||
<meta name=assert content="Layout containment does apply to buttons, thus their baseline is the same than if they don't have contents.">
|
||||
<style>
|
||||
button {
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
contain: layout;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<button>b</button>after
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment on flexbox container</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-layout-flexbox-001-ref.html">
|
||||
<meta name=assert content="Layout containment does apply to flexbox containers, thus their baseline is the same than if they don't have contents.">
|
||||
<style>
|
||||
div {
|
||||
display: inline-flex;
|
||||
border: 5px solid green;
|
||||
contain: layout;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<div>f</div>after
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment on grid container</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-layout-grid-001-ref.html">
|
||||
<meta name=assert content="Layout containment does apply to grid containers, thus their baseline is the same than if they don't have contents.">
|
||||
<style>
|
||||
div {
|
||||
display: inline-grid;
|
||||
border: 5px solid green;
|
||||
contain: layout;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<div>g</div>after
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: paint' and clipping prevents scrollbars</title>
|
||||
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
|
||||
<link rel="match" href="reference/contain-paint-clip-019-ref.html">
|
||||
|
||||
<meta content="This test checks that the paint containment of an element clips contents.
|
||||
It should also prevent layout overflow from being propagated to ancestors." name="assert">
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
#container {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#green {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#red {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 10000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>
|
||||
|
||||
<div id="container">
|
||||
<div id="green"></div>
|
||||
<div id="red"></div>
|
||||
</div>
|
|
@ -4,15 +4,16 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-button-001-ref.html">
|
||||
<meta name=assert content="Size containment does apply to buttons, thus their size and baseline is the same than if they don't have contents.">
|
||||
<meta name=assert content="Size containment does apply to buttons, thus their size is the same than if they don't have contents.">
|
||||
<style>
|
||||
button {
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
contain: size;
|
||||
color: transparent;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<button>flex</button>after
|
||||
|
|
|
@ -4,15 +4,16 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-flexbox-001-ref.html">
|
||||
<meta name=assert content="Size containment does apply to flexbox containers, thus their size and baseline is the same than if they don't have contents.">
|
||||
<meta name=assert content="Size containment does apply to flexbox containers, thus their size is the same than if they don't have contents.">
|
||||
<style>
|
||||
div {
|
||||
display: inline-flex;
|
||||
border: 5px solid green;
|
||||
contain: size;
|
||||
color: transparent;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<div>flex</div>after
|
||||
|
|
|
@ -4,15 +4,16 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-grid-001-ref.html">
|
||||
<meta name=assert content="Size containment does apply to grid containers, thus their size and baseline is the same than if they don't have contents.">
|
||||
<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents.">
|
||||
<style>
|
||||
div {
|
||||
display: inline-grid;
|
||||
border: 5px solid green;
|
||||
contain: size;
|
||||
color: transparent;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<div>grid</div>after
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
button {
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0px;
|
||||
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<button></button>after
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div {
|
||||
display: inline-flex;
|
||||
border: 5px solid green;
|
||||
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<div></div>after
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
div {
|
||||
display: inline-grid;
|
||||
border: 5px solid green;
|
||||
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
|
||||
before<div></div>after
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
#green {
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>
|
||||
|
||||
<div id="green"></div>
|
|
@ -6,8 +6,12 @@
|
|||
button {
|
||||
border: 5px solid green;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
before<button></button>after
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<button>b</button>after
|
||||
|
|
|
@ -6,8 +6,12 @@
|
|||
div {
|
||||
display: inline-flex;
|
||||
border: 5px solid green;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
before<div></div>after
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<div>f</div>after
|
||||
|
|
|
@ -6,8 +6,12 @@
|
|||
div {
|
||||
display: inline-grid;
|
||||
border: 5px solid green;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p>
|
||||
before<div></div>after
|
||||
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
|
||||
before<div>g</div>after
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue