mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision b'f0b66362cc5dec54d81e0a56458b48f310a2eba9'
This commit is contained in:
WPT Sync Bot
parent
766917ef4f
commit
75286b8eab
467 changed files with 8309 additions and 3209 deletions
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1306037">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert"
|
||||
content="Abspos child of a flexbox moves after script changes its alignment.">
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#parent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#child {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id=reference-overlapped-red></div>
|
||||
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
child.style.alignSelf = 'start';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1229458">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8690">
|
||||
<link rel="help" href="https://github.com/whatwg/html/issues/9123">
|
||||
<link rel="help"
|
||||
href="https://html.spec.whatwg.org/multipage/rendering.html#anonymous-fieldset-content-box">
|
||||
<meta name="assert"
|
||||
content="justify-content: center is ignored in a column flexbox fieldset when the anonymous fieldset content box has no height or min-height.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
min-height: 200px;
|
||||
padding: 0px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Pass Condition: orange square is at top of black square.<br>
|
||||
Safari 16.4 and Firefox 111 fail -- orange box is vertically centered as if
|
||||
the anonymous fieldset content box and the fieldset were the same box.
|
||||
</p>
|
||||
|
||||
<fieldset>
|
||||
<div class="item" data-offset-y="0"></div>
|
||||
</fieldset>
|
||||
|
||||
<script>
|
||||
checkLayout('.item');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700474">
|
||||
<link rel="help" href="https://crbug.com/1337056">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="specified size suggestion obeys item's resolvable % main size">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<div style="display: flex; width: 100px;">
|
||||
<img src="support/100x100-green.png" style="width: 100%; flex: 0 0 10px;">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="flags" content="asis" />
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1601626">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id=reference-overlapped-red></div>
|
||||
|
||||
<!-- Firefox 111 gives the green square too much height. 111px on my system. -->
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="background-color: green; line-height: 10px;">
|
||||
<span style="margin-left: 1px">
|
||||
<div style="display:inline-block; width: 99px; height: 100px"></div>
|
||||
<!-- the html comments are necessary to trigger the bug -->
|
||||
<!-- -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-direction-column">
|
||||
<link rel="help" href="https://webkit.org/b/226522">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert"
|
||||
content="Column flexboxes with indefinite heights don't mess up positioning of descendant grid items.">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
<div id=reference-overlapped-red></div>
|
||||
|
||||
<body style="height: 400px;">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="display: grid; align-items: center; height: 100%;">
|
||||
<div style="width:100px; height: 100px; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-flexbox/#justify-content-property">
|
||||
<link rel="help" href="https://crbug.com/1228023">
|
||||
<meta name="assert"
|
||||
content="Wrapped item obeys justify-content:center when the item wraps because the container has max-height.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.flexitem {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Pass condition: orange square is vertically centered in the black box.<br>
|
||||
Chrome 112 and Safari 16.4 fail. Firefox 111 passes.
|
||||
<div
|
||||
style="display: flex; flex-flow: column wrap; max-height: 200px; justify-content: center; align-content: start; border: 2px solid; position: relative;">
|
||||
<div class=flexitem style="background: blue; height: 200px;"></div>
|
||||
<div class=flexitem style="background: orange; height: 100px;"
|
||||
data-offset-y=50></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
checkLayout('.flexitem + .flexitem');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes">
|
||||
<link rel="help" href="https://webkit.org/b/253922">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert"
|
||||
content="A table's max-content width is used for its parent flexbox's max-content calculation. Safari 16.4 uses min-content width.">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id=reference-overlapped-red></div>
|
||||
<div
|
||||
style="display: flex; flex-direction: column; height: 100px; width: max-content; background-color: green;">
|
||||
<div style="display: table">
|
||||
<div style="display: table-cell">
|
||||
<div class="inline-block"></div>
|
||||
<div class="inline-block"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue