mirror of
https://github.com/servo/servo.git
synced 2025-08-30 01:28:21 +01:00
Update web-platform-tests to revision 4100d1d51b885185c50902397f7d203d89efc24c
This commit is contained in:
WPT Sync Bot
parent
fd174c54ef
commit
35b828da75
91 changed files with 1843 additions and 298 deletions
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as containing block.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as parent.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-children-writing-modes-001-ref.html">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-items-background-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the background of positioned items is painted in the right position">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-items-background-rtl-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the background of positioned items is painted in the right position using RTL direction.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
|
||||
<meta name="assert" content="This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
|
||||
<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as 'auto'.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items can reference implicit grid lines.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks the different size options for absolutely positioned grid items.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned items shouldn't create implicit tracks on the grid.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow and Transforms: css-overflow-3</title>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<meta name="assert" content="blocks wholly outside padding edges should not contribute to overflow">
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 5px solid rgba(0,0,0,0.5);
|
||||
border-width: 0px 0px 50px 80px;
|
||||
overflow: auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: gray;
|
||||
}
|
||||
.target {
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
background: red;
|
||||
}
|
||||
.htb {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vrl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<!-- -->
|
||||
<div class="container htb">
|
||||
<div class="target" style="top: -1000px"></div>
|
||||
htb
|
||||
</div>
|
||||
<div class="container htb rtl">
|
||||
<div class="target" style="right: -1000px" ></div>
|
||||
htb rtl
|
||||
</div>
|
||||
<div class="container vrl">
|
||||
<div class="target" style="top: -1000px"></div>
|
||||
vrl
|
||||
</div>
|
||||
<div class="container vrl rtl">
|
||||
<div class="target" style="bottom: -1000px"></div>
|
||||
vrl rtl
|
||||
</div>
|
||||
<div class="container vlr">
|
||||
<div class="target" style="top: -1000px"></div>
|
||||
vlr
|
||||
</div>
|
||||
<div class="container vlr rtl">
|
||||
<div class="target" style="left: -1000px"></div>
|
||||
vlr rtl
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
Array.from(document.querySelectorAll(".container")).forEach( el => {
|
||||
assert_equals(el.scrollWidth, 200);
|
||||
});
|
||||
}, '#target did not trigger scroll overflow');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Non-reference case for text-underline-offset</title>
|
||||
<style>
|
||||
#main {
|
||||
margin: 2em;
|
||||
display:flex
|
||||
}
|
||||
div span {
|
||||
text-decoration: green underline;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
padding-bottom: 20px;
|
||||
border: 1px dotted transparent;
|
||||
border-bottom-color: cyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if the box on the right has a lower underline than the box on the left</p>
|
||||
<div id="main">
|
||||
<div>
|
||||
<p>left<span>XXXX</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><span id="rightbox">XXXX</span>right</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference case for text-underline-offset</title>
|
||||
<style>
|
||||
#main{
|
||||
border-bottom: 1px solid cyan;
|
||||
display: flex;
|
||||
}
|
||||
#text, #norm{
|
||||
text-decoration: green underline;
|
||||
text-underline-offset: 0px;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
top: 21px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body >
|
||||
<p class="instructions">Test passes if the lines are at the same level</p>
|
||||
<div id="main">
|
||||
<div>
|
||||
<p>left<span id="text">XXXX</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><span id="norm">XXXX</span>right</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-underline-offset test case</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line at or under the alphabetic baseline">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
|
||||
<link rel="mismatch" href="reference/text-underline-offset-001-notref.html">
|
||||
<style>
|
||||
#main {
|
||||
margin: 2em;
|
||||
display:flex
|
||||
}
|
||||
div span {
|
||||
text-decoration: green underline;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
padding-bottom: 20px;
|
||||
border: 1px dotted transparent;
|
||||
border-bottom-color: cyan;
|
||||
}
|
||||
#rightbox {
|
||||
text-underline-offset: -24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if the box on the right has a lower underline than the box on the left</p>
|
||||
<div id="main">
|
||||
<div>
|
||||
<p>left<span>XXXX</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><span id="rightbox">XXXX</span>right</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-underline-offset</title>
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
|
||||
<link rel="match" href="reference/text-underline-offset-002-ref.html">
|
||||
<style>
|
||||
#main{
|
||||
border-bottom: 1px solid cyan;
|
||||
display: flex;
|
||||
}
|
||||
#text, #norm{
|
||||
text-decoration: green underline;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#text{
|
||||
top: 10px;
|
||||
text-underline-offset: -11px;
|
||||
}
|
||||
#norm{
|
||||
top: 21px;
|
||||
text-underline-offset: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body >
|
||||
<p class="instructions">Test passes if the lines are at the same level</p>
|
||||
<div id="main">
|
||||
<div>
|
||||
<p>left<span id="text">XXXX</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><span id="norm">XXXX</span>right</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<title>getComputedStyle() round-trips in presence of scrollbars.</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<div style="width: 100px; height: 100px; overflow: scroll"></div>
|
||||
<script>
|
||||
// NOTE(emilio): This is a .tentative.html because the spec is not clear on
|
||||
// what the used value of `width` or `height` is, but I think this behavior
|
||||
// should be uncontroversial.
|
||||
test(function() {
|
||||
let e = document.querySelector("div");
|
||||
let cs = getComputedStyle(e);
|
||||
|
||||
let originalWidth = cs.width;
|
||||
let originalHeight = cs.height;
|
||||
|
||||
e.style.width = originalWidth;
|
||||
e.style.height = originalHeight;
|
||||
|
||||
assert_equals(cs.width, originalWidth, "width round-trips");
|
||||
assert_equals(cs.height, originalHeight, "height round-trips");
|
||||
}, "getComputedStyle() round-trips in presence of scrollbars")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Filter input is at element bounds</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-paint-order-ref.html">
|
||||
|
||||
<div>
|
||||
<p>Expected: A pure white box with a blue border, surrounded by green.<br>
|
||||
No green should be observed within the white box.<br>
|
||||
No dark/black should be observed within the white box either.</p>
|
||||
</div>
|
||||
|
||||
<div class="greenbox top"></div>
|
||||
<div class="greenbox right"></div>
|
||||
<div class="greenbox bottom"></div>
|
||||
<div class="filterbox">
|
||||
<div class="children" style="top:-31px;left:35px;"></div>
|
||||
<div class="children" style="top:101px;left:35px;"></div>
|
||||
<div class="children" style="top:35px;left:101px;"></div>
|
||||
<div class="children" style="top:35px;left:-31px;"></div>
|
||||
</div>
|
||||
<style>
|
||||
.filterbox {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 150px;
|
||||
left: 0px;
|
||||
border: 1px solid blue;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.greenbox {
|
||||
position:absolute;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.top {
|
||||
top:100px;
|
||||
left: 10px;
|
||||
}
|
||||
.right {
|
||||
top:130px;
|
||||
left: 102px;
|
||||
width: 58px;
|
||||
height: 150px;
|
||||
}
|
||||
.bottom {
|
||||
top:252px;
|
||||
left: 10px;
|
||||
}
|
||||
.children {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Only filter objects painted before</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
|
||||
|
||||
<p>Expected: A green box with an overlapping purple box.<br>
|
||||
The overlapping portion of the boxes should be bright magenta.<br>
|
||||
|
||||
<div class="container">
|
||||
<div class="orangebox"></div>
|
||||
<div class="bluebox blur-bd"></div>
|
||||
<div class="invert"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.container {
|
||||
width:200px;
|
||||
height:200px;
|
||||
top: 50px;
|
||||
position:absolute;
|
||||
}
|
||||
.blur-bd {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.orangebox {
|
||||
left: 10px;
|
||||
top: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bluebox {
|
||||
left: 60px;
|
||||
top: 110px;
|
||||
background: #00ff0055;
|
||||
}
|
||||
.invert {
|
||||
left: 60px;
|
||||
top: 110px;
|
||||
background: transparent;
|
||||
backdrop-filter: invert(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Correctly apply filters to backdrop-filter content</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-plus-filter-ref.html">
|
||||
|
||||
<p>Expected: A green box with an overlapping purple box.<br>
|
||||
The overlapping portion of the boxes should be bright magenta.<br>
|
||||
|
||||
<div class="container">
|
||||
<div class="orangebox"></div>
|
||||
<div class="bluebox blur blur-bd"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.container {
|
||||
width:200px;
|
||||
height:200px;
|
||||
top: 50px;
|
||||
position:absolute;
|
||||
}
|
||||
.blur {
|
||||
filter: invert(1);
|
||||
}
|
||||
.blur-bd {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.orangebox {
|
||||
left: 10px;
|
||||
top: 50px;
|
||||
background: green;
|
||||
}
|
||||
.bluebox {
|
||||
left: 60px;
|
||||
top: 110px;
|
||||
background: #00ff0055;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue