{"record":{"id":"14fe18d05a0fa1e3","repo":"dianping/cat","slug":"expected-number-percentage-1-4-fill","errorCode":null,"errorMessage":"Expected ([<number> | <percentage>]{1,4} && fill?) but found '{}'.","messagePattern":"Expected \\(\\[<number> \\| <percentage>\\](.+?) && fill\\?\\) but found '(.+?)'\\.","errorType":"validation","errorClass":"ValidationError","httpStatus":null,"severity":"error","filePath":"cat-home/src/main/webapp/assets/js/editor/worker-css.js","lineNumber":3673,"sourceCode":"            if (!valid) {\n                break;\n            }\n            count++;\n        }\n\n\n        if (!fill) {\n            ValidationTypes.isAny(expression, \"fill\");\n        } else {\n            valid = true;\n        }\n\n        if (expression.hasNext()) {\n            part = expression.next();\n            if (valid) {\n                throw new ValidationError(\"Expected end of value but found '\" + part + \"'.\", part.line, part.col);\n            } else {\n                throw new ValidationError(\"Expected ([<number> | <percentage>]{1,4} && fill?) but found '\" + part + \"'.\", part.line, part.col);\n            }\n        }\n    },\n    \"border-image-source\"           : \"<image> | none\",\n    \"border-image-width\"            : { multi: \"<length> | <percentage> | <number> | auto\", max: 4 },\n    \"border-left\"                   : \"<border-width> || <border-style> || <color>\",\n    \"border-left-color\"             : \"<color> | inherit\",\n    \"border-left-style\"             : \"<border-style>\",\n    \"border-left-width\"             : \"<border-width>\",\n    \"border-radius\"                 : function(expression) {\n\n        var valid   = false,\n            simple = \"<length> | <percentage> | inherit\",\n            slash   = false,\n            fill    = false,\n            count   = 0,\n            max     = 8,\n            part;","sourceCodeStart":3655,"sourceCodeEnd":3691,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/editor/worker-css.js#L3655-L3691","documentation":"The total-miss counterpart of the previous error: the `border-image-slice` validator found nothing valid from the start (`valid === false`, tokens remain), so it throws `ValidationError(\"Expected ([<number> | <percentage>]{1,4} && fill?) but found '{part}'\")`. The first token of the value is neither a number, a percentage, nor `fill`.","triggerScenarios":"`border-image-slice: fill` alone is fine, but `border-image-slice: auto`, `border-image-slice: url(x.png)`, `border-image-slice: 10px` (lengths are not allowed here — widths use lengths, slices do not), or `border-image-slice: stretch` (keyword belongs to border-image-repeat).","commonSituations":"Confusing slice with width/outset/repeat longhands; copying the shorthand's first segment wrongly; assuming `px` is valid because sibling longhands accept lengths.","solutions":["Use unitless numbers or percentages for slices: `border-image-slice: 10;` or `10 20% 30 40 fill;`.","Move misplaced values to the right longhand: widths `10px` → `border-image-width`, keyword `stretch` → `border-image-repeat`.","Consult the grammar in the message and shape the value to `[<number>|<percentage>]{1,4} && fill?` exactly."],"exampleFix":"/* before */\n.card { border-image-slice: 10px; } /* Expected ([<number>|<percentage>]{1,4} && fill?) but found '10px' */\n\n/* after */\n.card { border-image-slice: 10; }","handlingStrategy":"validation","validationCode":"function sliceStartsValid(v) {\n  var first = v.trim().split(/\\s+/)[0];\n  return first === 'fill' || /^\\d+(\\.\\d+)?%?$/.test(first);\n}","typeGuard":null,"tryCatchPattern":"try {\n  Validation.validate('border-image-slice', value);\n} catch (ex) {\n  if (/border-image|number.*percentage/.test(ex.message)) { addLint(ex.line, ex.col, ex.message); return; }\n  throw ex;\n}","preventionTips":["Cross-check which border-image longhand accepts lengths (width/outset) vs unitless (slice) before writing values.","Copy the grammar from the error message when generating values programmatically."],"tags":["css","validation","border-image","property-value"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T22:17:37.221Z"}