update components

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.1.30",
+  "version": "1.1.31",
-  "_release": "1.1.30",
+  "_release": "1.1.31",
   "_resolution": {
     "type": "version",
-    "tag": "1.1.30",
+    "tag": "1.1.31",
-    "commit": "25a55da9b6507b8e0b81dbde2c69f21af98abce8"
+    "commit": "23e283143ce4f084d28a5af10048d53caa23e9be"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.1.5",

dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js

@@ -84,6 +84,62 @@ define(['browser'], function (browser) {
         return false;
     }
 
+    function testCanPlayMkv() {
+
+        // Unfortunately there's no real way to detect mkv support
+        if (browser.chrome) {
+            return true;
+        }
+
+        var userAgent = navigator.userAgent.toLowerCase();
+
+        if (userAgent.indexOf('samsungbrowser') != -1) {
+            return true;
+        }
+
+        return false;
+    }
+
+    function testCanPlayTs() {
+
+        // Unfortunately there's no real way to detect mkv support
+        var userAgent = navigator.userAgent.toLowerCase();
+
+        if (userAgent.indexOf('webos') != -1) {
+            return true;
+        }
+
+        if (userAgent.indexOf('samsungbrowser') != -1) {
+            return true;
+        }
+
+        return false;
+    }
+
+    function testCanPlayWmv() {
+
+        // Unfortunately there's no real way to detect mkv support
+        var userAgent = navigator.userAgent.toLowerCase();
+
+        if (userAgent.indexOf('webos') != -1) {
+            return true;
+        }
+
+        return false;
+    }
+
+    function testCanPlayM2ts() {
+
+        // Unfortunately there's no real way to detect mkv support
+        var userAgent = navigator.userAgent.toLowerCase();
+
+        if (userAgent.indexOf('webos') != -1) {
+            return true;
+        }
+
+        return false;
+    }
+
     return function () {
 
         var bitrateSetting = 100000000;
@@ -91,8 +147,9 @@ define(['browser'], function (browser) {
         var videoTestElement = document.createElement('video');
 
         var canPlayWebm = videoTestElement.canPlayType('video/webm').replace(/no/, '');
-        // No real way to detect this, but it's too good to pass up
+
-        var canPlayMkv = browser.chrome;
+        var canPlayMkv = testCanPlayMkv();
+        var canPlayTs = testCanPlayTs();
 
         var profile = {};
 
@@ -121,8 +178,11 @@ define(['browser'], function (browser) {
                 }
             }
         }
-        if (canPlayMkv) {
+
+        var mp3Added = false;
+        if (canPlayMkv || canPlayTs) {
             if (supportsMp3VideoAudio) {
+                mp3Added = true;
                 videoAudioCodecs.push('mp3');
                 hlsVideoAudioCodecs.push('mp3');
             }
@@ -131,12 +191,10 @@ define(['browser'], function (browser) {
             videoAudioCodecs.push('aac');
             hlsVideoAudioCodecs.push('aac');
         }
-        if (!canPlayMkv) {
+        if (!mp3Added && supportsMp3VideoAudio) {
-            if (supportsMp3VideoAudio) {
             videoAudioCodecs.push('mp3');
             hlsVideoAudioCodecs.push('mp3');
         }
-        }
 
         if (canPlayH264()) {
             profile.DirectPlayProfiles.push({
@@ -156,6 +214,32 @@ define(['browser'], function (browser) {
             });
         }
 
+        if (canPlayTs) {
+            profile.DirectPlayProfiles.push({
+                Container: 'ts,mpegts',
+                Type: 'Video',
+                VideoCodec: 'h264',
+                AudioCodec: videoAudioCodecs.join(',')
+            });
+        }
+
+        if (testCanPlayWmv()) {
+            profile.DirectPlayProfiles.push({
+                Container: 'wmv',
+                Type: 'Video',
+                VideoCodec: 'h264'
+            });
+        }
+
+        if (testCanPlayM2ts()) {
+            profile.DirectPlayProfiles.push({
+                Container: 'm2ts',
+                Type: 'Video',
+                VideoCodec: 'h264',
+                AudioCodec: videoAudioCodecs.join(',')
+            });
+        }
+
         ['opus', 'mp3', 'aac', 'flac', 'webma'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
 
             profile.DirectPlayProfiles.push({
@@ -212,6 +296,17 @@ define(['browser'], function (browser) {
             });
         }
 
+        if (canPlayTs) {
+            profile.TranscodingProfiles.push({
+                Container: 'ts',
+                Type: 'Video',
+                AudioCodec: videoAudioCodecs.join(','),
+                VideoCodec: 'h264',
+                Context: 'Streaming',
+                CopyTimestamps: true
+            });
+        }
+
         if (canPlayHls()) {
             profile.TranscodingProfiles.push({
                 Container: 'ts',

dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js

@@ -264,7 +264,6 @@ define(['paperdialoghelper', 'inputManager', 'connectionManager', 'browser', 'cs
             // If not resizing, get the original image
             if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
                 options.quality = 100;
-                options.format = 'jpg';
             }
 
             if (item.BackdropImageTags && item.BackdropImageTags.length) {

dashboard-ui/bower_components/hls.js/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",
@@ -16,11 +16,11 @@
     "test",
     "tests"
   ],
-  "_release": "0.5.9",
+  "_release": "0.5.10",
   "_resolution": {
     "type": "version",
-    "tag": "v0.5.9",
+    "tag": "v0.5.10",
-    "commit": "b1579c58d1893c0b64ec7cd59973fea0581c3256"
+    "commit": "ec25b37b27690ccdf0c515f9c992fa9e06f48988"
   },
   "_source": "git://github.com/dailymotion/hls.js.git",
   "_target": "~0.5.7",

dashboard-ui/bower_components/hls.js/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hls.js/dist/hls.js

@@ -2076,7 +2076,8 @@ var StreamController = function (_EventHandler) {
         // include levelCodec in audio and video tracks
         track = tracks.audio;
         if (track) {
-          var audioCodec = this.levels[this.level].audioCodec;
+          var audioCodec = this.levels[this.level].audioCodec,
+              ua = navigator.userAgent.toLowerCase();
           if (audioCodec && this.audioCodecSwap) {
             _logger.logger.log('swapping playlist audio codec');
             if (audioCodec.indexOf('mp4a.40.5') !== -1) {
@@ -2087,19 +2088,21 @@ var StreamController = function (_EventHandler) {
           }
           // in case AAC and HE-AAC audio codecs are signalled in manifest
           // force HE-AAC , as it seems that most browsers prefers that way,
-          // except for mono streams OR on Android OR on FF
+          // except for mono streams OR on FF
           // these conditions might need to be reviewed ...
           if (this.audioCodecSwitch) {
-            var ua = navigator.userAgent.toLowerCase();
             // don't force HE-AAC if mono stream
             if (track.metadata.channelCount !== 1 &&
-            // don't force HE-AAC if android
-            ua.indexOf('android') === -1 &&
             // don't force HE-AAC if firefox
             ua.indexOf('firefox') === -1) {
               audioCodec = 'mp4a.40.5';
             }
           }
+          // HE-AAC is broken on Android, always signal audio codec as AAC even if variant manifest states otherwise
+          if (ua.indexOf('android') !== -1) {
+            audioCodec = 'mp4a.40.2';
+            _logger.logger.log('Android: force audio codec to' + audioCodec);
+          }
           track.levelCodec = audioCodec;
         }
         track = tracks.video;

dashboard-ui/bower_components/hls.js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hls.js/src/controller/stream-controller.js

@@ -847,7 +847,8 @@ class StreamController extends EventHandler {
       // include levelCodec in audio and video tracks
       track = tracks.audio;
       if(track) {
-        var audioCodec = this.levels[this.level].audioCodec;
+        var audioCodec = this.levels[this.level].audioCodec,
+            ua = navigator.userAgent.toLowerCase();
         if(audioCodec && this.audioCodecSwap) {
           logger.log('swapping playlist audio codec');
           if(audioCodec.indexOf('mp4a.40.5') !==-1) {
@@ -858,19 +859,21 @@ class StreamController extends EventHandler {
         }
         // in case AAC and HE-AAC audio codecs are signalled in manifest
         // force HE-AAC , as it seems that most browsers prefers that way,
-        // except for mono streams OR on Android OR on FF
+        // except for mono streams OR on FF
         // these conditions might need to be reviewed ...
         if (this.audioCodecSwitch) {
-            var ua = navigator.userAgent.toLowerCase();
             // don't force HE-AAC if mono stream
            if(track.metadata.channelCount !== 1 &&
-            // don't force HE-AAC if android
-            ua.indexOf('android') === -1 &&
             // don't force HE-AAC if firefox
             ua.indexOf('firefox') === -1) {
               audioCodec = 'mp4a.40.5';
           }
         }
+        // HE-AAC is broken on Android, always signal audio codec as AAC even if variant manifest states otherwise
+        if(ua.indexOf('android') !== -1) {
+          audioCodec = 'mp4a.40.2';
+          logger.log(`Android: force audio codec to` + audioCodec);
+        }
         track.levelCodec = audioCodec;
       }
       track = tracks.video;

dashboard-ui/bower_components/iron-flex-layout/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",
@@ -29,11 +29,11 @@
   },
   "ignore": [],
   "homepage": "https://github.com/PolymerElements/iron-flex-layout",
-  "_release": "1.3.0",
+  "_release": "1.3.1",
   "_resolution": {
     "type": "version",
-    "tag": "v1.3.0",
+    "tag": "v1.3.1",
-    "commit": "434224c8cf63cb4bb1b66edb0dc58e4484f7c5b2"
+    "commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717"
   },
   "_source": "git://github.com/PolymerElements/iron-flex-layout.git",
   "_target": "^1.0.0",

dashboard-ui/bower_components/iron-flex-layout/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",

dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout-classes.html

@@ -15,7 +15,7 @@ You must include this file in every element that needs to use them.
 Sample use:
 
     <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-    <style is="custom-style" include="iron-flex iron-flex-alignment">
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
 
     <div class="layout horizontal layout-start">
       <div>cross axis start alignment</div>
@@ -161,6 +161,12 @@ The following imports are available:
         align-items: flex-end;
       }
 
+      .layout.baseline {
+        -ms-flex-align: baseline;
+        -webkit-align-items: baseline;
+        align-items: baseline;
+      }
+
       /**
        * Alignment in main axis.
        */
@@ -221,6 +227,50 @@ The following imports are available:
         -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-flex-line-pack: start;  /* IE10 */
+        -ms-align-content: flex-start;
+        -webkit-align-content: flex-start;
+        align-content: flex-start;
+      }
+
+      .layout.end-aligned {
+        -ms-flex-line-pack: end;  /* IE10 */
+        -ms-align-content: flex-end;
+        -webkit-align-content: flex-end;
+        align-content: flex-end;
+      }
+
+      .layout.center-aligned {
+        -ms-flex-line-pack: center;  /* IE10 */
+        -ms-align-content: center;
+        -webkit-align-content: center;
+        align-content: center;
+      }
+
+      .layout.between-aligned {
+        -ms-flex-line-pack: justify;  /* IE10 */
+        -ms-align-content: space-between;
+        -webkit-align-content: space-between;
+        align-content: space-between;
+      }
+
+      .layout.around-aligned {
+        -ms-flex-line-pack: distribute;  /* IE10 */
+        -ms-align-content: space-around;
+        -webkit-align-content: space-around;
+        align-content: space-around;
+      }
     </style>
   </template>
 </dom-module>

dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout.html

@@ -23,7 +23,7 @@ in every element that needs to use them.
   Sample use:
 
       <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-    <style is="custom-style" include="iron-flex iron-flex-alignment">
+      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
 
       <div class="layout horizontal layout-start">
         <div>cross axis start alignment</div>
@@ -218,6 +218,12 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
       align-items: flex-end;
     };
 
+    --layout-baseline: {
+      -ms-flex-align: baseline;
+      -webkit-align-items: baseline;
+      align-items: baseline;
+    };
+
     /* alignment in main axis */
 
     --layout-start-justified: {
@@ -281,6 +287,49 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
       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-flex-line-pack: start;  /* IE10 */
+      -ms-align-content: flex-start;
+      -webkit-align-content: flex-start;
+      align-content: flex-start;
+    };
+
+    --layout-end-aligned: {
+      -ms-flex-line-pack: end;  /* IE10 */
+      -ms-align-content: flex-end;
+      -webkit-align-content: flex-end;
+      align-content: flex-end;
+    };
+
+    --layout-center-aligned: {
+      -ms-flex-line-pack: center;  /* IE10 */
+      -ms-align-content: center;
+      -webkit-align-content: center;
+      align-content: center;
+    };
+
+    --layout-between-aligned: {
+      -ms-flex-line-pack: justify;  /* IE10 */
+      -ms-align-content: space-between;
+      -webkit-align-content: space-between;
+      align-content: space-between;
+    };
+
+    --layout-around-aligned: {
+      -ms-flex-line-pack: distribute;  /* IE10 */
+      -ms-align-content: space-around;
+      -webkit-align-content: space-around;
+      align-content: space-around;
+    };
+
     /*******************************
               Other Layout
     *******************************/

dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout-classes.html

@@ -52,6 +52,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       #c1 { background-color: #E91E63; }
       #c2 { background-color: #03A9F4; }
       #c3 { background-color: #CDDC39; }
+      #c4 { background-color: #03A9F4; }
+      #c5 { background-color: #E91E63; }
     </style>
   </head>
   <body>
@@ -90,11 +92,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         </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
+        return rect.top === top && rect.bottom === bottom && 
-            && rect.left === left && rect.right === right;
+               rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {
         var container;
@@ -304,6 +318,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
       });
 
+      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;
 

dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout.html

@@ -53,6 +53,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       #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); }
@@ -72,6 +74,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       .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>
@@ -110,11 +118,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         </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
+        return rect.top === top && rect.bottom === bottom && 
-            && rect.left === left && rect.right === right;
+               rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {
         var container;
@@ -324,6 +344,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
       });
 
+      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;