mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
@ -1,6 +1,6 @@
|
|||
<!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>flexbox |css-box-justify-content</title>
|
||||
<link href="ava656094@gmail.com" rel="author" title="xiaoxia" />
|
||||
<link href="mailto:ava656094@gmail.com" rel="author" title="xiaoxia" />
|
||||
<style>
|
||||
#flexbox {
|
||||
background: green;
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 160px"/>
|
||||
|
@ -92,7 +92,7 @@
|
|||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 80px"/>
|
||||
|
@ -120,7 +120,7 @@
|
|||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 40px"/>
|
||||
|
@ -132,5 +132,47 @@
|
|||
<div class="c" style="margin-top: 40px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: calc(160px / 3)"/>
|
||||
<div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 30px"/>
|
||||
<div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-top: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"/>
|
||||
|
@ -95,7 +95,7 @@
|
|||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 80px"/>
|
||||
|
@ -123,7 +123,7 @@
|
|||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"/>
|
||||
|
@ -135,5 +135,47 @@
|
|||
<div class="c" style="margin-left: 40px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: calc(160px / 3)"/>
|
||||
<div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 30px"/>
|
||||
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -60,5 +60,8 @@
|
|||
<i>ital<br/>ic</i>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="lime">blk_1line</div><div class="yellow">blk<br/>2lines</div><div class="orange"><span class="super">super</span></div><div class="pink"><span class="sub">sub</span></div><div class="aqua big">big<br/>text<br/>3lines</div><div class="tan"><i>ital<br/>ic</i></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,51 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for behavior of the 'baseline' value for align-items and
|
||||
align-self when tested against content with an orthogonal writing-mode.
|
||||
--><html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<style type="text/css">
|
||||
@page { font: italic 8pt sans-serif; color: gray;
|
||||
margin: 7%;
|
||||
counter-increment: page;
|
||||
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||
@top-right { content: "Test flexbox-align-self-baseline-horiz-006-ref"; }
|
||||
@bottom-right { content: counter(page); }
|
||||
}
|
||||
</style>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.ortho { writing-mode: vertical-rl;
|
||||
width: 17px;
|
||||
height: 40px;
|
||||
float: left; }
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.start { align-self: flex-start; }
|
||||
.end { align-self: flex-end; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime ortho start">ortho</div><div class="yellow offset start">one line</div><div class="orange offset start">two<br/>lines</div><div class="pink offset start">offset</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="lime ortho end">ortho</div><div class="yellow offset end">one line</div><div class="orange offset end">two<br/>lines</div><div class="pink offset end">offset</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- Reference case for behavior of 'baseline' and 'last baseline' values
|
||||
for align-items and align-self.
|
||||
--><html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<style type="text/css">
|
||||
@page { font: italic 8pt sans-serif; color: gray;
|
||||
margin: 7%;
|
||||
counter-increment: page;
|
||||
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||
@top-right { content: "Test flexbox-align-self-baseline-horiz-007-ref"; }
|
||||
@bottom-right { content: counter(page); }
|
||||
}
|
||||
</style>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px dashed blue;
|
||||
font: 14px sans-serif;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.start { align-self: flex-start; }
|
||||
.end { align-self: flex-end; }
|
||||
|
||||
.offset { margin-top: 10px;
|
||||
margin-bottom: 3px; }
|
||||
|
||||
.lime { background: lime; }
|
||||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="lime offset start">one line (first)</div><div class="yellow offset end">one line (last)</div><div class="orange offset end">two<br/>lines and offset (last)</div><div class="pink offset start">offset (first)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -20,7 +20,7 @@
|
|||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
height: 200px;
|
||||
width: 560px;
|
||||
width: 640px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
@ -64,6 +64,12 @@
|
|||
.inherit {
|
||||
background: violet;
|
||||
}
|
||||
.left {
|
||||
background: tan;
|
||||
}
|
||||
.right {
|
||||
background: brown;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -89,6 +95,8 @@
|
|||
<div class="unspecified" style="margin-top: 95px">unspec</div>
|
||||
<div class="initial" style="margin-top: 95px">initial</div>
|
||||
<div class="inherit" style="margin-top: 190px">inherit</div>
|
||||
<div class="left">left</div>
|
||||
<div class="right">right</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -69,6 +69,14 @@
|
|||
background: violet;
|
||||
float: right;
|
||||
}
|
||||
.left {
|
||||
background: tan;
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
background: brown;
|
||||
float: right;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
|
@ -106,10 +114,12 @@
|
|||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since that last div is floated right, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
<div class="left">left</div>
|
||||
<div class="right">right</div>
|
||||
<!-- Since the last three divs are floated, the container doesn't include
|
||||
their heights by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
<span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -72,6 +72,14 @@
|
|||
background: violet;
|
||||
float: left;
|
||||
}
|
||||
.left {
|
||||
background: tan;
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
background: brown;
|
||||
float: right;
|
||||
}
|
||||
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
|
@ -109,10 +117,12 @@
|
|||
<div class="initial">initial</div>
|
||||
</div>
|
||||
<div class="inherit">inherit</div>
|
||||
<!-- Since that last div is floated right, the container doesn't include
|
||||
its height by default. So we add some invisible hacky text (of the
|
||||
<div class="left">left</div>
|
||||
<div class="right">right</div>
|
||||
<!-- Since the last three divs are floated, the container doesn't include
|
||||
their heights by default. So we add some invisible hacky text (of the
|
||||
same font) to make sure our container is tall enough. -->
|
||||
<span style="visibility:hidden">hacky text</span>
|
||||
<span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -3,9 +3,7 @@
|
|||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><!-- In this reference case, we have inline-blocks instead of inline
|
||||
flex containers. We stick an Ahem whitespace character in each
|
||||
inline-block, with a customized line-height to make the baseline
|
||||
end up at the bottom of the inline-block's content-box. --><html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
flex containers. Otherwise it's the same. --><html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
|
||||
<meta charset="utf-8" />
|
||||
|
@ -18,13 +16,6 @@
|
|||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
/* Each inline-block's baseline will be the baseline of the single Ahem
|
||||
character that it contains. We want to set up that char such that its
|
||||
baseline is at the bottom of the container's content box (since that's
|
||||
the corresponding flex container's baseline). So, we use a line-height
|
||||
of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
|
||||
bottom of the container's content-box -- awesome. */
|
||||
line-height: 20px;
|
||||
background: purple;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
|
@ -33,14 +24,12 @@
|
|||
</head>
|
||||
<body>
|
||||
A
|
||||
<!-- We have to include a character in the inline-blocks in order for them
|
||||
to baseline-align; otherwise, they align the bottom of their
|
||||
border-boxes. -->
|
||||
<div class="flexContainer"> </div>
|
||||
<div style="padding-bottom: 20px" class="flexContainer"> </div>
|
||||
<div style="padding: 10px" class="flexContainer"> </div>
|
||||
<div style="border-width: 3px" class="flexContainer"> </div>
|
||||
<div style="border-bottom-width: 4px" class="flexContainer"> </div>
|
||||
<div class="flexContainer"></div>
|
||||
<div style="padding-bottom: 20px" class="flexContainer"></div>
|
||||
<div style="padding: 10px" class="flexContainer"></div>
|
||||
<div style="border-width: 3px" class="flexContainer"></div>
|
||||
<div style="border-bottom-width: 4px" class="flexContainer"></div>
|
||||
<div style="border-bottom-width: 4px; margin: 2px" class="flexContainer"></div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,14 +7,22 @@
|
|||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
|
||||
<meta charset="utf-8" />
|
||||
<style>
|
||||
body {
|
||||
font: 14px serif;
|
||||
}
|
||||
.flexContainer {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: purple;
|
||||
background: pink;
|
||||
border: 0px dotted black;
|
||||
/* (Elements that want a border will set their border-width.) */
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -24,6 +32,11 @@
|
|||
<div style="padding: 10px" class="flexContainer">a</div>
|
||||
<div style="border-width: 3px" class="flexContainer">a</div>
|
||||
<div style="border-bottom-width: 4px" class="flexContainer">a</div>
|
||||
<div style="padding: 4px" class="flexContainer">
|
||||
<!-- (An abspos child shouldn't prevent us from getting our baseline from
|
||||
the first flex item, which happens to be the second child.) -->
|
||||
<div class="abs">abs</div>
|
||||
<div style="font: 26px serif">a</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
</div></body></html>
|
|
@ -28,6 +28,7 @@
|
|||
border-radius: 0;
|
||||
border: 1px dotted green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
@ -36,7 +37,7 @@
|
|||
<textarea/>
|
||||
</div>
|
||||
|
||||
<div class="flexbox" style="height: 24px">
|
||||
<div class="flexbox" style="height: 22px"><!-- height of textarea's border-box -->
|
||||
some words
|
||||
<textarea style="float:right"/>
|
||||
</div>
|
||||
|
|
|
@ -107,5 +107,38 @@
|
|||
<div class="a" style="margin-left: calc(40px / 6)"/><div class="b" style="margin-left: calc(40px / 3)"/><div class="c" style="margin-left: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: calc(140px / 3)"/><div class="b" style="margin-left: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 10px"/><div class="b" style="margin-left: 10px"/><div class="c" style="margin-left: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 140px"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -121,5 +121,38 @@
|
|||
<div class="a" style="margin-left: calc(8px / 6)"/><div style="margin-left: calc(8px / 3)"><div class="b"/></div><div style="margin-left: calc(8px / 3)"><div class="c"/></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 90px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: calc(118px / 3)"/><div style="margin-left: calc(118px / 3)"><div class="b"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 2px"/><div style="margin-left: 2px"><div class="b"/></div><div style="margin-left: 2px"><div class="c"/></div>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 180px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 118px"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -108,5 +108,38 @@
|
|||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="margin-left: 97.5px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 77.5px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 55px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="margin-left: 95px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 55px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 10px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -120,5 +120,38 @@
|
|||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="margin-left: 92.5px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 66.5px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 39px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="margin-left: 85px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: 33px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-left: -22px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -141,5 +141,56 @@
|
|||
<div class="c"/>
|
||||
<div style="flex: 0.5"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<!-- Center "a" here just as we did above in the "center" case. -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- As above with space-around, we'll use a flex container with invisible
|
||||
flexible items instead of packing space. -->
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="c"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="float:right; clear:right;">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="float:right; clear:right;">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="float:right; clear:right;">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
<div style="clear:right;"/>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -105,5 +105,38 @@
|
|||
<div class="a" style="margin-top: calc(40px / 6)"/><div class="b" style="margin-top: calc(40px / 3)"/><div class="c" style="margin-top: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: calc(140px / 3)"/><div class="b" style="margin-top: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 10px"/><div class="b" style="margin-top: 10px"/><div class="c" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -118,5 +118,38 @@
|
|||
<div class="a" style="margin-top: calc(8px / 6)"/><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 90px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: calc(118px / 3)"/><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 2px"/><div style="margin-top: 7px"><div class="b"/></div><div style="margin-top: 8px"><div class="c"/></div>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -106,5 +106,38 @@
|
|||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="margin-top: 97.5px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 77.5px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 55px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -117,5 +117,38 @@
|
|||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="margin-top: 92.5px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 66.5px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 39px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="margin-top: 100px">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -105,5 +105,38 @@
|
|||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
background: gray;
|
||||
max-height: 200px;
|
||||
}
|
||||
.panel {
|
||||
background: lightblue;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
border: 1px solid purple;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head><body><div class="container">
|
||||
<div class="panel">
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
|
||||
<style>
|
||||
.container {
|
||||
background: gray;
|
||||
height: 500px;
|
||||
width: 250px;
|
||||
}
|
||||
.panel {
|
||||
background: lightblue;
|
||||
border: 1px solid purple;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head><body><div class="container">
|
||||
<div class="panel">
|
||||
</div>
|
||||
<div class="panel">
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Test Reference</title>
|
||||
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
|
||||
<style>
|
||||
.container {
|
||||
background: gray;
|
||||
height: 80px;
|
||||
}
|
||||
.panel {
|
||||
background: lightblue;
|
||||
width: 150px;
|
||||
height: 80px;
|
||||
}
|
||||
.contents {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body><div class="container">
|
||||
<div class="panel">
|
||||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<img src="solidblue.png" style="margin-left: 30px"/><img src="solidblue.png" style="margin-left: 60px"/>
|
||||
<img src="support/solidblue.png" style="margin-left: 30px"/><img src="support/solidblue.png" style="margin-left: 60px"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,28 @@
|
|||
<!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 Flex-basis Test</title>
|
||||
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz" />
|
||||
<style type="text/css">
|
||||
.flex {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
background: green;
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
overflow: scroll;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,27 @@
|
|||
<!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 Flex-basis Test</title>
|
||||
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz" />
|
||||
<style type="text/css">
|
||||
.flex {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
background: green;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,19 @@
|
|||
<!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><meta charset="utf-8" />
|
||||
<title>Reference for negative margins</title>
|
||||
<link href="https://www.google.com/" rel="author" title="Google Inc." />
|
||||
<style>
|
||||
.container {
|
||||
width: 60px;
|
||||
height: 10px;
|
||||
background-color: green;
|
||||
border: 3px black solid;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
|
||||
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -1,8 +1,8 @@
|
|||
<!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 Reference: flex container layout lowest order with row-reverse direction</title>
|
||||
<link href="tmtysk@gmail.com" rel="author" title="tmtysk" />
|
||||
<link href="jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr." />
|
||||
<link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" />
|
||||
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr." />
|
||||
<style>
|
||||
#leftmost {
|
||||
float: right;
|
||||
|
|
|
@ -1,8 +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>PASS in body, black</title>
|
||||
<link href="mailto:me@gsnedders.com" rel="author" title="Geoffrey Sneddon" />
|
||||
<style>
|
||||
.PASS {color: black;}
|
||||
</style>
|
||||
</head><body class="PASS">PASS
|
||||
</body></html>
|
Binary file not shown.
After Width: | Height: | Size: 207 B |
Binary file not shown.
After Width: | Height: | Size: 202 B |
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
After Width: | Height: | Size: 5 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
Loading…
Add table
Add a link
Reference in a new issue