mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision d7afcb8708eac08a614d161d5622a48172daf7e3
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
6f8bb4dd40
commit
edff458e23
791 changed files with 17647 additions and 10322 deletions
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Size containment on grid containers</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-size">
|
||||
<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
contain: size;
|
||||
position: relative;
|
||||
font: 10px/1 Ahem;
|
||||
}
|
||||
.wrapper {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;"
|
||||
data-expected-width="200" data-expected-height="100">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; overflow: scroll;"
|
||||
data-expected-width="115" data-expected-height="65">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;"
|
||||
data-expected-width="200" data-expected-height="100">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;"
|
||||
data-expected-width="115" data-expected-height="65">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;"
|
||||
data-expected-width="120" data-expected-height="60">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;"
|
||||
data-expected-width="132" data-expected-height="66">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 60% / 50%;"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: auto / auto;"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 1fr / 2fr;"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);"
|
||||
data-expected-width="100" data-expected-height="60">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;"
|
||||
data-expected-width="50" data-expected-height="60">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);"
|
||||
data-expected-width="100" data-expected-height="60">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);"
|
||||
data-expected-width="100" data-expected-height="90">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;"
|
||||
data-expected-width="100" data-expected-height="40">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;"
|
||||
data-expected-width="120" data-expected-height="60">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;"
|
||||
data-expected-width="140" data-expected-height="40">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;"
|
||||
data-expected-width="60" data-expected-height="30">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;"
|
||||
data-expected-width="160" data-expected-height="80">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;"
|
||||
data-expected-width="160" data-expected-height="80">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;"
|
||||
data-expected-width="170" data-expected-height="85">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;"
|
||||
data-expected-width="110" data-expected-height="55">
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
|
||||
data-expected-width="100" data-expected-height="75">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
|
||||
data-expected-width="100" data-expected-height="75">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: auto 50px / 100px auto;"
|
||||
data-expected-width="100" data-expected-height="50">
|
||||
<div data-expected-width="100" data-expected-height="10"
|
||||
data-offset-x="0" data-offset-y="0">X</div>
|
||||
<div data-expected-width="40" data-expected-height="10"
|
||||
data-offset-x="100" data-offset-y="0">XX</div>
|
||||
<div data-expected-width="100" data-expected-height="50"
|
||||
data-offset-x="0" data-offset-y="10">XXX</div>
|
||||
<div data-expected-width="40" data-expected-height="50"
|
||||
data-offset-x="100" data-offset-y="10">XXXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
video, audio, canvas, svg, img, embed, object, iframe {
|
||||
border: 3px solid teal;
|
||||
max-height: 0px;
|
||||
max-width: 0px;
|
||||
margin: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- video element: -->
|
||||
<video></video>
|
||||
<video controls></video>
|
||||
<video poster="support/blue-100x100.png"></video>
|
||||
<video poster="support/blue-100x100.png" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<br>
|
||||
|
||||
<!-- audio element with controls, and a few other misc replaced elements: -->
|
||||
<audio controls></audio>
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
<br>
|
||||
|
||||
<!-- image elements: -->
|
||||
<img src="broken">
|
||||
<img src="support/blue-100x100.png">
|
||||
<picture><source srcset="support/blue-100x100.png"><img></picture>
|
||||
<br>
|
||||
|
||||
<!-- document-embedding elements (with & without a target resource that
|
||||
could provide an intrinsic ratio in some cases, in the absence of
|
||||
contain:size): -->
|
||||
<embed>
|
||||
<embed src="support/blue-100x100.png">
|
||||
<object></object>
|
||||
<object data="support/blue-100x100.png"></object>
|
||||
<iframe></iframe>
|
||||
<iframe src="support/blue-100x100.png"></iframe>
|
||||
<br>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: intrinsic size of size-contained replaced elems</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-replaced-003-ref.html">
|
||||
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
|
||||
<style>
|
||||
video, audio, canvas, svg, img, embed, object, iframe {
|
||||
border: 3px solid teal;
|
||||
contain: size;
|
||||
margin: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- video element: -->
|
||||
<video></video>
|
||||
<video controls></video>
|
||||
<video poster="support/blue-100x100.png"></video>
|
||||
<video poster="support/blue-100x100.png" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<br>
|
||||
|
||||
<!-- audio element with controls, and a few other misc replaced elements: -->
|
||||
<audio controls></audio>
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
<br>
|
||||
|
||||
<!-- Image elements: -->
|
||||
<img src="broken">
|
||||
<img src="support/blue-100x100.png">
|
||||
<picture><source srcset="support/blue-100x100.png"><img></picture>
|
||||
<br>
|
||||
|
||||
<!-- Document-embedding elements (with & without a target resource that
|
||||
could provide an intrinsic ratio in some cases, in the absence of
|
||||
contain:size): -->
|
||||
<embed>
|
||||
<embed src="support/blue-100x100.png">
|
||||
<object></object>
|
||||
<object data="support/blue-100x100.png"></object>
|
||||
<iframe></iframe>
|
||||
<iframe src="support/blue-100x100.png"></iframe>
|
||||
<br>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content width</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-replaced-003-ref.html">
|
||||
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
|
||||
<style>
|
||||
video, audio, canvas, svg, img, embed, object, iframe {
|
||||
border: 3px solid teal;
|
||||
contain: size;
|
||||
margin: 15px;
|
||||
width: max-content; /* This means 0, given 'contain:size'. */
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- video element: -->
|
||||
<video></video>
|
||||
<video controls></video>
|
||||
<video poster="support/blue-100x100.png"></video>
|
||||
<video poster="support/blue-100x100.png" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<br>
|
||||
|
||||
<!-- audio element with controls, and a few other misc replaced elements: -->
|
||||
<audio controls></audio>
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
<br>
|
||||
|
||||
<!-- Image elements: -->
|
||||
<img src="broken">
|
||||
<img src="support/blue-100x100.png">
|
||||
<picture><source srcset="support/blue-100x100.png"><img></picture>
|
||||
<br>
|
||||
|
||||
<!-- Document-embedding elements (with & without a target resource that
|
||||
could provide an intrinsic ratio in some cases, in the absence of
|
||||
contain:size): -->
|
||||
<embed>
|
||||
<embed src="support/blue-100x100.png">
|
||||
<object></object>
|
||||
<object data="support/blue-100x100.png"></object>
|
||||
<iframe></iframe>
|
||||
<iframe src="support/blue-100x100.png"></iframe>
|
||||
<br>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content height</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-replaced-003-ref.html">
|
||||
<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">
|
||||
<style>
|
||||
video, audio, canvas, svg, img, embed, object, iframe {
|
||||
border: 3px solid teal;
|
||||
contain: size;
|
||||
margin: 15px;
|
||||
height: max-content; /* This means 0, given 'contain:size'. */
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<!-- video element: -->
|
||||
<video></video>
|
||||
<video controls></video>
|
||||
<video poster="support/blue-100x100.png"></video>
|
||||
<video poster="support/blue-100x100.png" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<video src="support/white.webm" controls></video>
|
||||
<br>
|
||||
|
||||
<!-- audio element with controls, and a few other misc replaced elements: -->
|
||||
<audio controls></audio>
|
||||
<canvas></canvas>
|
||||
<svg></svg>
|
||||
<br>
|
||||
|
||||
<!-- Image elements: -->
|
||||
<img src="broken">
|
||||
<img src="support/blue-100x100.png">
|
||||
<picture><source srcset="support/blue-100x100.png"><img></picture>
|
||||
<br>
|
||||
|
||||
<!-- Document-embedding elements (with & without a target resource that
|
||||
could provide an intrinsic ratio in some cases, in the absence of
|
||||
contain:size): -->
|
||||
<embed>
|
||||
<embed src="support/blue-100x100.png">
|
||||
<object></object>
|
||||
<object data="support/blue-100x100.png"></object>
|
||||
<iframe></iframe>
|
||||
<iframe src="support/blue-100x100.png"></iframe>
|
||||
<br>
|
||||
</body>
|
||||
BIN
tests/wpt/web-platform-tests/css/css-contain/support/white.webm
Normal file
BIN
tests/wpt/web-platform-tests/css/css-contain/support/white.webm
Normal file
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue