Repository navigation
Draw every layer of a multiple background #609
Copy link
Copy link
Open
Labels
enhancementNew feature or requestNew feature or request
Description
Part of #552 (step 28, missing support, medium priority).
A background or background-image with several comma-separated layers draws only one of them. The layer-specific longhands (background-repeat: no-repeat, repeat-x, and so on) are read as one value. Layered backgrounds are common for a watermark or logo over a gradient, and for a corner image over a fill.
Measured on gravitypdf at 60b82630, PHP 8.5.4, on a 60 × 30 mm block, from the image XObjects, patterns and shadings written.
background |
Browser | mPDF |
|---|---|---|
url(bg.jpg) no-repeat, linear-gradient(red, blue) |
the image over the gradient | the gradient only |
linear-gradient(red, blue), url(bg.jpg) |
the gradient over the image | the gradient only |
background-image: url(bg.jpg), url(bg.jpg); background-repeat: no-repeat |
two layers | one image pattern |
url(bg.jpg) no-repeat, #0f0 |
the image over green: the colour is the last layer | the image, no green |
url(bg.jpg) no-repeat #0f0, one layer |
the image over green | the image; the green is lost. That is the shorthand parser's own fault, fixed with the other shorthand parsers before #532, not here |
Cause.
NormalizeProperties::parseCssBackground()returns one colour, one image, one repeat and one position (src/Css/NormalizeProperties.php:395-445). A gradient anywhere in the value wins, because it is tested first with a greedy(linear|radial)-gradient\(.*\). Otherwise the firsturl()is taken, with everything after it passed on as repeat and position.BACKGROUND-IMAGEis read the same way (:789-800).SetBackground()(src/Mpdf.php:2785) and thepageBackgroundslist it feeds (:18654onwards) hold one image per box.
Fix.
- Split
background,background-image,-repeat,-position,-size,-originand-clipon commas outside parentheses, sorgb(…)and gradient arguments stay whole. - Store the layers as a list. The colour comes from the last layer only.
- In CSS, a longhand list shorter than the image list repeats, and a longer one is cut short.
SetBackground()returns one entry per layer, and the painting code draws them from last to first, under the same clip.- Keep the single-layer path byte-identical; most documents have one layer.
- The shorthand parser's own ordering faults (a colour after
url(),/ size) are fixed with the other shorthand parsers before Honour!importantin stylesheets and inline styles #532. Build on that parser.
Tests. Each row above, a gradient over a gradient, per-layer background-size and -position, three layers with two background-repeat values, layers on a table cell and on @page, and the snapshot suite unchanged.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request
Activity