Fix LayoutTest transitions/flex-transitions.html by syncing from Blin…

…k / Chromium upstream https://bugs.webkit.org/show_bug.cgi?id=125894 Reviewed by Antoine Quint. Merge: https://chromium.googlesource.com/chromium/blink/+/40cc24abe770f2fd20d9a09c60cf87502c28063a & https://source.chromium.org/chromium/chromium/src/+/cb4809f7770d86811559c3f39ed0cbc308a73887 Update the expected results to account for the fact that flex-grow and flex-shrink don't interpolate smoothly to or from zero. Also update the test to use values of similar magnitudes for each part of the property shorthand, to allow the tolerance to be applied meaningfully. * LayoutTests/transitions/flex-transitions.html: Updated * LayoutTests/transitions/flex-transitions-expected.txt: Ditto * LayoutTests/TestExpectations: Remove the test expectation Canonical link: https://commits.webkit.org/273266@main
WebKit · Jan 20, 2024 · 744d120 · 744d120
1 parent 5c32022
commit 744d120
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -1977,7 +1977,6 @@ webkit.org/b/137883 transitions/cubic-bezier-overflow-svg-length.html [ Pass Fai
 webkit.org/b/137883 transitions/cubic-bezier-overflow-transform.html [ Pass Failure ]
 webkit.org/b/137883 transitions/delay.html [ Pass Failure ]
 webkit.org/b/137883 transitions/equivalent-background-image-no-transition.html [ Pass Failure ]
-webkit.org/b/137883 transitions/flex-transitions.html [ Pass Failure ]
 webkit.org/b/137883 transitions/interrupt-transform-transition.html [ Pass Failure ]
 webkit.org/b/137883 transitions/interrupt-zero-duration.html [ Pass Failure ]
 webkit.org/b/137883 transitions/interrupted-accelerated-transition.html [ Pass Failure ]

diff --git a/LayoutTests/transitions/flex-transitions-expected.txt b/LayoutTests/transitions/flex-transitions-expected.txt
@@ -1,5 +1,9 @@
-PASS - "flex" property for "row1" element at 0.5s saw something close to: 2,0,0
-PASS - "flex" property for "column1" element at 0.5s saw something close to: 0.5,0,10
-PASS - "flex" property for "negative1" element at 0.5s saw something close to: 1,0.5,75
-PASS - "flex" property for "no-flex1" element at 0.5s saw something close to: 0.5,0,0
+PASS - "flex" property for "row1" element at 0.2s saw something close to: 140,0,0
+PASS - "flex" property for "column1" element at 0.2s saw something close to: 80,0,40
+PASS - "flex" property for "negative1" element at 0.2s saw something close to: 100,100,60
+PASS - "flex" property for "no-flex1" element at 0.2s saw something close to: 80,0,0
+PASS - "flex" property for "row1" element at 0.8s saw something close to: 260,0,0
+PASS - "flex" property for "column1" element at 0.8s saw something close to: 20,0,160
+PASS - "flex" property for "negative1" element at 0.8s saw something close to: 100,100,90
+PASS - "flex" property for "no-flex1" element at 0.8s saw something close to: 20,0,0
 
diff --git a/LayoutTests/transitions/flex-transitions.html b/LayoutTests/transitions/flex-transitions.html
@@ -1,11 +1,12 @@
-<!DOCTYPE>
+<!DOCTYPE html>
 <html>
 <head>
 <style>
 .flexbox {
-    display: -webkit-flexbox;
+    display: flex;
     width: 100px;
     height: 100px;
+    margin-bottom: 10px;
 }
 .flexbox :nth-child(1) {
     background-color: blue;
@@ -14,60 +15,68 @@
     background-color: green;
 }
 .flexbox div {
-    -webkit-transition-property: -webkit-flex;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: linear;
+    transition-property: flex;
+    transition-duration: 1s;
+    transition-timing-function: linear;
 }
 
 #flex-row div {
-    flex: 1 0 0px;
+    flex: 100 0 0px;
 }
+
 .final #row1 {
-    flex: 3 0 0px;
+    flex: 300 0 0px;
 }
 
 #flex-column {
     flex-direction: column;
 }
+
 #flex-column div {
-    flex: 1 0 0px;
+    flex: 100 0 0px;
 }
+
 .final #column1 {
-    flex: 0 0 20px;
+    flex: 0 0 200px;
 }
 
 #flex-negative div {
-    flex: 1 1 50px;
+    flex: 100 100 50px;
 }
+
 .final #negative1 {
-    flex: 1 100px;
+    flex: 100 100 100px;
 }
 
 #flex-no-flex div {
-    -webkit-flex: 1 0 0px;
+    flex: 100 0 0px;
 }
+
 .final #no-flex1 {
-    -webkit-flex: 0 0 0px;
+    flex: 0 0 0px;
 }
-
 </style>
   <script src="resources/transition-test-helpers.js"></script>
   <script type="text/javascript">
 
-    const expectedValues = [
+const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
-      [0.5, 'row1', 'flex', [2, 0, 0], .5],
-      [0.5, 'column1', 'flex', [.5, 0, 10], 3],
-      [0.5, 'negative1', 'flex', [1, .5, 75], 3],
-      [0.5, 'no-flex1', 'flex', [.5, 0, 0], .4],
+      [0.2, 'row1',      'flex', [140, 0,     0], 10],
+      [0.2, 'column1',   'flex', [80,  0,    40], 10],
+      [0.2, 'negative1', 'flex', [100, 100,  60], 10],
+      [0.2, 'no-flex1',  'flex', [80,  0,     0], 10],
+      [0.8, 'row1',      'flex', [260, 0,     0], 10],
+      [0.8, 'column1',   'flex', [20,  0,   160], 10],
+      [0.8, 'negative1', 'flex', [100, 100,  90], 10],
+      [0.8, 'no-flex1',  'flex', [20,  0,     0], 10],
     ];
 
     function setupTest()
     {
       document.body.className = 'final';
     }
 
-    runTransitionTest(expectedValues, setupTest, usePauseAPI);
+    runTransitionTest(expectedValues, setupTest);
   </script>
 </head>
 <body>