mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 6838f7e5fbddf9c77a93b0e8cd2e27c0fcfed86f
This commit is contained in:
WPT Sync Bot
parent
37023b24f2
commit
17d194dd89
108 changed files with 2614 additions and 114 deletions
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: removing abspos descendents</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=167566">
|
||||
<meta name="assert" content="This test ensures that flex item's padding doesn't disappear when an abspos descendent is removed.">
|
||||
<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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementById('to-hide').style.display = "none";
|
||||
checkLayout(".flexbox");
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div class="flexbox" style="height: 100px;" data-expected-height="100">
|
||||
<div style="width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;" data-expected-height="100">
|
||||
<div style="position: relative; height: 100px; background-color: green;" data-expected-height="100">
|
||||
<div id="to-hide" style="position: absolute;" data-expected-height="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Minimum height of a replaced element with borders</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/" />
|
||||
<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="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="height: 100px; overflow: hidden;">
|
||||
<div style="display: flex; flex-direction: column; height: 0; width: 100px;">
|
||||
<img src="support/1x1-green.png" style="border-bottom: 99px solid green;">
|
||||
<div style="background-color: red; min-height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
column-count: 2;
|
||||
column-gap: 100px;
|
||||
width: 20em;
|
||||
font-kerning: none;
|
||||
}
|
||||
</style>
|
||||
<div class="flexbox">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: main size on orthogonal flex item.</title>
|
||||
<link rel="stylesheet" href="support/flexbox.css" >
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
|
||||
<link rel="issue" href="https://codereview.chromium.org/1052363002">
|
||||
<meta name="assert" content="This test ensure the correct main sizes are used when flex item is orthogonal to the flex container."/>
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
writing-mode: vertical-lr;
|
||||
width: min-content;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="flexbox" data-expected-height="20">
|
||||
<div class="vertical" data-expected-width="50" data-expected-height="20">
|
||||
<div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" data-expected-height="20">
|
||||
<div class="vertical" data-expected-width="50" data-expected-height="20">
|
||||
<div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Percentage size in flexbox children</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=81809">
|
||||
<meta name="assert" content="This test checks that percentage height/width values are correctly resolved in flexbox children.">
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.column, .column .fixed {
|
||||
height: 50px;
|
||||
}
|
||||
.row, .row .fixed {
|
||||
width: 50px;
|
||||
}
|
||||
.container > div {
|
||||
outline: 2px solid blue;
|
||||
}
|
||||
.row > div > div {
|
||||
height: 20px;
|
||||
}
|
||||
.flexbox > div {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.column > .flexbox {
|
||||
flex-direction: column;
|
||||
}
|
||||
.container > div > :nth-child(1) {
|
||||
background-color: orange;
|
||||
}
|
||||
.container > div > :nth-child(2) {
|
||||
background-color: yellow;
|
||||
}
|
||||
.container > div > :nth-child(3) {
|
||||
background-color: salmon;
|
||||
}
|
||||
.container > div > :nth-child(4) {
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="container row">
|
||||
<div class="flexbox">
|
||||
<div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
|
||||
<div style='width: 50%;' data-expected-width=25></div>
|
||||
<div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
|
||||
<div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container row" style='width: 100px'>
|
||||
<div class="flexbox fixed">
|
||||
<div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
|
||||
<div style='width: 50%;' data-expected-width=25></div>
|
||||
<div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
|
||||
<div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column" style='margin-bottom: 100px'>
|
||||
<div class="flexbox" style="height: auto">
|
||||
<div style='height: 10px; min-height: 50%;' data-expected-height=10></div>
|
||||
<div style='height: 50%;' data-expected-height=0></div>
|
||||
<div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
|
||||
<div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=100></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column">
|
||||
<div class="flexbox fixed">
|
||||
<div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
|
||||
<div style='height: 50%;' data-expected-height=25></div>
|
||||
<div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
|
||||
<div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container row">
|
||||
<div class="flexbox">
|
||||
<div style="flex: 0 0 50%" data-expected-width=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column">
|
||||
<div class="flexbox">
|
||||
<div style="flex: 0 0 50%" data-expected-height=0></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container row">
|
||||
<div class="flexbox fixed">
|
||||
<div style="flex: 0 0 50%" data-expected-width=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container column">
|
||||
<div class="flexbox fixed">
|
||||
<div style="flex: 0 0 50%" data-expected-height=25></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Relative position with a percentage top</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-align-items-stretch">
|
||||
<meta name="assert" content="This test ensures that a flexbox with 'flex-flow: row wrap' properly centers a grandchild with 'position: relative' and 'top: 50%'.">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.border {
|
||||
border:1px solid #000;
|
||||
}
|
||||
.width-50 {
|
||||
width: 50%;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.tall {
|
||||
height: 300px;
|
||||
}
|
||||
.top-50 {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.border')">
|
||||
<div class="border">
|
||||
<div class="flex">
|
||||
<div class="width-50">
|
||||
<label class="top-50" data-offset-y="151">This should be in the center of the container</label>
|
||||
</div>
|
||||
<div class="width-50">
|
||||
<div class="tall">
|
||||
This is tall
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue