CSS Background Layer Count Audit

Description

Audit background longhand list cycling/truncation against explicit image-layer count; resolved list counts only, no CSS token parsing.

CSS combines token syntax, property-specific value rules and layout/cascade processing. These are separate layers: splitting a declaration does not establish that its value is valid, and arithmetic on resolved lengths does not perform browser layout. Each tool here handles an explicit numeric representation or a stated lexical subset.

Audit background longhand list cycling/truncation against explicit image-layer count; resolved list counts only, no CSS token parsing.

When to use this tool

Use this tool to audit background longhand list cycling/truncation against explicit image-layer count; resolved list counts only, no CSS token parsing.

How to use the tool and how it works

Enter imageLayers, counts using the input definitions below.
Run the operation. Resolve malformed-input errors before interpreting the result.
Read result.effective, result.extra. Interpret signs, units, ordering and null values using the rules below.

For each source count n and image-layer count L report used=L, cycles=floor(L/n), tail=L modulo n and extra=max(0,n−L).^{[1, 2]}

Input field	Meaning and units	Accepted input
imageLayers	Explicit image-layer count, integer 0–128.	Finite safe integer satisfying the stated bounds.
counts	Source longhand list counts, each an integer 1–128.	Dense list of at most 128 finite numbers, subject to the stated integer/shape rules.

Output field	Interpretation
result	Object containing the fields below.
result.effective	Per-source count/cycles/tail/used records for the image-layer count.
result.extra	Source entries beyond the effective image-layer count for each list.

json

{
  "input": {
    "imageLayers": 3,
    "counts": [
      1,
      2,
      4
    ]
  },
  "output": {
    "result": {
      "effective": [
        {
          "sourceCount": 1,
          "used": 3,
          "cycles": 3,
          "tail": 0
        },
        {
          "sourceCount": 2,
          "used": 3,
          "cycles": 1,
          "tail": 1
        },
        {
          "sourceCount": 4,
          "used": 3,
          "cycles": 0,
          "tail": 3
        }
      ],
      "extra": [
        0,
        0,
        1
      ]
    }
  }
}

Limitations and assumptions

imageLayers is 0–128 and source counts are 1–128. These counts alone do not parse or resolve background values.
Lengths and times must already be resolved to consistent numeric units. Lexical helpers intentionally support smaller grammars than a full browser CSS parser; malformed supported-subset input causes an error.
Every declared top-level input is required and unknown fields are rejected. Ordinary strings are limited to 8,192 UTF-16 code units and lists to 128 entries, with tighter operation-specific bounds where stated. JSON text has bounded nesting and node counts.
Numeric outputs must be finite and within the absolute safe-integer magnitude; exact larger integers use decimal text. Source positions are zero-based UTF-16 offsets and span ends are exclusive unless a different convention is explicitly stated.

Alternative or Complementary methods

Use a full CSS parser or browser style/layout APIs when escape handling, error recovery, computed styles or the full cascade matter. These tools expose focused transformations and audits of supplied data.

References

CSS Backgrounds and Borders Level 3 — W3C
Tool behavior and example: CSS Background Layer Count Audit — tool.io

Similar or alternative tools

CSS Animation List Slot Pairing
Pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.
CSS Border Radius Overlap Scale
Apply the CSS uniform corner-radius overlap reduction to explicit resolved numeric dimensions; zero-radius sums impose no constraint.