page definition of element only works if element has text

I pasted this example to the online sandbox.
```html

@page defined-page {
margin: 20px;
@top-left {
content: 'This page was defined';
}
}

.box {
page: defined-page;
width: 100mm;
height: 100mm;
background-color: red;
}

```
I want to set the page name to an element which doesn't have any text and it seems not wo work.
When I put a little text in the div, then the page was set and the sample header is shown:
```html

@page defined-page {
margin: 20px;
@top-left {
content: 'This page was defined';
}
}

.box {
page: defined-page;
width: 100mm;
height: 100mm;
background-color: red;
}

```