Update web-platform-tests to revision 2df7f9ff620cbdaa2928464892fb1dfb880fd6c6

This commit is contained in:
WPT Sync Bot 2018-09-28 21:31:46 -04:00
parent 97e3c5f3a9
commit 7ba3376dde
74 changed files with 1985 additions and 504 deletions

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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>

View file

@ -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

View file

@ -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

View file

@ -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