Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"break-after: region" not working #42

Open
vincent-f opened this issue Dec 28, 2018 · 1 comment
Open

"break-after: region" not working #42

vincent-f opened this issue Dec 28, 2018 · 1 comment

Comments

@vincent-f
Copy link

vincent-f commented Dec 28, 2018 •
edited
Loading

The CSS property "break-after: region" doesn't seem to work properly.

Minimal example that fails: (tested on Chrome 71.0.3578.98 - 64-bit)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="break-test.css">
    <script src="css-regions-polyfill.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="source">
        <p>first paragraph</p>
        <p>second paragraph</p>
        <p>third paragraph</p>
    </div>

    <div class="output"></div>
    <div class="output"></div>
    <div class="output"></div>

</body>

</html>
#source {
    flow-into: content-flow contents;
}

.output {
    flow-from: content-flow;
    border: 2px solid blue;
}

p {
    break-after: region;
}

On my browser, all paragraphs are inside the same first region instead of being in separate regions.
I have minimal experience with CSS regions, but this seems wrong.

Can someone help with my problem ?

Thanks in advance,
Vincent Fabro
@RonaldTreur
Copy link
Contributor

Just out of curiosity I checked this (nearly two years later) and I can not reproduce this. Everything seems to work just fine.
I tested this with the latest version of Chrome (on Mac OS 11): Version 87.0.4280.88 (Official Build) (x86_64)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@RonaldTreur @vincent-f