mirror of
https://github.com/servo/servo.git
synced 2025-08-13 09:25:32 +01:00
Update web-platform-tests to revision ac12b3e9488edb436f063b11213e954ae62d5a5e
This commit is contained in:
WPT Sync Bot
parent
65370f17c9
commit
b56a3b8e69
111 changed files with 3122 additions and 68 deletions
|
|
@ -3,12 +3,14 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
|
||||
<style>
|
||||
body { margin: 0px;}
|
||||
.rel { position:relative; }
|
||||
.inline-block { display:inline-block; width:100px; height:1px; }
|
||||
.inline-block.large { width:200px; }
|
||||
#target { position:absolute; width:100%; height:100px; background:green; }
|
||||
#target-fixed { position:fixed; width:100%; height:100px; background:yellow; }
|
||||
</style>
|
||||
<p>There should be a green square below.</p>
|
||||
<p>There should be a green square, and a yellow rectangle below.</p>
|
||||
<div style="height:200px;">
|
||||
<span class="rel" id="notContainingBlockOfTarget">
|
||||
<div class="large inline-block"></div>
|
||||
|
|
@ -17,6 +19,7 @@
|
|||
<div class="inline-block"></div>
|
||||
<span>
|
||||
<div>
|
||||
<div id="target-fixed"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -28,6 +31,11 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
assert_equals(document.getElementById("target").offsetWidth, 100);
|
||||
}, "Make sure that we're sized by the right ancestor");
|
||||
assert_equals(document.getElementById("target").offsetWidth,
|
||||
document.querySelector("#containingBlockOfTarget").offsetWidth);
|
||||
}, "position:absolute should be sized by the right ancestor");
|
||||
test(()=> {
|
||||
assert_equals(document.getElementById("target-fixed").offsetWidth,
|
||||
document.body.offsetWidth);
|
||||
}, "position:fixed should be sized by the right ancestor");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,15 @@ idl_test(
|
|||
idl_array => {
|
||||
idl_array.add_objects({
|
||||
Document: ['document'],
|
||||
FontFace: ['new FontFace("family", "src")'],
|
||||
FontFaceSetLoadEvent: ['new FontFaceSetLoadEvent("type")'],
|
||||
FontFace: ['fontFace'],
|
||||
FontFaceSetLoadEvent: ['fontFaceSetLoadEvent'],
|
||||
FontFaceSet: ['document.fonts'],
|
||||
});
|
||||
self.fontFace = new FontFace("family", "src");
|
||||
// The `fontFace.loaded` promise will be rejected, so handle that to
|
||||
// avoid an unhandled promise rejection manifesting as a harness error.
|
||||
self.fontFace.loaded.catch(() => {});
|
||||
self.fontFaceSetLoadEvent = new FontFaceSetLoadEvent("type");
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 20px;
|
||||
padding: 2px 4px 6px 1px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div class="absolute" style="margin-top:2px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-bottom: 14px">
|
||||
<div class="absolute" style="margin-top:10px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
|
||||
<link rel="match" href="descendant-static-position-001-ref.html">
|
||||
<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 20px;
|
||||
padding: 2px 4px 6px 1px;
|
||||
}
|
||||
.grid > div {
|
||||
background: red;
|
||||
background-clip: content-box;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background: red;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="border-left:2px solid black; padding-left:1px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-top:10px">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 20px;
|
||||
padding: 2px 4px 6px 1px;
|
||||
direction: rtl;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div class="absolute" style="margin-top:2px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-bottom: 14px">
|
||||
<div class="absolute" style="margin-top:10px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
|
||||
<div class="absolute" style="margin-top:2px;">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
|
||||
<link rel="match" href="descendant-static-position-002-ref.html">
|
||||
<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 20px;
|
||||
padding: 2px 4px 6px 1px;
|
||||
direction: rtl;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.grid > div {
|
||||
background: red;
|
||||
background-clip: content-box;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background: red;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="border-left:2px solid black; padding-left:1px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-top:10px">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 100px;
|
||||
justify-content: end;
|
||||
padding: 2px 4px 6px 1px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div class="absolute" style="margin-top:2px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-bottom: 14px">
|
||||
<div class="absolute" style="margin-top:10px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
|
||||
<link rel="match" href="descendant-static-position-003-ref.html">
|
||||
<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 100px;
|
||||
justify-content: end;
|
||||
padding: 2px 4px 6px 1px;
|
||||
}
|
||||
.grid > div {
|
||||
background: red;
|
||||
background-clip: content-box;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background: red;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="border-left:2px solid black; padding-left:1px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-top:10px">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 100px;
|
||||
justify-content: center;
|
||||
padding: 2px 4px 6px 1px;
|
||||
direction: rtl;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div class="absolute" style="margin-top:2px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-bottom: 14px">
|
||||
<div class="absolute" style="margin-top:10px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
|
||||
<div class="absolute" style="margin-top:2px; margin-left:3px">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
|
||||
<div class="absolute" style="margin-top:2px;">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
|
||||
<link rel="match" href="descendant-static-position-004-ref.html">
|
||||
<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 40px / 40px;
|
||||
border: 2px solid;
|
||||
border-top-width: 5px;
|
||||
border-left-width: 3px;
|
||||
width: 100px;
|
||||
justify-content: center;
|
||||
padding: 2px 4px 6px 1px;
|
||||
direction: rtl;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.grid > div {
|
||||
background: red;
|
||||
background-clip: content-box;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background: red;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.content {
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
.content:nth-child(2) {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style></head>
|
||||
<body>
|
||||
There should be no red:
|
||||
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 43px">
|
||||
<div style="border-left:2px solid black; padding-left:1px">
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="padding-top:10px">
|
||||
<div>
|
||||
<div class="absolute">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
|
||||
<div style="padding-left:3px">
|
||||
<div class="absolute" style="grid-column: 2 / 3">
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
font-size: 0; /* so I can leave spaces between the child divs */
|
||||
height: 20px;
|
||||
}
|
||||
div > div {
|
||||
display: inline-block;
|
||||
}
|
||||
div > div:first-child {
|
||||
background: blue;
|
||||
}
|
||||
div > div:nth-child(2) {
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div style="width:3.6px;"></div>
|
||||
<div style="width:3.6px;"></div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div>
|
||||
<div style="width:3.3px;"></div>
|
||||
<div style="width:3.3px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/cascade.html#value-stages">
|
||||
<link rel="match" href="subpixel-table-cell-width-001-ref.html">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When a cell has a specified fractional fixed width and a block has the same specified fractional width, their actual widths should match." />
|
||||
|
||||
<style>
|
||||
.table {
|
||||
display: table;
|
||||
height: 20px;
|
||||
background: red;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
}
|
||||
div > div:first-child {
|
||||
background: blue;
|
||||
}
|
||||
div > div:nth-child(2) {
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=table>
|
||||
<div class=cell style="width:3.6px;"></div>
|
||||
<div class=cell style="width:3.6px;"></div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class=table>
|
||||
<div class=cell style="width:3.3px;"></div>
|
||||
<div class=cell style="width:3.3px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/cascade.html#value-stages">
|
||||
<link rel="match" href="subpixel-table-cell-width-001-ref.html">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When a cell has a specified percent width that results in a fractional used width, the cell's actual width should match that of a block whose specified fixed width is the cell's used width" />
|
||||
|
||||
<style>
|
||||
.table {
|
||||
display: table;
|
||||
height: 20px;
|
||||
background: red;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
}
|
||||
div > div:first-child {
|
||||
background: blue;
|
||||
}
|
||||
div > div:nth-child(2) {
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class=table style="width:7.2px;">
|
||||
<div class=cell style="width:50%;"></div>
|
||||
<div class=cell style="width:50%;"></div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class=table style="width:6.6px;">
|
||||
<div class=cell style="width:50%;"></div>
|
||||
<div class=cell style="width:50%;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.parent div {
|
||||
background: #aaa;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
There should be two grey ~squares with no red showing.
|
||||
|
||||
<div class="parent" style="width:100.2px">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="parent" style="width:100.8px">
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage">
|
||||
<link rel="match" href="subpixel-table-width-001-ref.html">
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A table with width:100% has same actual width as its parent's actual width." />
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.parent table {
|
||||
background: #aaa;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
There should be two grey ~squares with no red showing.
|
||||
|
||||
<div class="parent" style="width:100.2px">
|
||||
<table></table>
|
||||
</div>
|
||||
|
||||
<div class="parent" style="width:100.8px">
|
||||
<table></table>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
|
||||
|
||||
<div style="opacity: 0.9999;">
|
||||
<div>
|
||||
<div class="circle outside"></div>
|
||||
<div class="circle inside"></div>
|
||||
</div>
|
||||
|
|
@ -24,16 +24,13 @@ div {
|
|||
top: 30px;
|
||||
left: 30px;
|
||||
border-radius: 50px;
|
||||
background: yellow;
|
||||
will-change: transform;
|
||||
background: #ffff0060;
|
||||
}
|
||||
.inside {
|
||||
background: #ffd94d;
|
||||
background: #ffaf9f;
|
||||
clip-path: inset(0px 30px 30px 0px);
|
||||
will-change: transform;
|
||||
}
|
||||
.outside {
|
||||
background: #ffff4d;
|
||||
will-change: transform;
|
||||
background: #ffff9f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,11 +24,9 @@ div {
|
|||
top: 30px;
|
||||
left: 30px;
|
||||
border-radius: 50px;
|
||||
background: yellow;
|
||||
will-change: transform;
|
||||
background: #ffff0060;
|
||||
}
|
||||
.filter {
|
||||
opacity: 0.7;
|
||||
backdrop-filter: invert(1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue