page.pdf headerTemplate and footerTemplate. Certain CSS styles not working.

Steps to reproduce

Tell us about your environment:

• Puppeteer version: v1.3.0
• Platform / OS version: Windows 7 Enterprise. Service Pack 1
• URLs (if applicable):
• Node.js version: v8.11.1

What steps will reproduce the problem?

We are in the process of migrating from phantomJs 1.9.x to use Chrome headless browser. The existing headers and footers contain block elements, float styles and a img tag. None of these are working in puppeteer. Are these not supported? The documentation states ‘valid HTML markup’. https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions

The example below contains h1 block element tags but they being displayed inline. The html works fine in a standard html page displayed in chrome.

Please include code that reproduces the issue.

const puppeteer = require('puppeteer');

var header = "<h1>H1 tag</h1><h2>H2 tag</h2><hr style='border-bottom: 2px solid #8c8b8b;' />";

(async () => {
    var browser = await puppeteer.launch();
    var page = await browser.newPage();
    await page.goto('http://www.example.com/', { waitUntil: ['domcontentloaded', 'networkidle0'] });

    await page.pdf({
        path: 'sample.pdf',
        landscape: false,
        displayHeaderFooter: true,
        headerTemplate: header,
        margin: {
            top: '100px',
            bottom: '10px',
            right: '20px',
            left: '20px'
        }
    });

    await browser.close();
})();

What is the expected result? The header renders in the same way as the Html does in a web page. The H1 and HR tags behave as block elements.

What happens instead? All the elements appear in a single line as though they are inline elements.

I’ve attached a HTML page containing the sample. sample.zip

Thanks,

[DavidKisiel]

Thanks for the answer, that’ll explain it.
As PhantomJs did support the above example could this be a future feature. So the supporting of full HTML in the header and footer templates?

[ItsTarik]

any response to @DavidKisiel proposal before closing the issue ?