Skip to content

Commit

Permalink
[css-flex] Migrate more abspos tests from reference to check-layout
Browse files Browse the repository at this point in the history 
Before this patch, the entire test file is marked Fail even though each
file has ~15-20 tests in it, some of which Blink passes. If we were to
regress any of the tests we pass, we'd never know.

This patch shows that Blink disagrees with Firefox in any wrap-reverse
container and some justify-content:space-between containers.

Change-Id: I3ce1120a47f85a89ecfbea9952b15514bc1c58e4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2965267
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Auto-Submit: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#892738}
  • Loading branch information
@davidsgrogan @chromium-wpt-export-bot
davidsgrogan authored and chromium-wpt-export-bot committed Jun 15, 2021
1 parent cf13290 commit 38ba3d8
Show file tree
Hide file tree
Showing 24 changed files with 360 additions and 1,458 deletions.
95 changes: 0 additions & 95 deletions css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-ref.html
View file

This file was deleted.

56 changes: 30 additions & 26 deletions css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
<head>
<title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<link rel="match" href="flex-abspos-staticpos-justify-content-001-ref.html">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row;
padding: 1px 2px;
border: 1px solid black;
Expand All @@ -39,54 +40,57 @@
width: 8px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div></div></div>
<div class="container" style="justify-content: space-around"><div></div></div>
<div class="container" style="justify-content: space-evenly"><div></div></div>
<div class="container" style="justify-content: stretch"><div></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div></div></div>
<div class="container" style="justify-content: start"><div></div></div>
<div class="container" style="justify-content: end"><div></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div></div></div>
<div class="container" style="justify-content: flex-end"><div></div></div>
<div class="container" style="justify-content: left"><div></div></div>
<div class="container" style="justify-content: right"><div></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div></div></div>
<div class="container" style="justify-content: space-around"><div></div></div>
<div class="container" style="justify-content: space-evenly"><div></div></div>
<div class="container" style="justify-content: stretch"><div></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div></div></div>
<div class="container" style="justify-content: start"><div></div></div>
<div class="container" style="justify-content: end"><div></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div></div></div>
<div class="container" style="justify-content: flex-end"><div></div></div>
<div class="container" style="justify-content: left"><div></div></div>
<div class="container" style="justify-content: right"><div></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>
Expand Down
95 changes: 0 additions & 95 deletions css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-ref.html
View file

This file was deleted.

56 changes: 30 additions & 26 deletions css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
<head>
<title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
<link rel="match" href="flex-abspos-staticpos-justify-content-002-ref.html">
<meta charset="utf-8">
<style>
.container {
display: flex;
position: relative;
flex-flow: row wrap-reverse;
padding: 1px 2px;
border: 1px solid black;
Expand All @@ -39,54 +40,57 @@
width: 8px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body>
<body onload="checkLayout('.container > div')">
<div class="big">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div></div></div>
<div class="container" style="justify-content: space-around"><div></div></div>
<div class="container" style="justify-content: space-evenly"><div></div></div>
<div class="container" style="justify-content: stretch"><div></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div></div></div>
<div class="container" style="justify-content: start"><div></div></div>
<div class="container" style="justify-content: end"><div></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div></div></div>
<div class="container" style="justify-content: flex-end"><div></div></div>
<div class="container" style="justify-content: left"><div></div></div>
<div class="container" style="justify-content: right"><div></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
<br>
</div>
<div class="small">
<!-- The various justify-content values, from
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
<!-- normal -->
<div class="container" style="justify-content: normal"><div></div></div>
<div class="container" style="justify-content: normal"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-distribution> -->
<div class="container" style="justify-content: space-between"><div></div></div>
<div class="container" style="justify-content: space-around"><div></div></div>
<div class="container" style="justify-content: space-evenly"><div></div></div>
<div class="container" style="justify-content: stretch"><div></div></div>
<div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 1 -->
<div class="container" style="justify-content: center"><div></div></div>
<div class="container" style="justify-content: start"><div></div></div>
<div class="container" style="justify-content: end"><div></div></div>
<div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
<div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
<!-- <content-position>, part 2 -->
<div class="container" style="justify-content: flex-start"><div></div></div>
<div class="container" style="justify-content: flex-end"><div></div></div>
<div class="container" style="justify-content: left"><div></div></div>
<div class="container" style="justify-content: right"><div></div></div>
<div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
<div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
<br>
</div>
</body>
Expand Down
Loading

0 comments on commit 38ba3d8

Please sign in to comment.