Почему calc превращает отрицательное число повторений в одно?

Question

Почему в Хроме (версия 121 и не только) repeat(-10, 1fr) является ошибкой, а repeat(calc(-10), 1fr) ведёт себя как 1? С другими неположительными числами - аналогично. Я ожидал, что поведение будет одинаковым...

section {
  border: 1px solid orange;
  background: antiquewhite;
  display: grid;
  padding: .5em;
  gap: .5em;
}

section + section {
  margin-top: 1em;
}

.a {
  grid-template-columns: 1fr repeat(-10, 1fr) 1fr;
}

.b {
  grid-template-columns: 1fr repeat(calc(-10), 1fr) 1fr;
}

div {
  height: 1em;
  background: gray;
}

<section class="a">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section class="b">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 1

https://www.w3.org/TR/css-values-4/#calc-range

Parse-time range-checking of values is not performed within math functions, and therefore out-of-range values do not cause the declaration to become invalid. However, the value resulting from a top-level calculation must be clamped to the range allowed in the target context.

Для математических функций (в частности calc) не происходит проверка на соответствие ограничениям в процессе парсинга, но результат вычисления принудительно вписывается в ограничения.

В вашем примере у repeat() первое значение должно быть целым положительным числом (<integer [1,∞]>) поэтому число -10 приводится к ближайшему разрешённому, т.е. 1.

При этом для явно заданных значений (specified value) такого принудительного вписывания не происходит и всё объявленное просто становится невалидным и игнорируется.

Там же в документации приведён простой пример: width: -5px невалидно и браузер игнорирует это правило, а в width: calc(-5px); приводится к ближайшему разрешённому значению и получается width: 0px;

БЛОГ НА HUSL

Почему calc превращает отрицательное число повторений в одно?

Ответы (1 шт):