Only apply the constraint to the parent with the new syntax

Also attempt to document it

CHANGELOG.md

@@ -12,9 +12,8 @@ All notable changes to this project are documented in this file.
  - On an `Image`, the default value of `source-clip-width` and `source-clip-height` is now set to
    the size of the image minus the `source-clip-{x,y}`. The source clip size is now used to compute
    the default aspect ratio of the image.
- - deprecated `invoke_callback` functions in the slint interpreter in favor of `invoke`, they can also 
+ - deprecated `invoke_callback` functions in the slint interpreter in favor of `invoke`, they can also
    invoke functions in addition to callback
- - Propagate implicit constraints from child to parent, also when the child is not a layout (#783)
 
 ### Added
 

docs/langref.md

@@ -95,6 +95,7 @@ export MyApp := Window {
 Element position and property lookup is different in the new syntax.
 In the new syntax, only property declared within the component are in scope.
 In the previous syntax, all properties of bases of `self` and `root` were also in scope.
+In the new syntax, elements are centered by default and the constraints are applied to the parent.
 
 ### Container Components
 

docs/layouting.md

@@ -111,6 +111,10 @@ factor between the element and its siblings with these properties:
 A value of `0` means that the element will not be stretched at all; unless all siblings also have a stretch
 factor of `0`. Then all the elements will be equally stretched.
 
+The default value of these constraint properties may depends on the content of the element.
+If the element does not set a `x` or a `y` property, these constraints are also automatically applied to the parent element.
+When using the legacy syntax, only the layout elements apply their constraints to the parent.
+
 ## Common Properties on Layout Elements
 
 All layout elements have the following properties in common:

internal/compiler/passes/default_geometry.rs

@@ -144,6 +144,9 @@ fn gen_layout_info_prop(elem: &ElementRc) {
                 .clone()
                 .map(|(h, v)| (Expression::PropertyReference(h), Expression::PropertyReference(v)))
                 .or_else(|| {
+                    if c.borrow().is_legacy_syntax {
+                        return None;
+                    }
                     if c.borrow().repeated.is_some() {
                         // FIXME: we should ideally add runtime code to merge layout info of all elements that are repeated (same as #407)
                         return None;

tests/cases/layout/issue_783_constraint_from_children.slint

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
-TestCase := Window {
+component TestCase {
     r1 := Rectangle {}
     r2 := Rectangle {
         HorizontalLayout {
@@ -35,12 +35,12 @@ TestCase := Window {
         for ay in 5 : Text { text: "foo"; }
     }
     foo := Text { text: "foo"; }
-    property <bool> test: foo.min-height > 1px && t2 && t3 && t4 && t5 && t6;
-    property <bool> t2: r2.min-height == foo.min-height && r2.preferred-width == foo.preferred-width;
-    property <bool> t3: r3.min-height == foo.min-height && r3.preferred-width == foo.preferred-width;
-    property <bool> t4: r4.min-height == foo.min-height && r4.preferred-width == foo.preferred-width;
-    property <bool> t5: r5.min-height == foo.min-height && r5.preferred-width == foo.preferred-width;
-    property <bool> t6: r6.min-height == foo.min-height && r6.preferred-width == foo.preferred-width;
+    out property <bool> test: foo.min-height > 1px && t2 && t3 && t4 && t5 && t6;
+    out property <bool> t2: r2.min-height == foo.min-height && r2.preferred-width == foo.preferred-width;
+    out property <bool> t3: r3.min-height == foo.min-height && r3.preferred-width == foo.preferred-width;
+    out property <bool> t4: r4.min-height == foo.min-height && r4.preferred-width == foo.preferred-width;
+    out property <bool> t5: r5.min-height == foo.min-height && r5.preferred-width == foo.preferred-width;
+    out property <bool> t6: r6.min-height == foo.min-height && r6.preferred-width == foo.preferred-width;
 }
 
 /*