summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html')
-rw-r--r--testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html154
1 files changed, 154 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html b/testing/web-platform/tests/css/css-flexbox/abspos/position-absolute-013.html
new file mode 100644
index 0000000000..cdbdfcfbf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/abspos/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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-17 13:33:46 +0000