// Background Syntax Tests
// =======================

$base-line-height: 24px;

@include test-module(Background Syntax) {
  $grid-background-baseline-color: #000 !global;

  // Background Grid
  // ---------------

  @include output-test('background-grid') {
    // outside
    @include assert-setup('outside', $grid: overlay);
    @include assert-output(
      'Items should have a 7-column grid with outside gutters.'
    ) {
      .test { @include show-grid(7 .5 before show background); }
      .expect {
        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;
      }
    }

    // split
    @include assert-setup('split');
    @include assert-output(
      'Items should have a 8-column grid with split gutters.'
    ) {
      .test { @include background-grid(8 .25 split show); }
      .expect {
        background-image: linear-gradient(to right, transparent 10%, rgba(102, 102, 255, 0.25) 10%, rgba(179, 179, 255, 0.25) 90%, transparent 90%);
        background-size: 12.5%;
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }

    // inside
    @include assert-setup('inside');
    @include assert-output(
      'Items should have a 8-column grid with inside gutters.'
    ) {
      .test { @include background-grid(8 .25 inside show); }
      .expect {
        background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
        background-size: 12.5%;
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }

    // asymmetrical outside
    @include assert-setup('asym-outside');
    @include assert-output(
      'Items should have a (1 2 3 2 1)-column grid with outside gutters.'
    ) {
      .test { @include background-grid((1 2 3 2 1) .5 before show); }
      .expect {
        background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 9.09091%, transparent 9.09091%, transparent 13.63636%, rgba(102, 102, 255, 0.25) 13.63636%, rgba(179, 179, 255, 0.25) 31.81818%, transparent 31.81818%, transparent 36.36364%, rgba(102, 102, 255, 0.25) 36.36364%, rgba(179, 179, 255, 0.25) 63.63636%, transparent 63.63636%, transparent 68.18182%, rgba(102, 102, 255, 0.25) 68.18182%, rgba(179, 179, 255, 0.25) 86.36364%, transparent 86.36364%, transparent 90.90909%, rgba(102, 102, 255, 0.25) 90.90909%, rgba(179, 179, 255, 0.25));
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }

    // asymmetrical split
    @include assert-setup('asym-split');
    @include assert-output(
      'Items should have a (1 2 3 3)-column grid with split gutters.'
    ) {
      .test { @include background-grid((1 2 3 3) .25 split show); }
      .expect {
        background-image: linear-gradient(to right, transparent 1.25%, rgba(102, 102, 255, 0.25) 1.25%, rgba(179, 179, 255, 0.25) 11.25%, transparent 11.25%, transparent 13.75%, rgba(102, 102, 255, 0.25) 13.75%, rgba(179, 179, 255, 0.25) 33.75%, transparent 33.75%, transparent 36.25%, rgba(102, 102, 255, 0.25) 36.25%, rgba(179, 179, 255, 0.25) 66.25%, transparent 66.25%, transparent 68.75%, rgba(102, 102, 255, 0.25) 68.75%, rgba(179, 179, 255, 0.25) 98.75%, transparent 98.75%);
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }

    // asymmetrical inside
    @include assert-setup('asym-inside');
    @include assert-output(
      'Items should have a (1 2 3 3)-column grid with inside gutters.'
    ) {
      .test { @include background-grid((1 2 3 3) .25 inside show); }
      .expect {
        background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 12.5%, rgba(102, 102, 255, 0.25) 12.5%, rgba(179, 179, 255, 0.25) 35%, rgba(102, 102, 255, 0.25) 35%, rgba(179, 179, 255, 0.25) 67.5%, rgba(102, 102, 255, 0.25) 67.5%, rgba(179, 179, 255, 0.25));
        background-origin: content-box;
        background-clip: content-box;
        background-position: left top;
      }
    }
  }

  // Get Symmetrical Background
  // --------------------------

  @include test('[function] get-background-sym') {
    $color: debug-get(color);
    $light: lighten($color, 15%);

    // Inside columns
    $test: get-background-sym(8 .25 inside fluid);
    $columns: map-get(map-get($test, image), columns);
    $expect: $color, $light;
    @include assert-equal($columns, $expect,
      'Returns the correct columns gradient for an inside grid.');

    $size: map-get($test, size);
    $expect: percentage(1.25/10);
    @include assert-equal($size, $expect,
      'Returns the correct background size for a fluid grid.');

    // Outside columns
    $grid: 7 (4em 2em) after static;
    $test: get-background-sym($grid);
    $columns: map-get(map-get($test, image), columns);
    $expect: $color, $light percentage(1/1.5), transparent percentage(1/1.5);
    @include assert-equal($columns, $expect,
      'Returns the correct columns gradient for an outside grid.');

    $size: map-get($test, size);
    $expect: 6em;
    @include assert-equal($size, $expect,
      'Returns the correct background size for a static grid.');

    // Split columns
    $test: get-background-sym(8 .25 split);
    $columns: map-get(map-get($test, image), columns);
    $expect: transparent 10%, $color 10%, $light 90%, transparent 90%;
    @include assert-equal($columns, $expect,
      'Returns the correct columns gradient for a split-gutters grid.');

    $size: map-get($test, size);
    $expect: 12.5%;
    @include assert-equal($size, $expect,
      'Returns the correct background size for a split-gutters grid.');
  }

  // Get Asymmetrical Inside
  // -----------------------
  @include test('[function] get-asym-inside') {
    $color: debug-get(color);
    $light: lighten($color, 15%);

    $grid: (1 2 3 3) .25 inside;
    $test: get-asym-inside($grid);
    $expect: $color, $light 12.5%, $color 12.5%,
             $light 35%, $color 35%,
             $light 67.5%, $color 67.5%, $light;
    @include assert-equal($test, $expect,
      'Returns column gradient stops for asymmetric inside grid.');
  }

  // Get Asymmetrical Split
  // ----------------------
  @include test('[function] get-asym-split') {
    $color: debug-get(color);
    $light: lighten($color, 15%);

    $grid: (1 2 3 3) .25 split;
    $test: get-asym-split($grid);
    $expect: transparent 1.25%, $color 1.25%, $light 11.25%, transparent 11.25%,
             transparent 13.75%, $color 13.75%, $light 33.75%, transparent 33.75%,
             transparent 36.25%, $color 36.25%, $light 66.25%, transparent 66.25%,
             transparent 68.75%, $color 68.75%, $light 98.75%, transparent 98.75%;
    @include assert-equal($test, $expect,
      'Returns column gradient stops for asymmetric split grid.');
  }

  // Get Asymmetrical Outside
  // ------------------------
  @include test('[function] get-asym-outside') {
    $color: debug-get(color);
    $light: lighten($color, 15%);

    $grid: (1 2 3 2 1) .25 after;
    $test: get-asym-outside($grid);
    $expect: $color, $light 10%, transparent 10%,
             transparent 12.5%, $color 12.5%, $light 32.5%, transparent 32.5%,
             transparent 35%, $color 35%, $light 65%, transparent 65%,
             transparent 67.5%, $color 67.5%, $light 87.5%, transparent 87.5%,
             transparent 90%, $color 90%, $light;
    @include assert-equal($test, $expect,
      'Returns column gradient stops for asymmetric outside grid.');
  }

  // Get Asymmetrical Background
  // ---------------------------

  @include test('[function] get-background-asym') {
    $color: debug-get(color);
    $light: lighten($color, 15%);

    $grid: (1 2 3 2 1) .25 after;
    $test: map-get(map-get(get-background-asym($grid), image), columns);
    $expect: $color, $light 10%, transparent 10%,
             transparent 12.5%, $color 12.5%, $light 32.5%, transparent 32.5%,
             transparent 35%, $color 35%, $light 65%, transparent 65%,
             transparent 67.5%, $color 67.5%, $light 87.5%, transparent 87.5%,
             transparent 90%, $color 90%, $light;
    @include assert-equal($test, $expect,
      'Returns column background for asymmetric outside grid.');

    $grid: (1 2 3 3) .25 inside;
    $test: map-get(map-get(get-background-asym($grid), image), columns);
    $expect: $color, $light 12.5%, $color 12.5%,
             $light 35%, $color 35%,
             $light 67.5%, $color 67.5%, $light;
    @include assert-equal($test, $expect,
      'Returns column background for asymmetric inside grid.');
  }

  // Get Background
  // --------------

  @include test('[function] get-background') {
    $grid: parse-grid(8 .25 inside);
    $color: debug-get(color);
    $light: lighten($color, 15%);

    // hide
    $test: length(get-background($grid hide));
    $expect: 0;
    @include assert-equal($test, $expect,
      'No values for a hidden grid (hide).');

    // show-columns
    $test: get-background($grid show-columns);
    $expect: (
      image: (
        columns: ($color, $light),
      ),
      size: percentage(1.25/10),
      clip: content-box,
      flow: ltr,
    );
    @include assert-equal($test, $expect,
      'Return key/values for columns.');

    // show (no-line-height)
    $base-line-height: false !global;
    $test: get-background($grid show);
    @include assert-equal($test, $expect,
      'Only show baseline if $base-line-height exists.');

    // show (unitless line-height)
    $base-line-height: 2 !global;
    $test: get-background($grid show);
    @include assert-equal($test, $expect,
      'Only show baseline if $base-line-height has units.');

    // show-baseline
    $base-line-height: 24px !global;
    $test: get-background($grid show-baseline);
    $expect: (
      image: (
        baseline: (#000 1px, transparent 1px),
      ),
      size: 100% 24px,
      flow: ltr,
    );
    @include compare-maps($test, $expect,
      'Return key/values for baseline.');

    // show
    $test: get-background($grid show);
    $expect: (
      image: (
        columns: ($color, $light),
        baseline: (#000 1px, transparent 1px),
      ),
      size: (percentage(1.25/10), 100% 24px),
      clip: (content-box, border-box),
      flow: ltr,
    );
    @include compare-maps($test, $expect,
      'Return key/values for both baseline and columns.');
  }

  // Get Debug
  // ---------

  @include test('[function] get-debug') {
    // default
    $test: debug-get(color);
    $expect: rgba(#66f, .25);
    @include assert-equal($test, $expect,
      'Returns proper default debug value.');

    @include susy-set(debug, color, red);

    // user
    $test: debug-get(color);
    $expect: red;
    @include assert-equal($test, $expect,
      'Returns proper user-set debug value.');

    @include original-grid;
  }
}
