Flickable: size in % bow refer to the Flickable's size instead of the…

… viewport

This is consistant so that `width: 100%` is the same as `width: parent.width`

This basically revert the previous commit that was just working around
the debug_assert to actually fix the behavior

ChangeLog: width and height expressed in `%` unit for an element in a
Flickable now refer to the size of the Flickable instead of that of
the viewport

internal/compiler/passes/default_geometry.rs

@@ -279,11 +279,15 @@ fn fix_percent_size(
         return matches!(&binding.borrow().expression, Expression::PropertyReference(nr) if nr.name() == property && Rc::ptr_eq(&nr.element(), parent));
     }
     let mut b = binding.borrow_mut();
-    if let Some(parent) = parent {
-        debug_assert!(matches!(
+    if let Some(mut parent) = parent.clone() {
+        if parent.borrow().is_flickable_viewport {
+            // the `%` in a flickable need to refer to the size of the flickable, not the size of the viewport
+            parent = crate::object_tree::find_parent_element(&parent).unwrap_or(parent)
+        }
+        debug_assert_eq!(
             parent.borrow().lookup_property(property).property_type,
-            Type::LogicalLength | Type::Invalid
-        ));
+            Type::LogicalLength
+        );
         let fill =
             matches!(b.expression, Expression::NumberLiteral(x, _) if (x - 100.).abs() < 0.001);
         b.expression = Expression::BinaryExpression {
@@ -292,7 +296,7 @@ fn fix_percent_size(
                 &b.span,
                 diag,
             )),
-            rhs: Box::new(Expression::PropertyReference(NamedReference::new(parent, property))),
+            rhs: Box::new(Expression::PropertyReference(NamedReference::new(&parent, property))),
             op: '*',
         };
         fill

tests/cases/issues/issue_4163_flickable_parent_percent.slint

@@ -18,7 +18,7 @@ component ShowResult inherits Rectangle {
     }
 }
 export component TestCase inherits Window {
-    width: 326px;
+    width: 300px;
     height: 326px;
 
     HorizontalLayout {
@@ -39,9 +39,7 @@ export component TestCase inherits Window {
     }
 
     out property <bool> test:
-        // The % applies to the viewport
-        rec.width == 2000px &&
-        // While the parent applies to the flickable
+        rec.width == 300px &&
         rec.height == 326px;
 }