Skip to content
This repository was archived by the owner on Dec 18, 2018. It is now read-only.

Commit dcf3b4f

Browse files
rhauckrhauck
committed
Merge pull request #32 from micky2be/submissions/micky2be
[merge] Flexbox - stretch + animation
2 parents b96c4f3 + 7a9ba29 commit dcf3b4f

File tree

2 files changed

+70
-0
lines changed

2 files changed

+70
-0
lines changed

‎contributors/ttwf_tokyo/micky2be/submitted/css-flexbox-height-animation-stretch-ref.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>CSS Flexbox Test: Items stretch correctly while content is animating</title>
5+
<link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com">
6+
<style>
7+
@keyframes resize {
8+
0% {height: 100px;}
9+
100% {height: 50px;}
10+
}
11+
.test {
12+
height: 100px;
13+
width: 200px;
14+
background-color: green;
15+
animation: resize 500ms infinite alternate;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<p>The test passes if you keep seeing a green rectangle and no red.</p>
21+
<div class="test"></div>
22+
</body>
23+
</html>

‎contributors/ttwf_tokyo/micky2be/submitted/css-flexbox-height-animation-stretch.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>CSS Flexbox Test: Items stretch correctly while content is animating</title>
5+
<link rel="author" title="Micky Brunetti" href="mailto:micky2be@gmail.com">
6+
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-items-property">
7+
<link rel="match" href="css-flexbox-height-animation-stretch-ref.html"/>
8+
<meta name="flags" content="">
9+
<meta name="assert" content="Items should stretch vertically in all time">
10+
<style>
11+
@keyframes resize {
12+
0% {height: 100px;}
13+
100% {height: 50px;}
14+
}
15+
.container {
16+
display: flex;
17+
width: 200px;
18+
background-color: red;
19+
20+
}
21+
.item {
22+
background-color: green;
23+
width: 50px;
24+
25+
}
26+
.content {
27+
height: 50px;
28+
}
29+
.bigger.content {
30+
height: 100px;
31+
animation: resize 500ms infinite alternate;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<p>The test passes if you keep seeing a green rectangle and no red.</p>
37+
<div class="test">
38+
<div class="container">
39+
<div class="item"><div class="bigger content"></div></div>
40+
<div class="item"><div class="content"></div></div>
41+
<div class="item"><div class="content"></div></div>
42+
<div class="item"><div class="content"></div></div>
43+
</div>
44+
</div>
45+
</div>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)