mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 66e7f134c43e83a70edf4028ec4738ddfea28e15
This commit is contained in:
WPT Sync Bot
parent
145c3a5502
commit
d23cb97662
97 changed files with 2817 additions and 110 deletions
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: auto-height with border and padding</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-direction-column-reverse">
|
||||
<link rel="match" href="reference/auto-height-column-with-border-and-padding-ref.html">
|
||||
Tests that auto-height column flexboxes with border and padding correctly size their height to their content.
|
||||
<div class="flexbox column" style="border: 5px solid salmon; padding: 5px; overflow: scroll">
|
||||
<div class="flex-one-one-auto" style="min-height: 0">
|
||||
<div style="height: 50px; background-color: pink">
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Flexbox: flex items inside flex-direction:column</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<meta name="assert" content="This test ensures that when main axis is logical y, layout flex items before getting intrinsic size."/>
|
||||
<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>
|
||||
<p>There should be a green square below. No red.</p>
|
||||
<!-- #container is just here to make sure the test fails more reliably visually if the bug is present. -->
|
||||
<div id="container" style="width:500px;">
|
||||
<div id="flex" style="display:flex; flex-direction:column; width:70px;" data-expected-height="100">
|
||||
<div style="background:red;" data-expected-height="100">
|
||||
<div style="float:left; width:50px; height:100px; background:green;"></div>
|
||||
<div style="float:left; width:50px; height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
var flex = document.getElementById("flex");
|
||||
flex.style.width = "100px";
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Proper size of flex item in a column flexbox with height set via top/bottom.</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-flexbox-1/#propdef-flex-flow">
|
||||
<meta name="assert" content="This test ensures that when a 'display: flex' element with 'flex-flow: column' is itself sized by fitting to another container via setting position absolute + top, bottom, right, left all to 0, its flex items do not have natural size."/>
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border: 2px solid orange;
|
||||
}
|
||||
.flexbox {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.flexbox > :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.flexbox > :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</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">
|
||||
<div data-expected-height=100 class="flexbox column">
|
||||
<div data-expected-height=30 data-expected-width=80 style="height: 30px"></div>
|
||||
<div data-expected-height=50 data-expected-width=80 style="flex: 1;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="flexbox column wrap">
|
||||
<div data-expected-height=50 data-expected-width=40 style="height: 50px"></div>
|
||||
<div data-expected-height=80 data-expected-width=40 style="flex: 1 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Ensure flexbox content-size excludes scrollbar.</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars">
|
||||
<link rel="match" href="reference/content-height-with-scrollbars-ref.html">
|
||||
<meta name="assert" content="This test ensures that content-size of a flexbox with scrollbars looks correct."/>
|
||||
<style>
|
||||
.flexbox {
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.flexbox > div {
|
||||
flex: none;
|
||||
}
|
||||
.flexbox > :nth-child(1) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.flexbox > :nth-child(2) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This tests that when setting the height of a flex item to a percentage
|
||||
height, we use the content height with scrollbars. The content should not be
|
||||
scrollable in any of the test cases below.</p>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div style="height: 100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column wrap">
|
||||
<div style="height: 50px; width: 50%;"></div>
|
||||
<div style="height: 50px; width: 50%; background-color: lightblue"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column wrap align-content-flex-start" style="height: auto; max-height: 100px; padding: 10px;">
|
||||
<div style="height: 50px; width: 300px;"></div>
|
||||
<div style="height: 50px; width: 300px; background-color: lightblue"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Column height with padding</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/#item-margins">
|
||||
<meta name="assert" content="This test checks that height of flex container works with padding">
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: green;
|
||||
}
|
||||
</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>
|
||||
|
||||
<p>You should see a green rectangle, 40px high.</p>
|
||||
|
||||
<div class="flexbox column" data-expected-height="40">
|
||||
<div id="child" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('child').offsetHeight;
|
||||
document.getElementById('child').style.padding = "20px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: flex factors less than one</title>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink">
|
||||
<meta name="assert" content="flex-grow and flex-shrink factors less than 1 work">
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.child-flex-grow-0-75 {
|
||||
background-color: lime;
|
||||
flex-grow: 0.75;
|
||||
}
|
||||
|
||||
.child-flex-grow-0-5 {
|
||||
background-color: green;
|
||||
flex-grow: 0.5;
|
||||
}
|
||||
|
||||
.child-flex-grow-0-25 {
|
||||
background-color: red;
|
||||
flex-grow: 0.25;
|
||||
}
|
||||
|
||||
.child-flex-shrink-0-5 {
|
||||
background-color: green;
|
||||
flex-shrink: 0.5;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.child-flex-shrink-0-25 {
|
||||
background-color: red;
|
||||
flex-shrink: 0.25;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.basis-0 {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.basis {
|
||||
flex-basis: 30px;
|
||||
}
|
||||
|
||||
.basis-big {
|
||||
flex-basis: 100px;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</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 container">
|
||||
<div class="child-flex-grow-0-5" data-expected-width="50"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container">
|
||||
<div class="child-flex-grow-0-5" data-expected-width="50"></div>
|
||||
<div class="child-flex-grow-0-25" data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column">
|
||||
<div class="child-flex-grow-0-5" data-expected-height="50"></div>
|
||||
<div class="child-flex-grow-0-25" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column vertical">
|
||||
<div class="child-flex-grow-0-5 " data-expected-width="50"></div>
|
||||
<div class="child-flex-grow-0-25 " data-expected-width="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container vertical">
|
||||
<div class="child-flex-grow-0-5 " data-expected-height="50"></div>
|
||||
<div class="child-flex-grow-0-25 " data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container">
|
||||
<div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
|
||||
<div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column">
|
||||
<div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
|
||||
<div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container vertical">
|
||||
<div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
|
||||
<div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column vertical">
|
||||
<div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
|
||||
<div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<!-- And now, the shrink cases -->
|
||||
<div class="flexbox container">
|
||||
<div class="child-flex-shrink-0-5" data-expected-width="150"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container">
|
||||
<div class="child-flex-shrink-0-5" data-expected-width="50"></div>
|
||||
<div class="child-flex-shrink-0-25" data-expected-width="125"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column">
|
||||
<div class="child-flex-shrink-0-5" data-expected-height="50"></div>
|
||||
<div class="child-flex-shrink-0-25" data-expected-height="125"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column vertical">
|
||||
<div class="child-flex-shrink-0-5 " data-expected-width="50"></div>
|
||||
<div class="child-flex-shrink-0-25 " data-expected-width="125"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container vertical">
|
||||
<div class="child-flex-shrink-0-5 " data-expected-height="50"></div>
|
||||
<div class="child-flex-shrink-0-25 " data-expected-height="125"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container">
|
||||
<div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
|
||||
<div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
|
||||
</div>
|
||||
<div class="flexbox container column">
|
||||
<div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
|
||||
<div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container vertical">
|
||||
<div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
|
||||
<div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container column vertical">
|
||||
<div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
|
||||
<div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
|
||||
</div>
|
||||
|
||||
<!-- Interaction of min-width: auto with fractional flex basis -->
|
||||
<div class="flexbox container" style="background-color: red;">
|
||||
<div class="child-flex-grow-0-25 basis-0" style="background-color: green;" data-expected-width="10"></div>
|
||||
<div class="child-flex-grow-0-75 basis-0" data-expected-width="90">
|
||||
<div style="width: 90px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- centering should still center; same for other justify-content values -->
|
||||
<div class="flexbox container justify-content-center">
|
||||
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container justify-content-space-around">
|
||||
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox container justify-content-flex-end">
|
||||
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="51"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: Ensure flex item proper formatting context.</title>
|
||||
<link rel="match" href="reference/floated-flexitem-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<meta name="assert" content="This test checks that the flex items of a flex container participate in their container’s flex formatting context, not in a block formatting context.">
|
||||
<style>
|
||||
#flexbox {
|
||||
background-color: lightgrey;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#flexbox > * {
|
||||
border: 1px solid green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
|
||||
a green border because the anonymous block is the flex item.
|
||||
</p>
|
||||
<div id="flexbox" style="display: flex">
|
||||
|
||||
<!-- flex item: block child -->
|
||||
<div id="item1">block</div>
|
||||
|
||||
<!-- flex item: floated element; floating is ignored -->
|
||||
<div id="item2" style="float: left;">float</div>
|
||||
|
||||
<!-- flex item: anonymous block box around inline content -->
|
||||
anonymous item 3
|
||||
|
||||
<!-- flex item: inline child -->
|
||||
<span>
|
||||
item 4
|
||||
<!-- flex items do not split around blocks -->
|
||||
<div id=not-an-item>item 4</div>
|
||||
item 4
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: Inline flexbox width calculation with flex-direction: column and flex-wrap</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#Computing_widths_and_margins">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test checks that width is correctly computed for flexbox with flex-direction: column and flex-wrap.">
|
||||
<style>
|
||||
.inline-flexbox {
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.writing-mode-vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.inline-flexbox > * {
|
||||
flex: none;
|
||||
}
|
||||
.inline-flexbox :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.inline-flexbox :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.inline-flexbox :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.inline-flexbox :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</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 column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
|
||||
<div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
|
||||
<div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
|
||||
<div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
|
||||
<div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
|
||||
<div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div>
|
||||
<div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
|
||||
<div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div>
|
||||
<div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div>
|
||||
<div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
|
||||
<div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="0"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="20"></div>
|
||||
<div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="0"></div>
|
||||
<div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="10"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div>
|
||||
<div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div>
|
||||
<div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div>
|
||||
<div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="50"></div>
|
||||
<div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
|
||||
<div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="-30"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
|
||||
<div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
|
||||
<div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
|
||||
<div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
|
||||
<div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div>
|
||||
<div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div>
|
||||
<div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
|
||||
<div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
|
||||
<div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div>
|
||||
<div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div>
|
||||
<div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
|
||||
<div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="15"></div>
|
||||
<div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="5"></div>
|
||||
<div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="25"></div>
|
||||
<div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="5"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
|
||||
<div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div>
|
||||
<div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div>
|
||||
<div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
|
||||
<div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="50"></div>
|
||||
<div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
|
||||
<div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="40"></div>
|
||||
<div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="-50"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
Tests that auto-height column flexboxes with border and padding correctly size their height to their content.
|
||||
<div style="border: 5px solid salmon; padding: 5px; overflow: scroll">
|
||||
<div>
|
||||
<div style="height: 50px; background-color: pink">
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.outer {
|
||||
height: 100px;
|
||||
overflow:scroll;
|
||||
}
|
||||
.outer > div, td:nth-child(1) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
td:nth-child(2) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
table, td {
|
||||
padding: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This tests that when setting the height of a flex item to a percentage
|
||||
height, we use the content height with scrollbars. The content should not be
|
||||
scrollable in any of the test cases below.</p>
|
||||
|
||||
<div class="outer">
|
||||
<div style="height: 100%"></div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div style="display:inline-block; height: 50px; width: 50%;"></div><div
|
||||
style="display:inline-block; height: 50px; width: 50%; background-color: lightblue"></div>
|
||||
</div>
|
||||
<div class="outer" style="padding: 10px; height: auto">
|
||||
<table style="margin: 0; padding: 0; width: 600px">
|
||||
<tr>
|
||||
<td style="width: 50%; height: 50px"></td>
|
||||
<td style="width: 50%; height: 50px"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
#flexbox {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
#flexbox > * {
|
||||
border: 1px solid green;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>
|
||||
This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have
|
||||
a green border because the anonymous block is the flex item.
|
||||
</p>
|
||||
<div id="flexbox">
|
||||
<div style="display: inline-block">block</div><div
|
||||
style="display: inline-block">float</div><div
|
||||
style="display: inline-block; border: 0">anonymous item 3</div><div
|
||||
style="display: inline-block">
|
||||
item 4<br>
|
||||
item 4<br>
|
||||
item 4
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue