mirror of
https://github.com/servo/servo.git
synced 2025-08-16 19:05:33 +01:00
Update web-platform-tests to revision 2df7f9ff620cbdaa2928464892fb1dfb880fd6c6
This commit is contained in:
WPT Sync Bot
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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests correct handling of min-height: auto with dynamic changes</title>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
height: 300px;
|
||||
outline: 2px solid black;
|
||||
}
|
||||
|
||||
.inner
|
||||
{
|
||||
width: 400px;
|
||||
flex: 1;
|
||||
background-color: green;
|
||||
}
|
||||
#container2 .flexbox > * { flex-basis: 0; }
|
||||
#container2 .column > * { flex-basis: auto; }
|
||||
</style>
|
||||
<script>
|
||||
function change() {
|
||||
var container = document.getElementById('container');
|
||||
container.offsetHeight;
|
||||
container.style.height = '80px';
|
||||
container = document.getElementById('container2');
|
||||
container.offsetHeight;
|
||||
container.style.height = '80px';
|
||||
checkLayout('.container');
|
||||
}
|
||||
</script>
|
||||
<body onload="change()">
|
||||
<p>Green rectangle should be entirely within the black rectangle</p>
|
||||
<div id="log"></div>
|
||||
<div id="container" class="container">
|
||||
<div class="flexbox column" style="height: 100%;">
|
||||
<div class="flexbox flex-one">
|
||||
<div class="flexbox column">
|
||||
<div class="flexbox column flex-one">
|
||||
<div class="inner" data-expected-height="80">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="container2" class="container">
|
||||
<div class="flexbox column" style="height: 100%;">
|
||||
<div class="flexbox flex-one">
|
||||
<div class="flexbox column">
|
||||
<div class="flexbox column flex-one">
|
||||
<div class="inner" data-expected-height="80">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Gutters adjacent to collapsed tracks also collapse</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<meta name="assert" content="This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items." />
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
grid-gap: 100px;
|
||||
grid-template-rows: repeat(auto-fit, 200px);
|
||||
grid-template-columns: repeat(auto-fit, 200px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
background: linear-gradient(red, red) no-repeat 50px 50px / 100px 100px;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: green;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -16,17 +16,17 @@
|
|||
</div>
|
||||
<script>
|
||||
assert_not_inherited('clip', 'auto', 'rect(10px, 20px, 30px, 40px)');
|
||||
assert_not_inherited('clip-path', 'none', 'url("https://example.com/")');
|
||||
assert_not_inherited('clip-path', 'none', 'url("http://{{host}}/")');
|
||||
assert_inherited('clip-rule', 'nonzero', 'evenodd');
|
||||
assert_not_inherited('mask-border-mode', 'alpha', 'luminance');
|
||||
assert_not_inherited('mask-border-outset', '0', '10px 20px 30px 40px');
|
||||
assert_not_inherited('mask-border-repeat', 'stretch', 'round space');
|
||||
assert_not_inherited('mask-border-slice', '0', '1 2 3 4 fill');
|
||||
assert_not_inherited('mask-border-source', 'none', 'url("https://example.com/")');
|
||||
assert_not_inherited('mask-border-source', 'none', 'url("http://{{host}}/")');
|
||||
assert_not_inherited('mask-border-width', 'auto', '10px 20px 30px 40px');
|
||||
assert_not_inherited('mask-clip', 'border-box', 'no-clip');
|
||||
assert_not_inherited('mask-composite', 'add', 'exclude');
|
||||
assert_not_inherited('mask-image', 'none', 'url("https://example.com/")');
|
||||
assert_not_inherited('mask-image', 'none', 'url("http://{{host}}/")');
|
||||
assert_not_inherited('mask-mode', 'match-source', 'luminance');
|
||||
assert_not_inherited('mask-origin', 'border-box', 'padding-box');
|
||||
assert_not_inherited('mask-position', '0% 0%', '10px 20px');
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Reftest Reference
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
border: 1px solid purple;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item {
|
||||
margin: 2px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inline-box {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: lightgray;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#change-width {
|
||||
/* Using hardcoded CSS as reference for testcase's tweak: */
|
||||
width: 300px;
|
||||
}
|
||||
#change-flex {
|
||||
/* Using hardcoded CSS as reference for testcase's tweak: */
|
||||
flex: 0 0 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="item" id="change-width">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="item" id="change-flex">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Test: Testing how a sizing change to one flex item impacts its sibling
|
||||
</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm">
|
||||
<link rel="match" href="flexbox-dyn-resize-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
border: 1px solid purple;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item {
|
||||
margin: 2px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inline-box {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: lightgray;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function go() {
|
||||
// Make this item steal all the spare width (forcing its sibling to shrink)
|
||||
// by giving it a huge 'width' and therefore huge flex-basis:
|
||||
document.getElementById("change-width").style.width = "300px";
|
||||
|
||||
// Make this item steal all the spare width (forcing its sibling to shrink)
|
||||
// by giving it a pretty big flex-basis and no shrinkability:
|
||||
document.getElementById("change-flex").style.flex = "0 0 75px"
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="go()">
|
||||
<div class="container">
|
||||
<div class="item" id="change-width">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="item" id="change-flex">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="inline-box"></div><div class="inline-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -108,6 +108,9 @@
|
|||
== flexbox-column-row-gap-003.html flexbox-column-row-gap-003-ref.html
|
||||
== flexbox-column-row-gap-004.html flexbox-column-row-gap-004-ref.html
|
||||
|
||||
# Tests with dynamic changes that impact sizing:
|
||||
== flexbox-dyn-resize-001.html flexbox-dyn-resize-001-ref.html
|
||||
|
||||
# Tests for "flex-basis: content"
|
||||
== flexbox-flex-basis-content-001a.html flexbox-flex-basis-content-001-ref.html
|
||||
== flexbox-flex-basis-content-001b.html flexbox-flex-basis-content-001-ref.html
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue