Skip to content

Commit

Permalink
Update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathantneal
jonathantneal committed Jun 29, 2016
1 parent 1d6908f commit 12736ca
Show file tree
Hide file tree
Showing 12 changed files with 197 additions and 157 deletions.
2 changes: 1 addition & 1 deletion test/test.flexception.html → test/flex-within-flex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
<script src="shared/script.js"></script>
<link href="shared/style.css" rel="stylesheet">
<h1>test - flexbox within flexbox</h1>
<script>editableTest('flexception');</script>
<script>editableTest('flex-within-flex');</script>
8 changes: 8 additions & 0 deletions test/negative-margin.control.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!doctype html>
<title>control - negative margin</title>
<meta charset="utf-8">
<script src="../flexibility.js"></script>
<script src="shared/script.js"></script>
<link href="shared/style.css" rel="stylesheet">
<h1>control - negative margin</h1>
<script>control('negative-margin');</script>
8 changes: 8 additions & 0 deletions test/negative-margin.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!doctype html>
<title>test - negative margin</title>
<meta charset="utf-8">
<script src="../flexibility.js"></script>
<script src="shared/script.js"></script>
<link href="shared/style.css" rel="stylesheet">
<h1>test - negative margin</h1>
<script>test('negative-margin');</script>
82 changes: 41 additions & 41 deletions test/shared/flex-direction-column.html
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,72 @@
<section>
<h3>justify-content: space-around</h3>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 150px; justify-content: space-around;">
<span>a; item</span>
<span>a; item</span>
<span>a; item</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 150px; justify-content: space-around;">
<span class="item" class="item">a1</span>
<span class="item" class="item">a2</span>
<span class="item" class="item">a3</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 120px; justify-content: space-around;">
<span data-style="height: 30px;">b; height: 30px</span>
<span data-style="height: 30px;">b; height: 30px</span>
<span data-style="height: 30px;">b; height: 30px</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 120px; justify-content: space-around;">
<span class="item" class="item" data-style="height: 30px;">a1; height: 30px</span>
<span class="item" class="item" data-style="height: 30px;">a2; height: 30px</span>
<span class="item" class="item" data-style="height: 30px;">a3; height: 30px</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 120px; justify-content: space-around;">
<span data-style="flex-basis: 30px;">c; flex-basis: 30px</span>
<span data-style="flex-basis: 30px;">c; flex-basis: 30px</span>
<span data-style="flex-basis: 30px;">c; flex-basis: 30px</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 120px; justify-content: space-around;">
<span class="item" class="item" data-style="flex-basis: 30px;">a1; flex-basis: 30px</span>
<span class="item" class="item" data-style="flex-basis: 30px;">a2; flex-basis: 30px</span>
<span class="item" class="item" data-style="flex-basis: 30px;">a3; flex-basis: 30px</span>
</div>
</section>

<section>
<h3>flex-grow: 1</h3>
<div class="flex-grow-1" data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span>a; item</span>
<span data-style="flex-grow: 1;">a; flex-grow: 1</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span class="item">a1</span>
<span class="item" data-style="flex-grow: 1;">a2; flex-grow: 1</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span data-style="flex-grow: 1">b; flex-grow: 1</span>
<span data-style="flex-grow: 1">b; flex-grow: 1</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span class="item" data-style="flex-grow: 1">a1; flex-grow: 1</span>
<span class="item" data-style="flex-grow: 1">a2; flex-grow: 1</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span data-style="flex-grow: 1">c; flex-grow: 1</span>
<span data-style="flex-grow: 3">c; flex-grow: 3</span>
<span data-style="flex-grow: 1">c; flex-grow: 1</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 200px;">
<span class="item" data-style="flex-grow: 1">a1; flex-grow: 1</span>
<span class="item" data-style="flex-grow: 3">a2; flex-grow: 3</span>
<span class="item" data-style="flex-grow: 1">a3; flex-grow: 1</span>
</div>
</section>

<section>
<h3>margin: auto</h3>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span data-style="margin-top: auto; margin-bottom: auto;">a; margin: 0 auto</span>
<span data-style="margin-top: auto; margin-bottom: auto;">a; margin: 0 auto</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span class="item" data-style="margin-top: auto; margin-bottom: auto;">a1; margin: 0 auto</span>
<span class="item" data-style="margin-top: auto; margin-bottom: auto;">a2; margin: 0 auto</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span data-style="margin-top: auto; margin-bottom: auto;">b; margin: 0 auto</span>
<span>b; margin: 0</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span class="item" data-style="margin-top: auto; margin-bottom: auto;">a1; margin: 0 auto</span>
<span class="item">a2; margin: 0</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span>c; margin: 0</span>
<span data-style="margin-top: auto; margin-bottom: auto;">c; margin: 0 auto</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start;">
<span class="item">a1; margin: 0</span>
<span class="item" data-style="margin-top: auto; margin-bottom: auto;">a2; margin: 0 auto</span>
</div>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start; flex-wrap: wrap;">
<span data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a; margin: 0 auto</span>
<span data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a; margin: 0 auto</span>
<span data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a; margin: 0 auto</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 100px; justify-content: flex-start; flex-wrap: wrap;">
<span class="item" data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a1; margin: 0 auto</span>
<span class="item" data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a2; margin: 0 auto</span>
<span class="item" data-style="height: 40px; width: 150px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">a3; margin: 0 auto</span>
</div>
</section>

<section>
<h3>align-items: flex-end; justify-content: flex-end</h3>
<div data-style="display: flex; flex-direction: column; width: 300px; height: 80px; align-items: flex-end; justify-content: flex-end;">
<span>a; item</span>
<span>a; item</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 80px; align-items: flex-end; justify-content: flex-end;">
<span class="item">a1</span>
<span class="item">a2</span>
</div>
</section>

<section>
<h3>order: 1</h3>
<div data-style="display: flex; flex-direction: column; width: 600px; height: 100px;">
<span data-style="order: 1;">a; order: 1</span>
<span>a; order: 0</span>
<div class="wrap" data-style="display: flex; flex-direction: column; width: 600px; height: 100px;">
<span class="item" data-style="order: 1;">a1; order: 1</span>
<span class="item">a2; order: 0</span>
</div>
</section>
130 changes: 65 additions & 65 deletions test/shared/flex-direction-row.html
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,94 @@
<section>
<h3>justify-content: space-around</h3>
<div data-style="display: flex; width: 600px; justify-content: space-around;">
<span>item</span>
<span>item</span>
<span>item</span>
</div>
<div data-style="display: flex; width: 600px; justify-content: space-around;">
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
</div>
<div data-style="display: flex; width: 600px; justify-content: space-around;">
<span data-style="flex-basis: 250px">flex-basis: 250px</span>
<span data-style="flex-basis: 250px">flex-basis: 250px</span>
<span data-style="flex-basis: 250px">flex-basis: 250px</span>
</div>
<div data-style="display: flex; width: 600px; height: 100px; justify-content: space-around;">
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
</div>
<div data-style="display: flex; width: 600px; height: 100px; flex-wrap: wrap; justify-content: space-around;">
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
</div>
<div data-style="display: flex; width: 600px; height: 100px; align-content: space-around; flex-wrap: wrap; justify-content: space-around;">
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
</div>
<div data-style="display: flex; width: 600px; height: 100px; align-content: flex-end; align-items: center; flex-wrap: wrap; justify-content: space-around;">
<span data-style="width: 250px; height: 30px">width: 250px; height: 30px</span>
<span data-style="width: 250px">width: 250px</span>
<span data-style="width: 250px">width: 250px</span>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: space-around;">
<span class="item">a1</span>
<span class="item">a3</span>
<span class="item">a3</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: space-around;">
<span class="item" data-style="width: 250px">a1; width: 250px</span>
<span class="item" data-style="width: 250px">a2; width: 250px</span>
<span class="item" data-style="width: 250px">a3; width: 250px</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: space-around;">
<span class="item" data-style="flex-basis: 250px">a1; flex-basis: 250px</span>
<span class="item" data-style="flex-basis: 250px">a2; flex-basis: 250px</span>
<span class="item" data-style="flex-basis: 250px">a3; flex-basis: 250px</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; height: 100px; justify-content: space-around;">
<span class="item" data-style="width: 250px">a1; width: 250px</span>
<span class="item" data-style="width: 250px">a2; width: 250px</span>
<span class="item" data-style="width: 250px">a3; width: 250px</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; height: 100px; flex-wrap: wrap; justify-content: space-around;">
<span class="item" data-style="width: 250px">a1; width: 250px</span>
<span class="item" data-style="width: 250px">a2; width: 250px</span>
<span class="item" data-style="width: 250px">a3; width: 250px</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; height: 100px; align-content: space-around; flex-wrap: wrap; justify-content: space-around;">
<span class="item" data-style="width: 250px">width: 250px</span>
<span class="item" data-style="width: 250px">width: 250px</span>
<span class="item" data-style="width: 250px">width: 250px</span>
</div>
<div class="wrap" data-style="display: flex; width: 600px; height: 100px; align-content: flex-end; align-items: center; flex-wrap: wrap; justify-content: space-around;">
<span class="item" data-style="width: 250px; height: 30px">width: 250px; height: 30px</span>
<span class="item" data-style="width: 250px">width: 250px</span>
<span class="item" data-style="width: 250px">width: 250px</span>
</div>
</section>

<section>
<h3>flex-grow: 1</h3>
<div data-style="display: flex; width: 600px;">
<span>item</span>
<span data-style="flex-grow: 1">flex-grow: 1</span>
<div class="wrap" data-style="display: flex; width: 600px;">
<span class="item">item</span>
<span class="item" data-style="flex-grow: 1">flex-grow: 1</span>
</div>
<div data-style="display: flex; width: 600px;">
<span data-style="flex-grow: 1">flex-grow: 1</span>
<span data-style="flex-grow: 1">flex-grow: 1</span>
<div class="wrap" data-style="display: flex; width: 600px;">
<span class="item" data-style="flex-grow: 1">flex-grow: 1</span>
<span class="item" data-style="flex-grow: 1">flex-grow: 1</span>
</div>
<div data-style="display: flex; width: 600px;">
<span data-style="flex-grow: 1">flex-grow: 1</span>
<span data-style="flex-grow: 3">flex-grow: 3</span>
<span data-style="flex-grow: 1">flex-grow: 1</span>
<div class="wrap" data-style="display: flex; width: 600px;">
<span class="item" data-style="flex-grow: 1">flex-grow: 1</span>
<span class="item" data-style="flex-grow: 3">flex-grow: 3</span>
<span class="item" data-style="flex-grow: 1">flex-grow: 1</span>
</div>
</section>

<section>
<h3>margin: auto</h3>
<div data-style="display: flex; width: 600px; justify-content: flex-start;">
<span data-style="margin-left: auto;margin-right: auto;">margin: 0 auto</span>
<span data-style="margin-left: auto;margin-right: auto;">margin: 0 auto</span>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: flex-start;">
<span class="item" data-style="margin-left: auto;margin-right: auto;">margin: 0 auto</span>
<span class="item" data-style="margin-left: auto;margin-right: auto;">margin: 0 auto</span>
</div>
<div data-style="display: flex; width: 600px; justify-content: flex-start;">
<span data-style="margin-left: auto; margin-right: auto;">margin: 0 auto</span>
<span>margin: 0</span>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: flex-start;">
<span class="item" data-style="margin-left: auto; margin-right: auto;">margin: 0 auto</span>
<span class="item">margin: 0</span>
</div>
<div data-style="display: flex; width: 600px; justify-content: flex-start;">
<span>margin: 0</span>
<span data-style="margin-left: auto; margin-right: auto;">margin: 0 auto</span>
<div class="wrap" data-style="display: flex; width: 600px; justify-content: flex-start;">
<span class="item">margin: 0</span>
<span class="item" data-style="margin-left: auto; margin-right: auto;">margin: 0 auto</span>
</div>
<div data-style="display: flex; width: 600px; height: 200px; justify-content: flex-start; flex-wrap: wrap;">
<span data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<div class="wrap" data-style="display: flex; width: 600px; height: 200px; justify-content: flex-start; flex-wrap: wrap;">
<span class="item" data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span class="item" data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span class="item" data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span class="item" data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
<span class="item" data-style="height: 60px; width: 160px; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto;">margin: auto</span>
</div>
</section>

<section>
<h3>align-items: flex-end; justify-content: flex-end</h3>
<div data-style="display: flex; width: 600px; height: 80px; align-items: flex-end; justify-content: flex-end;">
<span>item</span>
<span>item</span>
<div class="wrap" data-style="display: flex; width: 600px; height: 80px; align-items: flex-end; justify-content: flex-end;">
<span class="item">item</span>
<span class="item">item</span>
</div>
</section>

<section>
<h3>order: 1</h3>
<div data-style="display: flex; width: 600px">
<span data-style="order: 1;">order: 1</span>
<span>order: 0</span>
<div class="wrap" data-style="display: flex; width: 600px">
<span class="item" data-style="order: 1;">order: 1</span>
<span class="item">order: 0</span>
</div>
</section>
17 changes: 17 additions & 0 deletions test/shared/flex-within-flex.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<section>
<h3>display: flex;</h3>
<div class="wrap" id="container" data-style="display: flex; align-items: flex-end; justify-content: space-around; width: 500px; padding: 20px;">
<div class="wrap" data-style="display: flex; flex-direction: column;">
<span class="item">a1</span>
</div>
<div class="wrap" data-style="display: flex; flex-direction: column;">
<span class="item">b1</span>
<span class="item">b2</span>
</div>
<div class="wrap" data-style="display: flex; flex-direction: column;">
<span class="item">c1</span>
<span class="item">c2</span>
<span class="item">c3</span>
</div>
</div>
</section>
17 changes: 0 additions & 17 deletions test/shared/flexception.html
View file

This file was deleted.

16 changes: 16 additions & 0 deletions test/shared/negative-margin.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<section>
<h3>justify-content: space-around</h3>
<div class="wrap" style="width: 600px;">
<div data-style="display: flex; justify-content: space-around; margin-left: -10px;">
<div data-style="flex-grow: 1; padding-left: 10px;">
<div class="item">a1</div>
</div>
<div data-style="flex-grow: 1; padding-left: 10px;">
<div class="item">a2</div>
</div>
<div data-style="flex-grow: 1; padding-left: 10px;">
<div class="item">a3</div>
</div>
</div>
</div>
</section>
4 changes: 2 additions & 2 deletions test/shared/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function editableTest(name) {

function onresize() {
window.onresize = null;
textarea.onresize = null;
textarea.onkeyup = null;

if (!onresizeTimeout) {
onresizeTimeout = setTimeout(function () {
Expand All @@ -123,7 +123,7 @@ function editableTest(name) {
} catch (error) {}

window.onresize = onresize;
textarea.onresize = onresize;
textarea.onkeyup = onresize;
}, 67);
}
}
Expand Down
Loading

0 comments on commit 12736ca

Please sign in to comment.