Absolute positioned elements in a relative positioned CSS3 Flexbox fail to display...
[WebKit-https.git] / LayoutTests / css3 / flexbox / position-absolute-child.html
index c640417..cedeb24 100644 (file)
@@ -91,6 +91,9 @@ var expectations = {
                 { offsets: [0, 260, 560] },
                 { offsets: [0, 300, 560] },
                 { offsets: [0, 300, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 90], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
@@ -99,6 +102,9 @@ var expectations = {
                 { offsets: [580, 300, 0] },
                 { offsets: [560, 280, 0] },
                 { offsets: [560, 260, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, -30], crossAxisOffset: 50 },
             ],
         },
         column: {
@@ -109,6 +115,9 @@ var expectations = {
                 { offsets: [0, 20, 80] },
                 { offsets: [0, 60, 80] },
                 { offsets: [0, 60, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 90], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
@@ -117,6 +126,9 @@ var expectations = {
                 { offsets: [0, 20, 80] },
                 { offsets: [0, 60, 80] },
                 { offsets: [0, 60, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 90], crossAxisOffset: 10 },
             ],
         },
         'row-reverse': {
@@ -127,6 +139,9 @@ var expectations = {
                 { offsets: [600, 300, 0] },
                 { offsets: [560, 300, 0] },
                 { offsets: [560, 260, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
@@ -135,6 +150,9 @@ var expectations = {
                 { offsets: [-20, 260, 560] },
                 { offsets: [0, 280, 560] },
                 { offsets: [0, 300, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
             ],
         },
         'column-reverse': {
@@ -145,6 +163,9 @@ var expectations = {
                 { offsets: [120, 60, 0] },
                 { offsets: [80, 60, 0] },
                 { offsets: [80, 20, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
@@ -153,6 +174,9 @@ var expectations = {
                 { offsets: [120, 60, 0] },
                 { offsets: [80, 60, 0] },
                 { offsets: [80, 20, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
             ],
         },
     },
@@ -166,6 +190,9 @@ var expectations = {
                 { offsets: [0, 260, 560] },
                 { offsets: [0, 300, 560] },
                 { offsets: [0, 300, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 90], crossAxisOffset: 10 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
@@ -174,6 +201,9 @@ var expectations = {
                 { offsets: [580, 300, 0] },
                 { offsets: [560, 280, 0] },
                 { offsets: [560, 260, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, -30], crossAxisOffset: 10 },
             ],
         },
         // horizontal-bt flips the main axis direction so the offsets are different from horizontal-tb.
@@ -185,6 +215,9 @@ var expectations = {
                 { offsets: [100, 60, 0] },
                 { offsets: [80, 40, 0] },
                 { offsets: [80, 20, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, -30], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
@@ -193,6 +226,9 @@ var expectations = {
                 { offsets: [100, 60, 0] },
                 { offsets: [80, 40, 0] },
                 { offsets: [80, 20, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, -30], crossAxisOffset: 10 },
             ],
         },
         'row-reverse': {
@@ -203,6 +239,9 @@ var expectations = {
                 { offsets: [600, 300, 0] },
                 { offsets: [560, 300, 0] },
                 { offsets: [560, 260, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
@@ -211,6 +250,9 @@ var expectations = {
                 { offsets: [-20, 260, 560] },
                 { offsets: [0, 280, 560] },
                 { offsets: [0, 300, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
             ],
         },
         'column-reverse': {
@@ -221,6 +263,9 @@ var expectations = {
                 { offsets: [-20, 20, 80] },
                 { offsets: [0, 40, 80] },
                 { offsets: [0, 60, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
@@ -229,6 +274,9 @@ var expectations = {
                 { offsets: [-20, 20, 80] },
                 { offsets: [0, 40, 80] },
                 { offsets: [0, 60, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
             ],
         },
     },
@@ -242,6 +290,9 @@ var expectations = {
                 { offsets: [0, 20, 80] },
                 { offsets: [0, 60, 80] },
                 { offsets: [0, 60, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 90], crossAxisOffset: 10 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
@@ -250,6 +301,9 @@ var expectations = {
                 { offsets: [100, 60, 0] },
                 { offsets: [80, 40, 0] },
                 { offsets: [80, 20, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, -30], crossAxisOffset: 10 },
             ],
         },
         column: {
@@ -261,6 +315,9 @@ var expectations = {
                 { offsets: [580, 300, 0] },
                 { offsets: [560, 280, 0] },
                 { offsets: [560, 260, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, -30], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
@@ -269,6 +326,9 @@ var expectations = {
                 { offsets: [580, 300, 0] },
                 { offsets: [560, 280, 0] },
                 { offsets: [560, 260, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, -30], crossAxisOffset: 10 },
             ],
         },
         'row-reverse': {
@@ -279,6 +339,9 @@ var expectations = {
                 { offsets: [120, 60, 0] },
                 { offsets: [80, 60, 0] },
                 { offsets: [80, 20, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
@@ -287,6 +350,9 @@ var expectations = {
                 { offsets: [-20, 20, 80] },
                 { offsets: [0, 40, 80] },
                 { offsets: [0, 60, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
             ],
         },
         'column-reverse': {
@@ -297,6 +363,9 @@ var expectations = {
                 { offsets: [-20, 260, 560] },
                 { offsets: [0, 280, 560] },
                 { offsets: [0, 300, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
@@ -305,6 +374,9 @@ var expectations = {
                 { offsets: [-20, 260, 560] },
                 { offsets: [0, 280, 560] },
                 { offsets: [0, 300, 580] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
             ],
         }
     },
@@ -318,6 +390,9 @@ var expectations = {
                 { offsets: [0, 20, 80] },
                 { offsets: [0, 60, 80] },
                 { offsets: [0, 60, 120] },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 90], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
@@ -326,6 +401,9 @@ var expectations = {
                 { offsets: [100, 60, 0] },
                 { offsets: [80, 40, 0] },
                 { offsets: [80, 20, -20] },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, -30], crossAxisOffset: 50 },
             ],
         },
         column: {
@@ -337,6 +415,9 @@ var expectations = {
                 { offsets: [0, 260, 560] },
                 { offsets: [0, 300, 560] },
                 { offsets: [0, 300, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 90], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
@@ -345,6 +426,9 @@ var expectations = {
                 { offsets: [0, 260, 560] },
                 { offsets: [0, 300, 560] },
                 { offsets: [0, 300, 600] },
+                { offsets: [10, 10, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 50], crossAxisOffset: 10 },
+                { offsets: [10, 50, 90], crossAxisOffset: 10 },
             ],
         },
         'row-reverse': {
@@ -355,6 +439,9 @@ var expectations = {
                 { offsets: [120, 60, 0] },
                 { offsets: [80, 60, 0] },
                 { offsets: [80, 20, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
@@ -363,6 +450,9 @@ var expectations = {
                 { offsets: [-20, 20, 80] },
                 { offsets: [0, 40, 80] },
                 { offsets: [0, 60, 100] },
+                { offsets: [-30, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 10, 50], crossAxisOffset: 50 },
+                { offsets: [10, 50, 50], crossAxisOffset: 50 },
             ],
         },
         'column-reverse': {
@@ -373,6 +463,9 @@ var expectations = {
                 { offsets: [600, 300, 0] },
                 { offsets: [560, 300, 0] },
                 { offsets: [560, 260, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 50, 10], crossAxisOffset: 50 },
+                { offsets: [50, 10, 10], crossAxisOffset: 50 },
             ],
             rtl: [
                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
@@ -381,6 +474,9 @@ var expectations = {
                 { offsets: [600, 300, 0] },
                 { offsets: [560, 300, 0] },
                 { offsets: [560, 260, 0] },
+                { offsets: [90, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 50, 10], crossAxisOffset: 10 },
+                { offsets: [50, 10, 10], crossAxisOffset: 10 },
             ],
         },
     }
@@ -399,8 +495,6 @@ function setFlexboxSize(flexbox, flexDirection)
 function addFlexPackJustifyTests(writingMode, flexFlow, direction, flexDirection)
 {
     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
-
-
     for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
         var expected = expectations[writingMode][flexFlow][direction][2 + absoluteIndex];
 
@@ -434,6 +528,39 @@ function addFlexPackJustifyTests(writingMode, flexFlow, direction, flexDirection
     }
 }
 
+function addFlexAlignCenterTests(writingMode, flexFlow, direction, flexDirection)
+{
+    var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
+    for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
+        var expected = expectations[writingMode][flexFlow][direction][5 + absoluteIndex];
+
+        var flexbox = document.createElement('div');
+        flexbox.className = 'flexbox ' + flexboxClassName;
+        flexbox.style.height = '100px';
+        flexbox.style.width = '100px';
+        flexbox.style.margin = "20px";
+        flexbox.style.webkitFlexPack = 'center';
+        flexbox.style.webkitFlexAlign = 'center';
+
+        for (var childIndex = 1; childIndex <= 3; ++childIndex) {
+            var child = document.createElement('div');
+            if (absoluteIndex == childIndex) {
+                child.style.position = 'absolute';
+                child.style.outline = "2px solid yellow";
+            }
+            child.style.width = '40px';
+            child.style.height = '40px';
+
+            child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
+            var expectedCrossAxisOffset = (absoluteIndex == childIndex) ? expected.crossAxisOffset : 30;
+            child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'y' : 'x'), expectedCrossAxisOffset);
+            flexbox.appendChild(child);
+        }
+
+        document.body.appendChild(flexbox);
+    }
+}
+
 writingModes.forEach(function(writingMode) {
     flexFlows.forEach(function(flexFlow) {
         directions.forEach(function(direction) {
@@ -444,7 +571,6 @@ writingModes.forEach(function(writingMode) {
             document.body.appendChild(title);
 
             var flexDirection = getFlexDirection(flexFlow, writingMode);
-
             for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
                 var expected = expectations[writingMode][flexFlow][direction][absoluteIndex - 1];
 
@@ -468,6 +594,7 @@ writingModes.forEach(function(writingMode) {
                 document.body.appendChild(flexbox);
             }
             addFlexPackJustifyTests(writingMode, flexFlow, direction, flexDirection);
+            addFlexAlignCenterTests(writingMode, flexFlow, direction, flexDirection);
         })
     })
 })