forked from mirrors/gecko-dev
494c056de9
Automatic update from web-platform-tests [wpt] Fix break-request tests. These tests were presumably written when the flex spec said something along the lines of: "when a forced break (via. page-break-before/page-break-after) is encounted, create a new flex-line". The spec in this state was overloading the fragmentation properties to control breaking of flex-lines, and was subsequently updated to refer to forced breaks when fragmentation was invovled. These tests don't have any fragmentation involved, and are asserting incorrect behaviour that breaks should be inserted. (There is an argument that an additional property/properties should be introduced to allow for this - but that is a separate issue). Updated tests to assert to behaviour change in the presence of page-break-before/page-break-after. Change-Id: Id3575b5b17173681600ed63cd40c8bb87281113b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3813703 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1032644} -- wpt-commits: b91acab292fda4fa38994af5c780be8cd3a48164 wpt-pr: 35382
109 lines
3.5 KiB
HTML
109 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title>
|
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#change-201409-algo-breaks">
|
|
<link rel="match" href="flexbox-break-request-vert-001-ref.html">
|
|
<meta charset="utf-8">
|
|
<style>
|
|
div.flexbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
border: 1px dashed black;
|
|
width: 20px;
|
|
height: 60px;
|
|
margin: 2px;
|
|
float: left;
|
|
}
|
|
div.item {
|
|
height: 28px;
|
|
border: 1px solid blue;
|
|
background: lightblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- page-break-before specified on first (and only) item, at a point where
|
|
we're already "breaking" (the beginning): -->
|
|
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item" style="page-break-before: auto"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item" style="page-break-before: avoid"></div>
|
|
</div>
|
|
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item" style="page-break-before: always"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item" style="page-break-before: left"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item" style="page-break-before: right"></div>
|
|
</div>
|
|
<div style="clear: both"></div>
|
|
|
|
<!-- page-break-before specified on second item, at a point where breaking
|
|
would otherwise be unnecessary: -->
|
|
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: auto"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: avoid"></div>
|
|
</div>
|
|
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: always"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: left"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: right"></div>
|
|
</div>
|
|
<div style="clear: both"></div>
|
|
|
|
<!-- page-break-before specified on third item, at a point where breaking
|
|
is already necessary: -->
|
|
<!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: auto"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: avoid"></div>
|
|
</div>
|
|
<!-- * With 'page-break-before: always, left, right' (requesting a break): -->
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: always"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: left"></div>
|
|
</div>
|
|
<div class="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item" style="page-break-before: right"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|