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:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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">&#xA0;</div>
<div style="padding-bottom: 20px" class="flexContainer">&#xA0;</div>
<div style="padding: 10px" class="flexContainer">&#xA0;</div>
<div style="border-width: 3px" class="flexContainer">&#xA0;</div>
<div style="border-bottom-width: 4px" class="flexContainer">&#xA0;</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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 &gt; * {
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>

View file

@ -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 &gt; * {
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>

View file

@ -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>

View file

@ -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;

View file

@ -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