Bug 1645573 [wpt PR 24137] - [FlexNG] Fix double reversal for wrap-reverse, a=testonly
authorDavid Grogan <dgrogan@chromium.org>
Mon, 22 Jun 2020 10:38:37 +0000
changeset 536799 676cae6112c256c52e9d2b8d1263f82f0e835d74
parent 536798 5c0ce0a37205e620c367f5d6477db00a2494050e
child 536800 ec228720a0772a3292920a4e3b1691feceea8642
push id119680
push userwptsync@mozilla.com
push dateTue, 23 Jun 2020 11:08:22 +0000
treeherderautoland@7ca3d4bada73 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1645573, 24137, 1090613, 845235, 2244590, 778112
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1645573 [wpt PR 24137] - [FlexNG] Fix double reversal for wrap-reverse, a=testonly Automatic update from web-platform-tests [FlexNG] Fix double reversal for wrap-reverse We were double flipping some static positions for abspos flex children with align-items: flex-{start,end}. Included is an extensive test of static positions for abspos flex children. Fixed: 1090613 Bug: 845235 Change-Id: I1abd5d114c6740f3736d27aafdd4836b296d5d7b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2244590 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#778112} -- wpt-commits: ef14c5bc0da3d3c0f642a3195a9e41433d36a5ba wpt-pr: 24137
testing/web-platform/tests/css/css-flexbox/position-absolute-013.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/position-absolute-013.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<title>CSS Test: Absolutely positioned children of flexboxes</title>
+<link rel="author" title="Google Inc." href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+<meta name="assert" content="Checks the abspos position of flex children in a number of writing modes, alignments, etc.">
+<style>
+.abspos {
+  height: 50px;
+  width: 50px;
+  background: lightblue;
+  position: absolute;
+  flex: none;
+}
+
+.relpos {
+  position: relative;
+}
+
+.title {
+    margin-top: 1em;
+}
+
+.flexbox {
+    display: flex;
+    background-color: #aaa;
+    height: 100px;
+    width: 100px;
+}
+
+.horizontal-tb {
+    writing-mode: horizontal-tb;
+}
+.vertical-rl {
+    writing-mode: vertical-rl;
+}
+.vertical-lr {
+    writing-mode: vertical-lr;
+}
+
+.rtl {
+    direction: rtl;
+}
+.ltr {
+    direction: ltr;
+}
+
+.align-items-flex-start {
+    align-items: flex-start;
+}
+.align-items-flex-end {
+    align-items: flex-end;
+}
+.align-items-stretch {
+    align-items: stretch;
+}
+.justify-content-flex-start {
+    justify-content: flex-start;
+}
+.justify-content-flex-end {
+    justify-content: flex-end;
+}
+
+.row {
+    flex-direction: row;
+}
+.row-reverse {
+    flex-direction: row-reverse;
+}
+.column {
+    flex-direction: column;
+}
+.column-reverse {
+    flex-direction: column-reverse;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}
+.wrap {
+    flex-wrap: wrap;
+}
+.wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flexbox')">
+<div id=log></div>
+<script>
+
+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
+var directions = ['ltr', 'rtl'];
+var justifyContents = ['flex-start', 'flex-end'];
+var alignItems = ['flex-start', 'flex-end', 'stretch'];
+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
+var wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+
+// These expected values were harvested from Chrome 85. Firefox 78b6 agrees
+// except when align-items:stretch and flex-wrap:wrap-reverse are both in
+// effect.
+// Chrome 83 and FF 78b6 agree with these values when the lone flex child is
+// position:static instead of position:absolute. That is evidence that these
+// values are all correct, because the position of a staticpos child is
+// specified to be identical to the abspos position when there are no other
+// children or specified offsets.
+var x = [0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0];
+
+var y = [0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0];
+
+var test_number = 1;
+
+writingModes.forEach(function(flexWritingMode) {
+  wraps.forEach(function(wrap) {
+    flexDirections.forEach(function(flexDirection) {
+      directions.forEach(function(direction) {
+        justifyContents.forEach(function(justifyContent) {
+          alignItems.forEach(function(alignment) {
+            var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment + ' ' + wrap;
+            var title = document.createElement('div');
+            title.className = 'title';
+            title.innerHTML = flexboxClassName + " .flexbox " + (test_number++);
+            document.body.appendChild(title);
+
+            var flexbox = document.createElement('div');
+            flexbox.className = 'flexbox ' + flexboxClassName;
+
+            var child = document.createElement('div');
+            child.setAttribute('class', 'abspos');
+            child.setAttribute("data-offset-x", x.shift());
+            child.setAttribute("data-offset-y", y.shift());
+            flexbox.appendChild(child);
+
+            var relpos = document.createElement('div');
+            relpos.className = 'relpos';
+            relpos.appendChild(flexbox);
+
+            document.body.appendChild(relpos);
+          })
+        })
+      })
+    })
+  })
+})
+
+// Print the x,y offsets for pasting into above x,y arrays.
+absposes = document.querySelectorAll('.abspos')
+lefts = Array.from(absposes).map(x => x.offsetLeft)
+tops = Array.from(absposes).map(x => x.offsetTop)
+
+</script>
+</body>