mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision 9d583db6a1a16763322dce912bf057490cd7b0c7
This commit is contained in:
WPT Sync Bot
parent
306e8ac5f9
commit
e116a19f0b
243 changed files with 6909 additions and 2244 deletions
|
|
@ -1,53 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#alignment" />
|
||||
<link rel="match" href="reference/flex-align-items-center-ref.html" />
|
||||
<meta name="assert" content="flex items center" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#container > div {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#fail-flag {
|
||||
position: absolute;
|
||||
top: 162px;
|
||||
left: 272px;
|
||||
width: 92px;
|
||||
height: 36px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items center</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<div id="fail-flag"></div>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flexibility" />
|
||||
<link rel="match" href="reference/flex-items-flexibility.html" />
|
||||
<meta name="assert" content="flex items flexibility" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
div {
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
flex: 2 0 auto;
|
||||
}
|
||||
#fail-flag {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: 150px;
|
||||
left: 183px;
|
||||
width: 254px;
|
||||
height: 40px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<div id="fail-flag"></div>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div id="flex"></div>
|
||||
<div></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | flexcontainer via generated content</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-container">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="match" href="flexbox_generated-flex-ref.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | flexcontainer via generated content</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-container">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="match" href="flexbox_generated-flex-ref.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | flexcontainer vs generated content</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-container">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
|
||||
<link rel="match" href="flexbox_generated-ref.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | margin: auto in overflow</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<style>
|
||||
div {
|
||||
background: blue;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
height: 8em;
|
||||
width: 32em;
|
||||
position: relative;
|
||||
}
|
||||
span {
|
||||
background: white;
|
||||
margin: 0;
|
||||
width: 12em;
|
||||
height: 6em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
span+span {
|
||||
background: yellow;
|
||||
width: 30em;
|
||||
left: 12em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<span>one</span>
|
||||
<span>two</span>
|
||||
</div>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | margin: auto in overflow</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins">
|
||||
<link rel="match" href="flexbox_margin-auto-overflow-2-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background: blue;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
height: 8em;
|
||||
width: 32em;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
span {
|
||||
background: white;
|
||||
margin: 1em auto;
|
||||
width: 12em;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
span+span {
|
||||
background: yellow;
|
||||
width: 30em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<span>one</span>
|
||||
<span>two</span>
|
||||
</div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | flexitem margin collapsing</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help"
|
||||
href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse">
|
||||
<link rel="match" href="flexbox_margin-collapse-ref.html">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
background: blue;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<p>filler</p>
|
||||
<p>filler</p>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<title>flexbox | margin-left: auto</title>
|
||||
<link rel="author" href="http://opera.com" title="Opera Software">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins">
|
||||
<link rel="match" href="flexbox_margin-left-ex-ref.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid." />
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: grid; position: relative;">
|
||||
<div style="display: flex; align-items: center; background: red">
|
||||
<div style="position: absolute; background: green">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for abspos item when containing block is root element." />
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: flex; align-items: center; background: red">
|
||||
<div style="position: absolute; background: green">
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and alignment is flex-end." />
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: grid; position: relative;">
|
||||
<div style="display: flex; align-items: flex-end; background: red">
|
||||
<div style="position: absolute; background: green">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and abspos item is also grid." />
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: grid; position: relative;">
|
||||
<div style="display: flex; align-items: center; background: red">
|
||||
<div style="position: absolute; background: green; display: grid">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for grid abspos item when containg block is regular block flow." />
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div style="display: flex; align-items: center; background: red">
|
||||
<div style="position: absolute; background: green; display: grid">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>abspos items</title>
|
||||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="bookmark" href="https://crbug.com/1066859">
|
||||
<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and weird abspos edge is due to justify-content, not alignment." />
|
||||
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="display: grid; position: relative;">
|
||||
<div style="display: flex; justify-content: flex-end; background: red">
|
||||
<div style="position: absolute; background: green">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
||||
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid.">
|
||||
<style>
|
||||
|
||||
.abspos {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
position: absolute;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.horizontal-tb {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.align-items-flex-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-items-flex-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.justify-content-flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-content-flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</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>
|
||||
<script>
|
||||
|
||||
var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
|
||||
var directions = ['ltr', 'rtl'];
|
||||
var justifyContents = ['flex-start', 'flex-end'];
|
||||
var alignItems = ['flex-start', 'flex-end'];
|
||||
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
|
||||
|
||||
// These were harvested from Firefox 76.0b4.
|
||||
var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50];
|
||||
|
||||
var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0];
|
||||
|
||||
var test_number = 1;
|
||||
|
||||
writingModes.forEach(function(flexWritingMode) {
|
||||
flexDirections.forEach(function(flexDirection) {
|
||||
directions.forEach(function(direction) {
|
||||
justifyContents.forEach(function(justifyContent) {
|
||||
alignItems.forEach(function(alignment) {
|
||||
var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment;
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.innerHTML = flexboxClassName + " .flexbox " + (test_number++);
|
||||
document.body.appendChild(title);
|
||||
|
||||
var flexbox = document.createElement('div');
|
||||
flexbox.className = 'flexbox ' + flexboxClassName;
|
||||
|
||||
var child = document.createElement('div');
|
||||
child.setAttribute('class', 'abspos');
|
||||
child.setAttribute("data-offset-x", x.shift());
|
||||
child.setAttribute("data-offset-y", y.shift());
|
||||
flexbox.appendChild(child);
|
||||
|
||||
var relpos = document.createElement('div');
|
||||
relpos.className = 'grid';
|
||||
relpos.appendChild(flexbox);
|
||||
|
||||
document.body.appendChild(relpos);
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#a {
|
||||
top: 148px;
|
||||
left: 239px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#b {
|
||||
top: 148px;
|
||||
left: 293px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
#c {
|
||||
top: 148px;
|
||||
left: 347px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items center</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
</section>
|
||||
<div id="a" style="position:absolute"></div>
|
||||
<div id="b" style="position:absolute"></div>
|
||||
<div id="c" style="position:absolute"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Flex-basis Test</title>
|
||||
<link rel="author" title="Chunsheng Zhang" href="mailto:zhangcs_423@163.com" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 166.5px;
|
||||
width: 253px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
<div id="flex"></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 217 B |
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex item with the 'visibility' property set to 'collapse' should not take up space in the main axis</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that a flex item with 'visibility: collapse' doesn't take up space in the main axis." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
}
|
||||
#flexbox, #collapse
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
#collapse
|
||||
{
|
||||
visibility: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div id="collapse"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: A flex item with the 'visibility' property set to 'collapse' should be large enough to fit the collapsed item</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that the cross size of a line of flex items containing an item with 'visbility: collapse' is large enough to fit the collapsed item." />
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background-color: green;
|
||||
width: 150px;
|
||||
}
|
||||
#flexbox, #collapse
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
#collapse
|
||||
{
|
||||
visibility: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<span></span>
|
||||
<div id="flexbox">
|
||||
<div></div>
|
||||
<div id="collapse"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue