+ An element with IronFitBehavior can be centered in
+ fitInto or positioned around a positionTarget
+
+
+
+
+
+
+
Target
+
+
+
Align
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
diff --git a/dashboard-ui/bower_components/iron-fit-behavior/demo/simple-fit.html b/dashboard-ui/bower_components/iron-fit-behavior/demo/simple-fit.html
index 52fe59e1b9..2283e526ae 100644
--- a/dashboard-ui/bower_components/iron-fit-behavior/demo/simple-fit.html
+++ b/dashboard-ui/bower_components/iron-fit-behavior/demo/simple-fit.html
@@ -10,23 +10,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-
diff --git a/dashboard-ui/bower_components/iron-fit-behavior/iron-fit-behavior.html b/dashboard-ui/bower_components/iron-fit-behavior/iron-fit-behavior.html
index 1705f31a20..c5387fc05c 100644
--- a/dashboard-ui/bower_components/iron-fit-behavior/iron-fit-behavior.html
+++ b/dashboard-ui/bower_components/iron-fit-behavior/iron-fit-behavior.html
@@ -11,9 +11,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
diff --git a/dashboard-ui/bower_components/iron-fit-behavior/test/iron-fit-behavior.html b/dashboard-ui/bower_components/iron-fit-behavior/test/iron-fit-behavior.html
index 46fdf4f7ec..b03fefdbee 100644
--- a/dashboard-ui/bower_components/iron-fit-behavior/test/iron-fit-behavior.html
+++ b/dashboard-ui/bower_components/iron-fit-behavior/test/iron-fit-behavior.html
@@ -39,16 +39,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
.sized-x {
- width: 200px;
+ width: 100px;
}
.sized-y {
- height: 200px;
- }
-
- .sized-xy {
- width: 200px;
- height: 200px;
+ height: 100px;
}
.positioned-left {
@@ -83,11 +78,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
margin: 20px;
}
+ .constrain {
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ width: 150px;
+ height: 150px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ }
+
+
@@ -113,16 +119,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-
-
-
-
- with-max-width, auto center/center
-
-
-
-
-
@@ -152,8 +148,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-
-
+
+
Auto center/center to parent element
@@ -188,6 +184,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
}
+ function intersects(r1, r2) {
+ return !(r2.left >= r1.right || r2.right <= r1.left || r2.top >= r1.bottom || r2.bottom <= r1.top);
+ }
+
suite('manual positioning', function() {
test('css positioned element is not re-positioned', function() {
@@ -380,7 +380,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('element centers in another element', function() {
var constrain = fixture('constrain-target');
- var el = Polymer.dom(constrain).querySelector('.el')
+ var el = Polymer.dom(constrain).querySelector('.el');
makeScrolling(el);
el.fitInto = constrain;
el.refit();
@@ -391,8 +391,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
test('element with max-width centers in another element', function() {
- var constrain = fixture('with-max-width');
- var el = Polymer.dom(constrain).querySelector('.el');
+ var constrain = document.querySelector('.constrain');
+ var el = fixture('sized-xy');
+ el.classList.add('with-max-width');
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
@@ -403,6 +404,324 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
+ suite('horizontal/vertical align', function() {
+ var parent, parentRect;
+ var el, elRect;
+ var fitRect = {
+ left: 0,
+ top: 0,
+ right: window.innerWidth,
+ bottom: window.innerHeight,
+ width: window.innerWidth,
+ height: window.innerHeight
+ };
+
+ setup(function() {
+ parent = fixture('constrain-target');
+ parentRect = parent.getBoundingClientRect();
+ el = Polymer.dom(parent).querySelector('.el');
+ elRect = el.getBoundingClientRect();
+ });
+
+ test('intersects works', function() {
+ var base = {top: 0, bottom: 1, left:0, right: 1};
+ assert.isTrue(intersects(base, base), 'intersects itself');
+ assert.isFalse(intersects(base, {top:1, bottom: 2, left: 0, right: 1}), 'no intersect on edge');
+ assert.isFalse(intersects(base, {top:-2, bottom: -1, left: 0, right: 1}), 'no intersect on edge (negative values)');
+ assert.isFalse(intersects(base, {top:2, bottom: 3, left: 0, right: 1}), 'no intersect');
+ });
+
+ suite('when verticalAlign is top', function() {
+ test('element is aligned to the positionTarget top', function() {
+ el.verticalAlign = 'top';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.top, parentRect.top, 'top ok');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget top without overlapping it', function() {
+ // Allow enough space on the parent's bottom & right.
+ parent.style.width = '10px';
+ parent.style.height = '10px';
+ parentRect = parent.getBoundingClientRect();
+ el.verticalAlign = 'top';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('verticalOffset is applied', function() {
+ el.verticalAlign = 'top';
+ el.verticalOffset = 10;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.top, parentRect.top + 10, 'top ok');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('max-height is updated', function() {
+ parent.style.top = '-10px';
+ el.verticalAlign = 'top';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.top, 0, 'top ok');
+ assert.isBelow(rect.height, elRect.height, 'height ok');
+ });
+
+ test('min-height is respected: element is hidden if does not have enough height', function() {
+ parent.style.top = '-10px';
+ el.verticalAlign = 'top';
+ el.style.minHeight = elRect.height + 'px';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, fitRect), 'not visible');
+ });
+ });
+
+ suite('when verticalAlign is bottom', function() {
+ test('element is aligned to the positionTarget bottom', function() {
+ el.verticalAlign = 'bottom';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.bottom, parentRect.bottom, 'bottom ok');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget bottom without overlapping it', function() {
+ el.verticalAlign = 'bottom';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('verticalOffset is applied', function() {
+ el.verticalAlign = 'bottom';
+ el.verticalOffset = 10;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.bottom, parentRect.bottom - 10, 'bottom ok');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('element max-height is updated', function() {
+ parent.style.top = (100 - parentRect.height) + 'px';
+ el.verticalAlign = 'bottom';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.bottom, 100, 'bottom ok');
+ assert.equal(rect.height, 100, 'height ok');
+ });
+
+ test('min-height is respected: element is hidden if does not have enough height', function() {
+ parent.style.top = (elRect.height - 10 - parentRect.height) + 'px';
+ el.verticalAlign = 'bottom';
+ el.style.minHeight = elRect.height + 'px';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, fitRect), 'not visible');
+ });
+ });
+
+ suite('when verticalAlign is auto', function() {
+ test('element is aligned to the positionTarget top', function() {
+ el.verticalAlign = 'auto';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.top, parentRect.top, 'auto aligned to top');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget top without overlapping it', function() {
+ // Allow enough space on the parent's bottom & right.
+ parent.style.width = '10px';
+ parent.style.height = '10px';
+ parentRect = parent.getBoundingClientRect();
+ el.verticalAlign = 'auto';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ });
+
+ test('bottom is preferred to top if it diminishes the cropped area', function() {
+ // This would cause a cropping of the element, so it should automatically
+ // align to the bottom to avoid it.
+ parent.style.top = '-10px';
+ parentRect = parent.getBoundingClientRect();
+ el.verticalAlign = 'auto';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.bottom, parentRect.bottom, 'auto aligned to bottom');
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ });
+
+ test('bottom is preferred to top if it diminishes the cropped area, without overlapping positionTarget', function() {
+ // This would cause a cropping of the element, so it should automatically
+ // align to the bottom to avoid it.
+ parent.style.top = '-10px';
+ parentRect = parent.getBoundingClientRect();
+ el.verticalAlign = 'auto';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.height, elRect.height, 'no cropping');
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ });
+ });
+
+ suite('when horizontalAlign is left', function() {
+ test('element is aligned to the positionTarget left', function() {
+ el.horizontalAlign = 'left';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.left, parentRect.left, 'left ok');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget left without overlapping it', function() {
+ // Make space at the parent's right.
+ parent.style.width = '10px';
+ parentRect = parent.getBoundingClientRect();
+ el.horizontalAlign = 'left';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('horizontalOffset is applied', function() {
+ el.horizontalAlign = 'left';
+ el.horizontalOffset = 10;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.left, parentRect.left + 10, 'left ok');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('element max-width is updated', function() {
+ parent.style.left = '-10px';
+ el.horizontalAlign = 'left';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.left, 0, 'left ok');
+ assert.isBelow(rect.width, elRect.width, 'width ok');
+ });
+
+ test('min-width is respected: element is hidden if does not have enough width', function() {
+ parent.style.left = '-10px';
+ el.style.minWidth = elRect.width + 'px';
+ el.horizontalAlign = 'left';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, fitRect), 'not visible');
+ });
+ });
+
+ suite('when horizontalAlign is right', function() {
+ test('element is aligned to the positionTarget right', function() {
+ el.horizontalAlign = 'right';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.right, parentRect.right, 'right ok');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget right without overlapping it', function() {
+ // Make space at the parent's left.
+ parent.style.left = elRect.width + 'px';
+ parentRect = parent.getBoundingClientRect();
+ el.horizontalAlign = 'right';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('horizontalOffset is applied', function() {
+ el.horizontalAlign = 'right';
+ el.horizontalOffset = 10;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.right, parentRect.right - 10, 'right ok');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('element max-width is updated', function() {
+ parent.style.left = (100 - parentRect.width) + 'px';
+ el.horizontalAlign = 'right';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.right, 100, 'right ok');
+ assert.equal(rect.width, 100, 'width ok');
+ });
+
+ test('min-width is respected: element is hidden if does not have enough width', function() {
+ parent.style.left = (elRect.width - 10 - parentRect.width) + 'px';
+ el.horizontalAlign = 'right';
+ el.style.minWidth = elRect.width + 'px';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.isFalse(intersects(rect, fitRect), 'not visible');
+ });
+
+ });
+
+ suite('when horizontalAlign is auto', function() {
+ test('element is aligned to the positionTarget left', function() {
+ el.horizontalAlign = 'auto';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.left, parentRect.left, 'auto aligned to left');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('element is aligned to the positionTarget left without overlapping positionTarget', function() {
+ // Make space at the parent's left.
+ parent.style.left = elRect.width + 'px';
+ parentRect = parent.getBoundingClientRect();
+ el.horizontalAlign = 'auto';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ });
+
+ test('right is preferred to left if it diminishes the cropped area', function() {
+ // This would cause a cropping of the element, so it should automatically
+ // align to the right to avoid it.
+ parent.style.left = '-10px';
+ parentRect = parent.getBoundingClientRect();
+ el.horizontalAlign = 'auto';
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.right, parentRect.right, 'auto aligned to right');
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ });
+
+ test('right is preferred to left if it diminishes the cropped area, without overlapping positionTarget', function() {
+ // Make space at the parent's right.
+ parent.style.width = '10px';
+ parentRect = parent.getBoundingClientRect();
+ el.horizontalAlign = 'auto';
+ el.noOverlap = true;
+ el.refit();
+ var rect = el.getBoundingClientRect();
+ assert.equal(rect.width, elRect.width, 'no cropping');
+ assert.isFalse(intersects(rect, parentRect), 'no overlap');
+ });
+
+ });
+
+ });
diff --git a/dashboard-ui/bower_components/iron-icon/.bower.json b/dashboard-ui/bower_components/iron-icon/.bower.json
index 9784e3a3b7..f0167baf13 100644
--- a/dashboard-ui/bower_components/iron-icon/.bower.json
+++ b/dashboard-ui/bower_components/iron-icon/.bower.json
@@ -32,14 +32,14 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
- "homepage": "https://github.com/PolymerElements/iron-icon",
+ "homepage": "https://github.com/polymerelements/iron-icon",
"_release": "1.0.8",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
},
- "_source": "git://github.com/PolymerElements/iron-icon.git",
+ "_source": "git://github.com/polymerelements/iron-icon.git",
"_target": "^1.0.0",
- "_originalSource": "PolymerElements/iron-icon"
+ "_originalSource": "polymerelements/iron-icon"
}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
index 729c00a4be..4536dd6f67 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
@@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
- "version": "1.6.5",
+ "version": "1.7.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@@ -35,11 +35,11 @@
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
- "_release": "1.6.5",
+ "_release": "1.7.0",
"_resolution": {
"type": "version",
- "tag": "v1.6.5",
- "commit": "19311400fe42fe3992fb8925dfd2582c63c67d82"
+ "tag": "v1.7.0",
+ "commit": "d61575162a40904914fa3528ba20bb531d098001"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/bower.json b/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
index 19310ccdf2..2765daa8c0 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
@@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
- "version": "1.6.5",
+ "version": "1.7.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-backdrop.html b/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-backdrop.html
index 43958008d1..afa5c638f0 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-backdrop.html
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-backdrop.html
@@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
-