cumsum()

The running total: each number added to the ones before it.

In CSS, one grid track per item, as wide as its value; a box spanning tracks 1 to k is as wide as their sum, and the box is a query container, read by the output in it.

Example

Result
Markup
<div class="cumsum">
  <i style="--value: 1"></i>
  <i style="--value: 1"></i>
  <i style="--value: 2"></i>
  <i style="--value: 3"></i>
  <i style="--value: 5"></i>
  <b style="grid-column: 1 / span 1"><output></output></b>
  <b style="grid-column: 1 / span 2"><output></output></b>
  <b style="grid-column: 1 / span 3"><output></output></b>
  <b style="grid-column: 1 / span 4"><output></output></b>
  <b style="grid-column: 1 / span 5"><output></output></b>
</div>
CSS
@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.cumsum output::after { counter-reset: result var(--result); content: counter(result); }
.cumsum { display: inline-grid; width: max-content; }
.cumsum > i { grid-row: 1; width: calc(var(--value) * 1px); }
.cumsum > b { container-type: inline-size; }
.cumsum > b > output { --result: round(100cqw / 1px); }

dCSS Example

With dCSS, an element whose class is named after the function (dCSS’s docs).

Result
Markup
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">
<link rel="stylesheet" href="families/format.css">

<figure class="dcss-cumsum">
  <ol>
    <li style="--value: 1"></li>
    <li style="--value: 1"></li>
    <li style="--value: 2"></li>
    <li style="--value: 3"></li>
    <li style="--value: 5"></li>
  </ol>
  <ol>
    <li>
      <output class="dcss-format-fixed" style="--value: var(--dcss-cumsum); --precision: 0"></output>
    </li>
    <li>
      <output class="dcss-format-fixed" style="--value: var(--dcss-cumsum); --precision: 0"></output>
    </li>
    <li>
      <output class="dcss-format-fixed" style="--value: var(--dcss-cumsum); --precision: 0"></output>
    </li>
    <li>
      <output class="dcss-format-fixed" style="--value: var(--dcss-cumsum); --precision: 0"></output>
    </li>
    <li>
      <output class="dcss-format-fixed" style="--value: var(--dcss-cumsum); --precision: 0"></output>
    </li>
  </ol>
</figure>

Limits

These are the Example’s; the dCSS Example’s are in dCSS’s docs.

  • one box an answer, the k-th spanning tracks 1 to k: grid-column: 1 / span k
  • values of 0 or more
  • no column gap: a gap adds to each sum
  • the grid at its natural width (width: max-content): a grid stretched by its parent, as an item of a grid or of a column flexbox, stretches its auto columns, and the read with them
  • whole-number answers: each read rounds to 1px
  • each answer under 1,000,000: from a million up, Chrome passes --result on as 1e+06, which counter-reset rejects, so the counter prints 0
  • no margins, padding or borders on the items or the query containers: they add to the widths read, and 100cqw reads the content box
  • each query container stretched across its track (justify-items and justify-self at their defaults): aligned to a side or the center, it shrinks to its content, none, and reads 0
  • no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

ChromeSafariFirefox
Example14026158
dCSS Example14026.2158

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158, the dCSS Example in Chrome 155 and Safari’s WebKit 26.4.