mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 169a1410bfe8e517d79852144555dd49ea1f597a
This commit is contained in:
WPT Sync Bot
parent
ebaa73ddcd
commit
932f14ce3a
400 changed files with 2211 additions and 865 deletions
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: Auto margins on column flex direction with wrap</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
|
||||
<link rel="match" href="reference/columns-center-with-margins-and-wrap-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px solid black;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
.item1 {
|
||||
margin: 0 auto;
|
||||
background: lightblue;
|
||||
}
|
||||
.item2 {
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the flex items are properly centered in each column</p>
|
||||
<div class="flexbox column wrap">
|
||||
<div class="item1">centeredWithMargins</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: Scrollbars and flex-direction.</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars">
|
||||
<link rel="match" href="reference/cross-axis-scrollbar-ref.html">
|
||||
<meta name="assert" content="This test ensures that flexbox scrollbars take flex-direction into account."/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.column > div {
|
||||
flex: none;
|
||||
background-color: green;
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.row > div {
|
||||
background-color: green;
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vertical-lr > .column > div {
|
||||
flex: none;
|
||||
height: 50px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.vertical-lr > .row > div {
|
||||
flex: 1;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
This test passes if no red is showing.
|
||||
|
||||
<div style="position: relative;">
|
||||
|
||||
<div style="position: absolute; top: 0; left: 0;">
|
||||
<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top: 0; left: 150px;">
|
||||
<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top:0; left: 300px" class="vertical-lr">
|
||||
<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-flex-start"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; top:0; left: 450px;" class="vertical-lr">
|
||||
<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-flex-start"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0">
|
||||
<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px">
|
||||
<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr">
|
||||
<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr">
|
||||
<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
|
||||
<div class="align-self-flex-start"></div>
|
||||
<div class="align-self-center"></div>
|
||||
<div class="align-self-flex-end"></div>
|
||||
<div class="align-self-baseline"></div>
|
||||
<div class="align-self-stretch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- FIXME: Add tests for vertical-rl. Setting the logical
|
||||
bottom border on these tests cause additional scrollbars to appear. -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
158
tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-013.html
Normal file
158
tests/wpt/web-platform-tests/css/css-flexbox/flex-flow-013.html
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox Test: flex-flow - column column-reverse and row-reverse</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow">
|
||||
<meta name="assert" content="Test ensures that setting 'flex-flow' property to either 'column',
|
||||
'column-reverse' or 'row-reverse' in combination with different 'direction' and 'writing-mode'
|
||||
values works properly.">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.flexbox {
|
||||
width: 600px;
|
||||
display: flex;
|
||||
background-color: grey;
|
||||
}
|
||||
.flexbox > div {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.vertical-rl, .vertical-lr, .column, .column-reverse {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.row-reverse {
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.flexbox > .first {
|
||||
background-color: blue;
|
||||
}
|
||||
.flexbox > .second {
|
||||
background-color: green;
|
||||
}
|
||||
.flexbox > .third {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.flexbox > div > div {
|
||||
background-color: orange;
|
||||
height: 10px;
|
||||
}
|
||||
</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">
|
||||
<div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
|
||||
<div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="275"></div></div>
|
||||
<div class="third" data-expected-width="75" data-offset-x="425" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox rtl">
|
||||
<div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
|
||||
<div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="175"></div></div>
|
||||
<div class="third" data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox row-reverse">
|
||||
<div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
|
||||
<div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="375"></div></div>
|
||||
<div class="third" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox rtl row-reverse">
|
||||
<div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
|
||||
<div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="75"></div></div>
|
||||
<div class="third" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="flexbox column">
|
||||
<div class="first" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
|
||||
<div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
|
||||
<div class="third" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="flexbox column-reverse">
|
||||
<div class="first" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
|
||||
<div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
|
||||
<div class="third" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="flexbox column rtl">
|
||||
<div class="first" data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
|
||||
<div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
|
||||
<div class="third" data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="flexbox column-reverse rtl">
|
||||
<div class="first" data-expected-height="150" data-offset-y="450" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
|
||||
<div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
|
||||
<div class="third" data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div data-expected-height="600" class="flexbox vertical-lr column">
|
||||
<div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
|
||||
<div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div data-expected-height="600" class="flexbox vertical-lr column-reverse">
|
||||
<div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
|
||||
<div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div data-expected-height="600" class="flexbox vertical-rl column">
|
||||
<div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
|
||||
<div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div data-expected-height="600" class="flexbox vertical-rl column-reverse">
|
||||
<div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
|
||||
<div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: flex-flow auto margin with no available space</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
|
||||
<link rel="help" href="https://crbug.com/380201">
|
||||
<meta name="assert" content="This test checks that a flexbox doesn't shrink below border/padding
|
||||
when stretching children with no available space.">
|
||||
<style>
|
||||
* {
|
||||
display: flex;
|
||||
padding-bottom: 20pt;
|
||||
min-height: 0.7%;
|
||||
margin-top: 6000%;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 7000%;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<abbr data-expected-height=30210272>
|
||||
<input></input>
|
||||
</abbr>
|
||||
<script>
|
||||
window.checkLayout('abbr');
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-008-ltr-ref.html">
|
||||
<link rel="match" href="gap-009-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="gap-008-ltr-ref.html">
|
||||
<link rel="match" href="gap-010-ltr-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The 'gap' property enables putting space exclusively between items">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: Ensure proper formatting with display: inline-flex</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-property">
|
||||
<meta name="assert" content="This test checks that inline-flex generates a flex container box that is inline-level when placed in flow layout.">
|
||||
<style>
|
||||
#testcase > div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: green;
|
||||
outline: 2px solid darkgreen;
|
||||
}
|
||||
#testcase > div > div {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('#testcase')">
|
||||
<div id=log></div>
|
||||
<p>This test passes if the three green boxes are on the same horizontal line.</p>
|
||||
|
||||
<div id="testcase" style="position: relative">
|
||||
<div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block">
|
||||
</div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: inline-flex;">
|
||||
<div data-expected-width="25"></div>
|
||||
<div data-expected-width="25"></div>
|
||||
</div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Proper min-width intrinsic size with display: flex</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">
|
||||
<meta name="assert" content="This test checks that min-width intrinsic size still applies if a fixed width is set.">
|
||||
<style>
|
||||
.min-content {
|
||||
width: 10px;
|
||||
min-width: -webkit-min-content;
|
||||
min-width: -moz-min-content;
|
||||
min-width: -ie-min-content;
|
||||
min-width: -o-min-content;
|
||||
min-width: min-content;
|
||||
outline: 2px solid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.max-content {
|
||||
width: 10px;
|
||||
min-width: -webkit-max-content;
|
||||
min-width: -moz-max-content;
|
||||
min-width: -ie-max-content;
|
||||
min-width: -o-max-content;
|
||||
min-width: max-content;
|
||||
outline: 2px solid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fit-content {
|
||||
width: 10px;
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: -ie-fit-content;
|
||||
min-width: -o-fit-content;
|
||||
min-width: fit-content;
|
||||
outline: 2px solid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.child {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: pink;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('body > div')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="min-content" data-expected-width=20>
|
||||
<div class="child"></div><div class="child"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-content" data-expected-width=40>
|
||||
<div class="child"></div><div class="child"></div>
|
||||
</div>
|
||||
|
||||
<div class="fit-content" data-expected-width=40>
|
||||
<div class="child"></div><div class="child"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: 30px">
|
||||
<div class="fit-content" data-expected-width=30>
|
||||
<div class="child"></div><div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px">
|
||||
<div class="fit-content" data-expected-width=20>
|
||||
<div class="child"></div><div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: container widths & ortho items</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="the correct width/height of ortho children is used to size flex containers">
|
||||
<style>
|
||||
.vertical {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.inline-flexbox')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="inline-flexbox" data-expected-width="20">
|
||||
<div class="vertical" style="width: 20px; height: 50px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox" data-expected-width="20">
|
||||
<div class="vertical" style="line-height: 20px;">Some text</div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox" data-expected-width="20">
|
||||
<span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="../support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px solid black;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
.item1 {
|
||||
background: lightblue;
|
||||
}
|
||||
.item2 {
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the flex items are properly centered in each column</p>
|
||||
<div class="flexbox column wrap">
|
||||
<div class="item1 align-self-center">centeredWithMargins</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
<div class="item2 align-self-center">centeredWithAlignSelf</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.testcase {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.testcase div {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test passes if no red is showing.
|
||||
|
||||
<div style="position: relative; background-color: transparent;">
|
||||
|
||||
<div class="testcase" style="top:0; left: 0">
|
||||
<div style="width: 100px; height: 50px"></div>
|
||||
<div style="width: 100px; overflow-x: scroll"></div>
|
||||
<div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 150px">
|
||||
<div style="width: 100px"></div>
|
||||
<div style="overflow-y: scroll"></div>
|
||||
<div style="width: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 300px">
|
||||
<div style="width: 100px"></div>
|
||||
<div style="overflow-y: scroll"></div>
|
||||
<div style="width: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="top: 0; left: 450px">
|
||||
<div style="width: 100px; height: 50px"></div>
|
||||
<div style="width: 100px; overflow-x: scroll"></div>
|
||||
<div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="top: 100px; left: 0">
|
||||
<div style="width: 100px; height: 50px; "></div>
|
||||
<div style="width: 100px; overflow-x: scroll"></div>
|
||||
<div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 150px">
|
||||
<div style="width: 90px; overflow-y: scroll"></div>
|
||||
<div style="width: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="top: 100px; left: 300px">
|
||||
<div style="width: 100px; height: 40px; overflow-x: scroll"></div>
|
||||
<div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 450px">
|
||||
<div style="width: 100px"></div>
|
||||
<div style="overflow-y: scroll"></div>
|
||||
<div style="width: 10px; position: relative; z-index: -1"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue