Skip to content

Commit

Permalink
removed console.log
Browse files Browse the repository at this point in the history 
last minor fixes to classes and tests

adding the equivalent missing classes...

added test for `align-content` flex property

start complementing tests

reintegrated align-content properties

removing flex properties not supported by IE and Safari...

Missing mixins related to align-items and align-content! Fixes Issue PolymerElements#67
  • Loading branch information
@MeTaNoV
MeTaNoV committed Feb 29, 2016
1 parent 05946f6 commit ac7e217
Show file tree
Hide file tree
Showing 4 changed files with 272 additions and 4 deletions.
45 changes: 45 additions & 0 deletions iron-flex-layout-classes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,12 @@
align-items: flex-end;
}

.layout.baseline {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}

/**
* Alignment in main axis.
*/
Expand Down Expand Up @@ -221,6 +227,45 @@
-webkit-align-self: stretch;
align-self: stretch;
}

.self-baseline {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};

/**
* multi-line alignment in main axis.
*/
.layout.start-aligned {
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
}

.layout.end-aligned {
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}

.layout.center-aligned {
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
}

.layout.between-aligned {
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
}

.layout.around-aligned {
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
}
</style>
</template>
</dom-module>
Expand Down
44 changes: 44 additions & 0 deletions iron-flex-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,12 @@
align-items: flex-end;
};

--layout-baseline: {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
};

/* alignment in main axis */

--layout-start-justified: {
Expand Down Expand Up @@ -281,6 +287,44 @@
align-self: stretch;
};

--layout-self-baseline: {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};

/* multi-line alignment in main axis */

--layout-start-aligned: {
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
};

--layout-end-aligned: {
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
};

--layout-center-aligned: {
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
};

--layout-between-aligned: {
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
};

--layout-around-aligned: {
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
};

/*******************************
Other Layout
*******************************/
Expand Down
93 changes: 91 additions & 2 deletions test/iron-flex-layout-classes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }
</style>
</head>
<body>
Expand Down Expand Up @@ -90,11 +92,23 @@
</div>
</template>
</test-fixture>

<test-fixture id="align-content">
<template>
<div class="container layout">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom
&& rect.left === left && rect.right === right;
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
Expand Down Expand Up @@ -304,6 +318,81 @@
});
});

suite('align-content', function() {
var container;

setup(function() {
container = fixture('align-content');
container.classList.add('small');
container.classList.add('tall');
container.classList.add('horizontal');
container.classList.add('flex');
container.classList.add('wrap');
});

test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});

test('layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});

test('layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});

test('layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});

test('layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});

test('layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});

suite('positioning', function() {
var container;

Expand Down
94 changes: 92 additions & 2 deletions test/iron-flex-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }

.horizontal { @apply(--layout-horizontal); }
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
Expand All @@ -72,6 +74,12 @@
.justified { @apply(--layout-justified); }
.around-justified { @apply(--layout-around-justified); }
.fit { @apply(--layout-fit); }
.start-aligned { @apply(--layout-start-aligned); }
.end-aligned { @apply(--layout-end-aligned); }
.center-aligned { @apply(--layout-center-aligned); }
.between-aligned { @apply(--layout-between-aligned); }
.around-aligned { @apply(--layout-around-aligned); }

</style>
</head>
<body>
Expand Down Expand Up @@ -110,11 +118,23 @@
</div>
</template>
</test-fixture>

<test-fixture id="align-content">
<template>
<div class="container small tall horizontal flex wrap">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom
&& rect.left === left && rect.right === right;
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
Expand Down Expand Up @@ -324,6 +344,76 @@
});
});

suite('align-content', function() {
var container;

setup(function() {
container = fixture('align-content');
});

test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});

test('--layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});

test('--layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});

test('--layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});

test('--layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});

test('--layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});

suite('positioning', function() {
var container;

Expand Down

0 comments on commit ac7e217

Please sign in to comment.