mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision 1a83e795e53c50c1306a14a7bb8e3f7ccfa7f89f
This commit is contained in:
WPT Sync Bot
parent
406eefb4b1
commit
9bf4e63ec5
46 changed files with 349 additions and 94 deletions
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
|
||||
#circles, #circles div {
|
||||
|
|
@ -17,13 +18,13 @@
|
|||
<body>
|
||||
<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
|
||||
|
||||
<p>The word OK should be centered vertically and horizontally.</p>
|
||||
<p>The black rectangle should be centered vertically and horizontally.</p>
|
||||
<div style="width: 4em; height: 4em; background: silver">
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center; font-family: Ahem;">OK</td></tr></table>
|
||||
</div>
|
||||
|
||||
<div style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl">
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center">OK</td></tr></table>
|
||||
<table style="width: 100%; height: 100%;"><tr><td style="text-align: center; font-family: Ahem;">OK</td></tr></table>
|
||||
</div>
|
||||
|
||||
<p>You should see 3 blue concentric circles.</p>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Aligning with auto margins</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins">
|
||||
<link rel="match" href="auto-margins-001-ref.html">
|
||||
|
|
@ -27,13 +28,13 @@
|
|||
<body>
|
||||
<p>These tests are from the spec: <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">http://dev.w3.org/csswg/css3-flexbox/#auto-margins</a>.</p>
|
||||
|
||||
<p>The word OK should be centered vertically and horizontally.</p>
|
||||
<p>The black rectangle should be centered vertically and horizontally.</p>
|
||||
<div class="flexbox" style="width: 4em; height: 4em; background: silver">
|
||||
<p id="ok" style="margin: auto;">OK</p>
|
||||
<p id="ok" style="margin: auto; font-family: Ahem;">OK</p>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="width: 4em; height: 4em; margin-top: 10px; background: silver; writing-mode: vertical-rl">
|
||||
<p id="okVertical" style="margin: auto;">OK</p>
|
||||
<p id="okVertical" style="margin: auto; font-family: Ahem;">OK</p>
|
||||
</div>
|
||||
|
||||
<p>You should see 3 blue concentric circles.</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: painting order.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#order-property">
|
||||
<link rel="match" href="reference/order-painting-ref.html">
|
||||
<meta name="assert" content="This test ensures that the 'order' style properly changes the paint order of flex items."/>
|
||||
<body>
|
||||
<p>This test passes if there is no red showing.</p>
|
||||
|
||||
<div style="display: flex; width: 100px;">
|
||||
<div style="order: 2; background-color: green; width: 100px; height: 100px; margin-left: -50px;"></div>
|
||||
<div style="order: 1; background-color: red; width: 50px; height: 100px;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: percentage height of replaced elements</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
|
||||
<link rel="help" href="https://crbug.com/499766">
|
||||
<meta name="assert" content="This test checks that percent heights of flex items' replaced children are resolved correctly" />
|
||||
<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>
|
||||
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<p>You should see no red -- the height should be considered definite</p>
|
||||
|
||||
<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
|
||||
<div style="background: red;">
|
||||
<img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="width: 100px; height: 150px; outline: 5px solid black;">
|
||||
<div class="flex-one" style="background: red;">
|
||||
<img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
|
||||
<div style="background: red;">
|
||||
<object style="height: 100%; width: 100%;" data="support/100x100-green.png" data-expected-height="150"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
|
||||
<div style="background: red;">
|
||||
<embed style="height: 100%; width: 100%;" type="application/x-webkit-test-webplugin" data-expected-height="150"></embed>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: percentage max width when using 'flex-direction: column'</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
|
||||
<link rel="help" href="https://crbug.com/675333">
|
||||
<meta name="assert" content="This test checks that an item's percentage max-width is correctly resolved when using 'flex-direction: column'">
|
||||
<link rel="stylesheet" href="support/flexbox.css">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
|
||||
<p>Both bars should be the same width</p>
|
||||
<div class="flexbox column" style="width: 400px;">
|
||||
<div data-expected-width="200" style="margin-left: 50%; width: 50%; background: green;">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column" style="width: 400px;">
|
||||
<div data-expected-width="200" style="margin-left: 50%; max-width: 50%; background: blue;">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<title>CSS Flexbox: percentage size in flexbox children in quirks mode</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 in quirks mode 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,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<p>This test passes if there is no red showing.</p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background-color: green"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue