HTML-to-PDF feature test

Twelve features that modern HTML templates use, then two controls in older syntax. Green means the feature worked; red means it did not. Tests 1, 2, 3, 5 and 14 are checked by eye against the expected result.

1. Flexbox

display: flex; justify-content: space-between

Expected: three boxes on one line, at the left edge, centre and right edge.

Logo
Invoice
No. 1042

2. gap in a flex row

display: flex; gap: 14px

Expected: three boxes on one line with a 14 px space between them.

A
B
C

3. CSS grid

display: grid; grid-template-columns: repeat(3, 1fr)

Expected: two rows of three equal columns.

1
2
3
4
5
6

4. Custom properties (CSS variables)

--brand: #1f9d55; background: var(--brand)

5. Web font from a WOFF2 file

@font-face { src: url(…) format('woff2') }

Expected: the line below in Inter, a sans-serif. A serif font means the WOFF2 file was not used.

Quarterly report 2026 · Total 1,234.50

6. calc()

width: calc(50% + 50%)

7. clamp()

width: clamp(100%, 100%, 100%)

8. Colour with the space-separated syntax

background: rgb(31 157 85 / 100%)

9. The :is() selector

.t9 :is(span) { … }

10. aspect-ratio

width: 160px; aspect-ratio: 4 / 1

11. JavaScript from 2015 or later (const, arrow functions, template literals)

const total = items.reduce((sum, i) => sum + i, 0)

Script did not run

12. Intl.NumberFormat (currency formatting in the browser)

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' })

Script did not run

13. Control: JavaScript in ES5 syntax (var, function)

var total = items.reduce(function (sum, i) { return sum + i; }, 0)

Script did not run

14. Control: the 2009 flexbox syntax

display: -webkit-box; -webkit-box-pack: justify

Expected: three boxes on one line, at the left edge, centre and right edge.

Logo
Invoice
No. 1042