// Container Syntax
// ================

@include test-module('Container Syntax') {

  // container [mixin]
  // -----------------

  @include output-test('container') {
    @include layout(80% 7 .5);
    @include assert-setup(default-box);
    @include assert-output(
      'Containers should have 80% max-width and show a 7 .5 grid.'
    ) {
      .test { @include container(show-columns); }
      .expect {
        @include susy-clearfix;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 66.66667%, transparent 66.66667%);
        background-size: 15%;
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }

    @include layout((1 2 3 2 1) (4em 1em) show-columns);
    @include assert-setup(border-box);
    @include assert-output(
      'Containers should have 40em max-width, border-box-sizing, and show a (1 2 3 2 1) (4em 2em) grid, flush left.'
    ) {
      .test { @include container(auto left border-box); }
      .expect {
        @include output((box-sizing: border-box));
        @include susy-clearfix;
        max-width: 40em;
        margin-left: 0;
        margin-right: auto;
        background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 10%, transparent 10%, transparent 12.5%, rgba(102, 102, 255, 0.25) 12.5%, rgba(179, 179, 255, 0.25) 32.5%, transparent 32.5%, transparent 35%, rgba(102, 102, 255, 0.25) 35%, rgba(179, 179, 255, 0.25) 65%, transparent 65%, transparent 67.5%, rgba(102, 102, 255, 0.25) 67.5%, rgba(179, 179, 255, 0.25) 87.5%, transparent 87.5%, transparent 90%, rgba(102, 102, 255, 0.25) 90%, rgba(179, 179, 255, 0.25));
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }
  }

  // container [function]
  // --------------------

  @include test('[function] container') {

    // explicit
    $grid: 960px 12 .25 left static;
    $width: container($grid);
    $expect: 960px;

    @include assert-equal($width, $expect,
      'The container-width of "#{$grid}" should be #{$expect}');

    // calculated
    $grid: 12 (6em 1em);
    $width: container($grid);
    $expect: 83em;

    @include assert-equal($width, $expect,
      'The container-width of "#{$grid}" should be #{$expect}');

    // default
    $grid: (1 3 4 2 1) .25;
    $width: container($grid);
    $expect: 100%;

    @include assert-equal($width, $expect,
      'The container-width of "#{$grid}" should be #{$expect}');

    @include with-layout(960px 12 .25) {
      $width: container(isolate);
      $expect: 960px;
      @include assert-equal($width, $expect,
        'Omitted grid-widths should still be respected.');

      $width: container(auto 10);
      $expect: 100%;
      @include assert-equal($width, $expect,
        'Auto container-width should override existing grid.');
    }

  }

  // get-container-width
  // -------------------

  @include test('[function] get-container-width') {

    // explicit
    $test: get-container-width(80em);
    $expect: 80em;
    @include assert-equal($test, $expect,
      'An explicit container width should be returned without changes.');

    // no info
    $map: (
      container: false,
      column-width: false,
    );
    $test: get-container-width($map);
    $expect: 100%;
    @include assert-equal($test, $expect,
      'An empty container value should return 100%.');

    // not enough info
    $map: (
      container: auto,
      column-width: false,
    );
    $test: get-container-width($map);
    $expect: 100%;
    @include assert-equal($test, $expect,
      'An auto container with no specified widths should return 100%.');

    // calculated (outside-gutters)
    $map: (
      container: auto,
      column-width: 4em,
      columns: 7,
      gutters: .5,
      gutter-position: after,
    );
    $test: get-container-width($map);
    $expect: 40em;
    @include assert-equal($test, $expect,
      'Returns narrow container for outside gutters.');

    // calculated (inside-gutters)
    $map: (
      container: auto,
      column-width: 4em,
      columns: 7,
      gutters: .5,
      gutter-position: inside,
    );
    $test: get-container-width($map);
    $expect: 42em;
    @include assert-equal($test, $expect,
      'Returns wide container for inside gutters.');

    // calculated (split-gutters)
    $map: (
      container: auto,
      column-width: 4em,
      columns: 7,
      gutters: .5,
      gutter-position: split,
    );
    $test: get-container-width($map);
    $expect: 42em;
    @include assert-equal($test, $expect,
      'Returns wide container for split gutters.');
  }

  // Parse Container Position
  // ------------------------

  @include test('[function] parse-container-position()') {
    // null
    $pos: null;
    $test: parse-container-position($pos);
    $expect: null null;
    @include assert-equal($test, $expect,
      'A null value should return null for both sides.');

    // 2-part list
    $pos: 10% auto;
    $test: parse-container-position($pos);
    @include assert-equal($test, $pos,
      'A 2-part list is already a valid container position.');

    // left
    $pos: left;
    $test: parse-container-position($pos);
    $expect:  0 auto;
    @include assert-equal($test, $expect,
      'A left-aligned container should have 0 margin-left, and auto right.');

    // right
    $pos: right;
    $test: parse-container-position($pos);
    $expect: auto 0;
    @include assert-equal($test, $expect,
      'A right-aligned container should have 0 margin-right, and auto left.');

    // center
    $pos: center;
    $test: parse-container-position($pos);
    $expect: auto auto;
    @include assert-equal($test, $expect,
      'A centered container should have auto left and right margins.');

    // number
    $pos: 10%;
    $test: parse-container-position($pos);
    $expect: $pos $pos;
    @include assert-equal($test, $expect,
      'A number should be used for both left and right container margins.');

    // string
    $pos: auto;
    $test: parse-container-position($pos);
    $expect: $pos $pos;
    @include assert-equal($test, $expect,
      'A string should be used for both left and right container margins.');
  }
}
