tabler/core/scss/tests/_grid.test.scss

// Output tests for the grid mixins in scss/mixins/bootstrap/_grid.scss.
// `make-col`/`make-col-offset`/`row-cols` do the real width maths (via `divide`
// + math.percentage); `$columns` is passed explicitly so the tests don't depend
// on the global `$grid-columns`.

@use '../mixins/bootstrap/grid' as *;

@include describe('make-col') {
  @include it('sets a fixed width as a percentage of the column count') {
    @include assert() {
      @include output() {
        .t {
          @include make-col(6, 12);
        }
      }
      @include expect() {
        .t {
          flex: 0 0 auto;
          width: 50%;
        }
      }
    }
  }

  @include it('grows to fill the row when no size is given') {
    @include assert() {
      @include output() {
        .t {
          @include make-col();
        }
      }
      @include expect() {
        .t {
          flex: 1 1 0;
          max-width: 100%;
        }
      }
    }
  }
}

@include describe('make-col-auto') {
  @include it('sizes to the content') {
    @include assert() {
      @include output() {
        .t {
          @include make-col-auto();
        }
      }
      @include expect() {
        .t {
          flex: 0 0 auto;
          width: auto;
        }
      }
    }
  }
}

@include describe('make-col-offset') {
  @include it('offsets by a percentage of the column count') {
    @include assert() {
      @include output() {
        .t {
          @include make-col-offset(3, 12);
        }
      }
      @include expect() {
        .t {
          margin-inline-start: 25%;
        }
      }
    }
  }

  @include it('collapses a zero offset to 0 (not 0%)') {
    @include assert() {
      @include output() {
        .t {
          @include make-col-offset(0, 12);
        }
      }
      @include expect() {
        .t {
          margin-inline-start: 0;
        }
      }
    }
  }
}

@include describe('row-cols') {
  @include it('splits children into equal fractions of the row') {
    @include assert() {
      @include output() {
        .t {
          @include row-cols(3);
        }
      }
      @include expect() {
        .t > * {
          flex: 0 0 auto;
          width: 33.33333333%;
        }
      }
    }
  }
}

@include describe('make-row') {
  @include it('sets the gutter custom properties and negative margins') {
    @include assert() {
      @include output() {
        .t {
          @include make-row(1rem);
        }
      }
      @include expect() {
        .t {
          --gutter-x: 1rem;
          --gutter-y: 0;
          display: flex;
          flex-wrap: wrap;
          margin-top: calc(-1 * var(--gutter-y));
          margin-inline-end: calc(-0.5 * var(--gutter-x));
          margin-inline-start: calc(-0.5 * var(--gutter-x));
        }
      }
    }
  }
}

@include describe('make-col-ready') {
  @include it('primes a column with full width and gutter padding') {
    @include assert() {
      @include output() {
        .t {
          @include make-col-ready();
        }
      }
      @include expect() {
        .t {
          flex-shrink: 0;
          width: 100%;
          max-width: 100%;
          padding-inline-end: calc(var(--gutter-x) * 0.5);
          padding-inline-start: calc(var(--gutter-x) * 0.5);
          margin-top: var(--gutter-y);
        }
      }
    }
  }
}