mirror of
https://github.com/servo/servo.git
synced 2025-08-08 15:05:35 +01:00
Update web-platform-tests to revision 6366ae15c2bc2314adca4321357c68bb468fec98
This commit is contained in:
WPT Sync Bot
parent
e47e884cc7
commit
6b740f0283
328 changed files with 3757 additions and 591 deletions
|
|
@ -3,9 +3,9 @@
|
|||
<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">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-column">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-wrap-wrap">
|
||||
<link rel="match" href="reference/align-self-015-ref.html">
|
||||
<meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: Change to auto-margin items in column flexbox</title>
|
||||
<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/#propdef-align-self">
|
||||
<link rel="match" href="reference/columns-center-with-margins-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-column">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-self">
|
||||
<link rel="match" href="reference/auto-margins-003-ref.html">
|
||||
<meta name="assert" content="This test ensures that auto margins for column flows are correctly calculated"/>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Canvas size dynamic change in flexbox layout</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.red {
|
||||
height: 400px;
|
||||
background: red;
|
||||
}
|
||||
canvas {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id=log></div>
|
||||
|
||||
<div class="red">
|
||||
<div class="flexbox column">
|
||||
<canvas id="canvas" data-expected-height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
|
||||
requestAnimationFrame(function() {
|
||||
canvas.height = 400;
|
||||
checkLayout('.flexbox');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#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">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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-flexbox-1/#min-size-auto">
|
||||
<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."/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<title>CSS Flexbox: vertical-align on a flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align">
|
||||
<link rel="match" href="reference/flex-item-vertical-align-ref.html">
|
||||
<meta name="assert" content="vertical-align should have no effect on a flex item, i.e. flex items' content should not be shifted by the vertical-align.">
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
#item1 {
|
||||
vertical-align: 10px;
|
||||
}
|
||||
#item3 {
|
||||
vertical-align: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='flexbox'>
|
||||
<!-- flex item: block child -->
|
||||
<div id='item1'>block</div>
|
||||
<!-- flex item: anonymous block box around inline content -->
|
||||
anonymous item 2
|
||||
<!-- flex item: inline child -->
|
||||
<span id='item3'>item 3</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: z-index on non-positioned flex-items</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting">
|
||||
<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=91405">
|
||||
<link rel="match" href="reference/flex-item-z-ordering-001-ref.html">
|
||||
<meta name="assert" content="z-index on non-positioned flex-items works.">
|
||||
<style>
|
||||
.flex-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.positioned {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
|
||||
<div style="position:relative">
|
||||
<div style="display:flex;">
|
||||
<div class="flex-item" style="z-index: 1; background-color: salmon;"></div>
|
||||
<div class="flex-item" style="z-index: 100; background-color: orange;"></div>
|
||||
</div>
|
||||
<div class="positioned" style="top: 0; z-index: 150; background-color: green"></div>
|
||||
<div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<div style="display:flex;">
|
||||
<img class="flex-item" style="z-index: 1; background-color: salmon;"></img>
|
||||
<img class="flex-item" style="z-index: 100; background-color: orange;"></img>
|
||||
</div>
|
||||
<img class="positioned" style="top: 0; z-index: 150; background-color: green"></img>
|
||||
<img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Flexible Box Test: flex item margins</title>
|
||||
<link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property-direction">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins">
|
||||
<link rel="match" href="reference/flex-margin-no-collapse-ref.html">
|
||||
<meta name="assert" content="The vertical gap between two green boxs should be 100px." />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: flex-basis with zero pixel</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that setting 'flex-basis' property to
|
||||
zero pixel or percentage in combination with one value of both 'flex-grow' and 'flex-shrink'
|
||||
and 'writing-mode' value works properly.">
|
||||
<style>
|
||||
.flexbox > div {
|
||||
font-family: Ahem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flex-one-one-zero-percent {
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.flex-one-one-zero-px {
|
||||
flex: 1 1 0px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.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="document.fonts.ready.then(() => { checkLayout('.flexbox'); })">
|
||||
<div id=log></div>
|
||||
<div class="flexbox column">
|
||||
<div class="flex-one" data-expected-height="14">Flex item with flex: 1</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div class="flex-one-one-zero-percent" data-expected-height="14">Flex item with flex: 1 1 0%</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column">
|
||||
<div class="flex-one-one-zero-px" data-expected-height="0">Flex item with flex: 1 1 0px</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column vertical">
|
||||
<div class="flex-one" data-expected-width="14">Flex item with flex: 1</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column vertical">
|
||||
<div class="flex-one-one-zero-percent" data-expected-width="14">Flex item with flex: 1 1 0%</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox column vertical">
|
||||
<div class="flex-one-one-zero-px" data-expected-width="0">Flex item with flex: 1 1 0px</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: Flex children width when the parent width is changed</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
|
||||
<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=108231">
|
||||
<meta name="assert" content="Flexbox should relayout flex children when width changes.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexitem {
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
min-height: 3em;
|
||||
}
|
||||
.child {
|
||||
background-color: salmon;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div id="container" style="width: 100px" data-expected-width="200">
|
||||
<div class="flexbox column" data-expected-width="200">
|
||||
<div class="flexitem" data-expected-width="200">
|
||||
<div class="child" data-expected-width="200">This div should be 200px wide.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var container = document.getElementById('container');
|
||||
container.offsetWidth;
|
||||
container.style.width = "200px";
|
||||
checkLayout("#container");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: the width calculation of flexbox with flex-direction: column and flex-wrap: wrap</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<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="bookmark" href="https://crbug.com/607262">
|
||||
<link rel="bookmark" href="https://crbug.com/607856">
|
||||
<meta name="assert" content="This test ensures that the width of a flexbox with 'flex-direction: column' and 'flex-wrap: wrap' is updated when the wrapping column dynamically changes.">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 600px;
|
||||
height: 160px;
|
||||
outline: 2px solid black;
|
||||
}
|
||||
.item {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function change() {
|
||||
var flex = document.getElementById("test");
|
||||
flex.offsetWidth;
|
||||
flex.style.height = "60px";
|
||||
checkLayout('.flexbox');
|
||||
}
|
||||
</script>
|
||||
<body onload="change()">
|
||||
<div id=log></div>
|
||||
|
||||
<p>The green boxes should all be within the black box</p>
|
||||
|
||||
<div class="flexbox column wrap" id="test">
|
||||
<div class="item" data-expected-width="290"></div>
|
||||
<div class="item" data-expected-width="290"></div>
|
||||
<div class="item" data-expected-width="290"></div>
|
||||
<div class="item" data-expected-width="290"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: nested multiline (wrapping) flex boxes.</title>
|
||||
<link rel="stylesheet" href="support/flexbox.css" >
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<meta name="assert" content="This test ensures that nested multiline flex boxes with 'flex-wrap: wrap' and the min preferred width set are laid out properly."/>
|
||||
<style>
|
||||
.item {
|
||||
padding: 7px;
|
||||
background-color: green;
|
||||
border: 4px solid olive;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.square {
|
||||
background-color: lime;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.container')">
|
||||
<div id=log></div>
|
||||
|
||||
<div class="container flexbox wrap" data-expected-height=42>
|
||||
<div class="item flexbox wrap" data-expected-width=42 data-expected-height=42>
|
||||
<div class="square" data-expected-width=20 data-expected-height=20></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: multiline reverse wrap baseline.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
||||
<link rel="match" href="reference/multiline-reverse-wrap-baseline-ref.html">
|
||||
<meta name="assert" content="This test ensures that 'flex-wrap: wrap-reverse' flips the cross axis directions and items with baseline alignment are aligned to cross axis start."/>
|
||||
<style>
|
||||
.flexbox {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
flex-wrap: wrap-reverse;
|
||||
align-items: baseline;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.flexbox > div {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.flexbox :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.flexbox :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="flex: 1 0 100px;">first<br>first<br>first</div>
|
||||
<div style="flex: 1 0 100px;">second</div>
|
||||
<div style="flex: 1 0 100px; margin-top: 5px">third</div>
|
||||
<div style="flex: 1 0 100px;">fourth<br>fourth</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="flex: 1 0 100px;">first<br>first<br>first</div>
|
||||
<div style="flex: 1 0 100px;">second</div>
|
||||
<div style="flex: 1 0 100px;">third</div>
|
||||
<div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="width: 300px;">
|
||||
<div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div>
|
||||
<div style="flex: 1 0 100px;">second</div>
|
||||
<div style="flex: 1 0 100px;">third<br>third</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Flexbox: multiline column flexboxes and shrink-to-fit.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes">
|
||||
<link rel="match" href="reference/multiline-shrink-to-fit-ref.html">
|
||||
<meta name="assert" content="This test ensures that multiline column flexboxes shrink-to-fit works properly."/>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.flexbox > * {
|
||||
flex: none;
|
||||
}
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.flexbox :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.flexbox :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="flexbox">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div class="flexbox" style="height: 30px">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div style="width: 150px">
|
||||
<div class="flexbox">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div style="width: 150px">
|
||||
<div class="flexbox" style="height: 35px">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide and 5px should
|
||||
stick out the bottom.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link href="../support/flexbox.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='flexbox'>
|
||||
<!-- flex item: block child -->
|
||||
<div>block</div>
|
||||
<!-- flex item: anonymous block box around inline content -->
|
||||
anonymous item 2
|
||||
<!-- flex item: inline child -->
|
||||
<span>item 3</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container > * {
|
||||
position: absolute;
|
||||
}
|
||||
.large {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.small {
|
||||
left: 25px;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
|
||||
<div class="container" style="position:relative">
|
||||
<div class="large" style="z-index: 1; background-color: salmon;"></div>
|
||||
<div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div>
|
||||
<div class="small" style="z-index: 150; background-color: green"></div>
|
||||
<div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div>
|
||||
</div>
|
||||
<div class="container" style="position:relative; top: 50px">
|
||||
<img class="large" style="z-index: 1; background-color: salmon;"></img>
|
||||
<img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img>
|
||||
<img class="small" style="z-index: 150; background-color: green"></img>
|
||||
<img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table style="background-color: #aaa">
|
||||
<tr><td colspan=2 style="height: 5px"></td></tr>
|
||||
<tr>
|
||||
<td style="vertical-align: top"><div style="background-color: pink">third</div></td>
|
||||
<td style="background-color: yellow">fourth<br>fourth</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color: lightblue">first<br>first<br>first</td>
|
||||
<td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table style="background-color: #aaa">
|
||||
<tr>
|
||||
<td style="vertical-align: top"><div style="background-color: pink">third</div></td>
|
||||
<td style="background-color: yellow">fourth<br>fourth</td>
|
||||
</tr>
|
||||
<tr><td colspan=2 style="height: 5px"></td></tr>
|
||||
<tr>
|
||||
<td style="background-color: lightblue">first<br>first<br>first</td>
|
||||
<td style="vertical-align: top"><div style="background-color: lightgreen">second</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table style="background-color: #aaa">
|
||||
<tr>
|
||||
<td style="vertical-align: top; background-color: lightblue; height: 100px">first</td>
|
||||
<td style="vertical-align: bottom"><div style="background-color: lightgreen">second</div><div> </div></td>
|
||||
<td style="vertical-align: bottom"><div style="background-color: pink">third<br>third</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
.testcase {
|
||||
float: left;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.testcase > :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.testcase > :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.testcase > :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.testcase > :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="testcase" style="height: 60px; width: 100px">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div class="testcase" style="height: 30px; width: 100px">
|
||||
<table>
|
||||
<td>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px; background-color: lightgreen"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 100px; height: 10px; background-color: pink"></div>
|
||||
<div style="width: 100px; height: 20px; background-color: yellow"></div>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div style="width: 150px">
|
||||
<div class="testcase" style="height: 60px; width: 100px">
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 10px"></div>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide.</p>
|
||||
|
||||
<div style="width: 150px">
|
||||
<div class="testcase" style="height: 35px; width: 100px;">
|
||||
<table>
|
||||
<td>
|
||||
<div style="width: 100px; height: 20px"></div>
|
||||
<div style="width: 100px; height: 10px; background-color: lightgreen"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 100px; height: 10px; background-color: pink"></div>
|
||||
<div style="width: 100px; height: 20px; background-color: yellow"></div>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p style="clear:left">The grey background should be 100px wide and 5px should
|
||||
stick out the bottom.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<p>You should see no red.</p>
|
||||
|
||||
<div style="height: 40px; background-color: green;"></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div.flex {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex">
|
||||
AAAAAAAAAAAAAAAAAAAA
|
||||
</div>
|
||||
<div class="flex">
|
||||
<b>bbbbbbbbbbbbbbbbbbbb</b>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div>cccccccccccccccccccc</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Shrink column</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that flexbox shrinks the column height of a flex item
|
||||
after applying a new style.">
|
||||
<style>
|
||||
body {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.small {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<script>
|
||||
onload = function() {
|
||||
document.body.offsetWidth;
|
||||
document.getElementById("target").classList.add("small");
|
||||
|
||||
checkLayout("body");
|
||||
};
|
||||
</script>
|
||||
|
||||
<body class="flexbox column">
|
||||
|
||||
<div class="flexbox column flex-one-one-auto">
|
||||
<div class="flex-one-one-auto green" data-expected-height="250" id="target">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div class="flex-one-one-auto blue" data-expected-height="350">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id=log></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: Stretch after sibling size is changed</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="This test ensures that flexbox stretches flex items
|
||||
after a flex item height is changed.">
|
||||
<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.getElementById("a").style.height = "20px";
|
||||
checkLayout(".flexbox");
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id=log></div>
|
||||
<div data-expected-width="100" data-expected-height="20" class="flexbox" style="width: 100px">
|
||||
<div id=a class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: blue; height: 30px;"></div>
|
||||
<div id=b class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Shrink stretched child on relayout</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
|
||||
<meta name="assert" content="This ensures that flexbox shrinks stretched children after removing a sibling, in various writing-modes and flows.">
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background: papayawhip;
|
||||
border: 1px solid midnightblue;
|
||||
margin: 1em;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 5px;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
background-color: lawngreen;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.horizontal-tb {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.largeitem {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<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 data-expected-height=10 data-expected-width=10></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
<div class="flexbox column">
|
||||
<div data-expected-height=10 data-expected-width=40></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
<div class="flexbox column">
|
||||
<div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="vertical-lr" data-expected-height=10 data-expected-width=10></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
<div class="flexbox column">
|
||||
<div class="vertical-lr" data-expected-height=10 data-expected-width=40></div>
|
||||
<div class="largeitem"></div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
var targets = document.getElementsByClassName('largeitem');
|
||||
for (var i = targets.length - 1; i >= 0; i--) {
|
||||
targets[i].remove();
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox: Stretch alignment for children with orthogonal flows</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
|
||||
<link rel="match" href="reference/stretching-orthogonal-flows-ref.html">
|
||||
<link href="support/flexbox.css" rel="stylesheet">
|
||||
<meta name="assert" content="The test ensures that the stretch alignment of flex items work
|
||||
similarly with both parallel and orthogonal flows.">
|
||||
|
||||
<p>You should see no red.</p>
|
||||
|
||||
<div class="flexbox column align-items-stretch" style="background-color: red;">
|
||||
<div style="background-color: green; height: 20px;"></div>
|
||||
<div style="writing-mode: vertical-lr; background-color: green; height: 20px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flexbox: text-overflow in flexbox</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
|
||||
<link rel="match" href="reference/text-overflow-on-flexbox-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that the text-overflow on flexbox should have no effect"/>
|
||||
<style>
|
||||
div.flex {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex">
|
||||
AAAAAAAAAAAAAAAAAAAA
|
||||
</div>
|
||||
<div class="flex">
|
||||
<b>bbbbbbbbbbbbbbbbbbbb</b>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div>cccccccccccccccccccc</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
DDDDDDDDDDDDDDDDDDDD<b>ee</b>FFFFFFFFFFFFFFFFFFFF
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-containers">
|
||||
<meta name="assert" content="This test passes if the renderer does not crash."/>
|
||||
<div style="display: flex;">
|
||||
<div style="max-width: 0px; overflow: scroll;"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue