Add a formal mapping of Pack->CSS #1778

freakboy3742 · 2023-02-14T06:19:15Z

The Pack layout was somewhat confused around how it was meant to behave with the "root" content of a layout. Using HTML as a model, the "root" content is the <body> element; and that element is always the size of the display window. Previously, Pack would only assume the full size of the window if the root content had no children; as soon as the root content had children, the flex axis (i.e., vertical in a Column box, horizontal in a Row box) would be shrunk to the minimum possible size. This led to interesting situations where a Column layout would be flexible in height, but wouldn't expand to the full height of the window. It would also lead to background colors not being applied over the entire background.

This PR makes an attempt at a policy statement at the intended Pack->HTML/CSS mapping as a source of reference, and then implements some changes to the handling of the root element that reflects those changes.

[Remainder moved to #1794. – @mhsmith]

PR Checklist:

All new features have been tested
All new features have been documented
I have read the CONTRIBUTING.md file
I will abide by the code of conduct

… root view testing easier.

mhsmith · 2023-02-19T20:07:59Z

Using HTML as a model, the "root" content is the <body> element; and that element is always the size of the display window.

Based on my experiments, this is only the case: when quirks mode is active, which happens when the document contains no DOCTYPE, or a very old one. I think this is what was happening with your test document on Thursday.

With <!DOCTYPE html>, the <html> and <body> elements follow the normal rules for block elements, and shrink vertically to fit their content. However, it may not look that way, because there's a special case in the CSS spec which says the background-color and overflow properties on the <body> element are actually applied to the viewport and not the body at all. If you want to see what the <body> dimensions really are, you can add a border, or use the browser's layout inspector.

So it looks like we should add the following rule:

html, body {
    height: 100%;
}

I'll post the rest of my review tomorrow.

freakboy3742 · 2023-02-19T23:07:05Z

Agreed that quirks mode was the problem here; the 100% rule change is definitely required. I'll make a change to that effect.

freakboy3742 · 2023-02-20T00:05:05Z

I've done some more fiddling with quirks mode, and updated the mapping definition to include a full reference HTML document.

I've also added white-space: nowrap to the body definition, on the basis that we don't do content wrapping anywhere in Pack.

Based on those changes, Tutorial 0 becomes:

<body style="flex-direction: row;">
    <div style="flex-direction: row; margin: 50px; flex: 1 0 0%">Press me</div>
</body>

and Tutorial 1 becomes:

<body style="flex-direction: column; margin: 20px">
    <div style="flex-direction: row; margin: 10px">
        <div style="flex-direction: row; margin-left: 210px; flex:1 0 0%;">Input</div>
        <div style="flex-direction: row; margin-left: 10px; width: 200px;">Celcius</div>
    </div>
    <div style="flex-direction: row; margin: 10px">
        <div style="flex-direction: row; width: 200px; margin-right: 10px">Is equal to</div>
        <div style="flex-direction: row; flex:1 0 0%;">Input</div>
        <div style="flex-direction: row; margin-left: 10px; width: 200px">Fahrenheit</div>
    </div>
    <div style="flex-direction: row; margin: 15px">Convert</div>
</body>

(This tutorial 1 example has slightly different margin values, but the effect is the same).

Interestingly, I think I've found a bug in Chrome (109.0.5414.119) around the handling of margin collapse on the root element. Opening the document in a new tab always gives the correct rendering; however, flex-direction:column containers collapse the root element's top margin if the document is already loaded on the page.

core/tests/style/test_pack.py

docs/reference/style/pack.rst

mhsmith · 2023-02-21T16:27:38Z

core/src/toga/style/pack.py

+        if self.flex:
+            css.append(f"flex: {self.flex} 0 0%;")


This contradicts the definition of flex in pack.rst, which says that an explicit size in the main axis should cause flex to be ignored. Is that the current Pack behavior?

I believe I was relying on the fact that a flex definition will be ignored if width/height are defined. However, to avoid confusion, it's probably better to merge this into the width/height constructions above.

Based on my tests, both flex: 1 0 0 and flex: 0 0 0 do have an effect in CSS even if there's an explicit width/height, so we'd better only generate either flex or width/height.

docs/reference/style/pack.rst

core/src/toga/style/pack.py

docs/reference/style/pack.rst

Co-authored-by: Malcolm Smith <smith@chaquo.com>

mhsmith · 2023-02-23T21:37:39Z

I think there will be some overlap between the GTK changes and what I'm working on for Android. So I've reduced this PR to the CSS mapping changes, which I'll merge now, and I'll make a separate PR for the GTK changes (#1794).

freakboy3742 added 7 commits February 14, 2023 10:39

Add a formal mapping of Pack->CSS, and update rules about root objects.

954c4b6

Don't layout until a widget has a viewport.

e9665c9

Corrected typos on OptionContainer docstrings.

3ae99ac

Move GTK to a native container implememtation.

a8b3ac4

Tweaked the style on tutorial1 to remove unnecessary styles, and make…

1a076e9

… root view testing easier.

Correct test suite problems caused by pack and container changes.

3badfb0

Add changenotes.

e86a136

freakboy3742 requested a review from mhsmith February 14, 2023 06:33

Automatically recompute layout on style changes.

f381494

freakboy3742 force-pushed the containers branch from 996cf23 to f381494 Compare February 16, 2023 03:56

freakboy3742 mentioned this pull request Feb 16, 2023

[widget audit] toga.Button #1761

Merged

10 tasks

freakboy3742 force-pushed the containers branch from 2a7533a to f539e23 Compare February 16, 2023 05:05

Update GTK hinting methods.

55fde14

freakboy3742 force-pushed the containers branch from f539e23 to 55fde14 Compare February 16, 2023 05:12

freakboy3742 mentioned this pull request Feb 18, 2023

Improve alignment options #1194

Open

Tweak the Pack reference definition to account for Quirks mode.

3c52027

freakboy3742 force-pushed the containers branch from 7f2e182 to 3c52027 Compare February 20, 2023 00:04

Merge branch 'main' into containers

25cd3b2

mhsmith reviewed Feb 21, 2023

View reviewed changes

freakboy3742 added 3 commits February 22, 2023 10:30

Restore an accidentally deleted test case.

c96e738

Adapt to the new style of Travertino NONE handling.

90d7795

Updated pack description and implementation following review.

875c846

mhsmith reviewed Feb 22, 2023

View reviewed changes

core/src/toga/style/pack.py Outdated Show resolved Hide resolved

docs/reference/style/pack.rst Outdated Show resolved Hide resolved

freakboy3742 and others added 2 commits February 23, 2023 08:11

Apply suggestions from code review

abcb3d2

Co-authored-by: Malcolm Smith <smith@chaquo.com>

Move GTK changes to a separate PR

ae5e438

mhsmith approved these changes Feb 23, 2023

View reviewed changes

mhsmith merged commit b851bc0 into beeware:main Feb 23, 2023

mhsmith added a commit to mhsmith/toga that referenced this pull request Feb 23, 2023

Continuation of beeware#1778

1a477a3

mhsmith mentioned this pull request Feb 23, 2023

Modify container handling for GTK #1794

Merged

4 tasks

mhsmith changed the title ~~Modify container handling for GTK~~ Add a formal mapping of Pack->CSS Feb 23, 2023

freakboy3742 deleted the containers branch February 23, 2023 22:21

mhsmith mentioned this pull request Feb 27, 2023

Label does not align to BOTTOM #828

Closed

mhsmith mentioned this pull request Nov 8, 2023

Inconsistencies in cross-axis stretching #2213

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a formal mapping of Pack->CSS #1778

Add a formal mapping of Pack->CSS #1778

freakboy3742 commented Feb 14, 2023 •

edited by mhsmith

Loading

mhsmith commented Feb 19, 2023

freakboy3742 commented Feb 19, 2023

freakboy3742 commented Feb 20, 2023 •

edited

Loading

mhsmith Feb 21, 2023

freakboy3742 Feb 22, 2023

mhsmith Feb 22, 2023 •

edited

Loading

mhsmith commented Feb 23, 2023 •

edited

Loading

Add a formal mapping of Pack->CSS #1778

Add a formal mapping of Pack->CSS #1778

Conversation

freakboy3742 commented Feb 14, 2023 • edited by mhsmith Loading

PR Checklist:

mhsmith commented Feb 19, 2023

freakboy3742 commented Feb 19, 2023

freakboy3742 commented Feb 20, 2023 • edited Loading

mhsmith Feb 21, 2023

Choose a reason for hiding this comment

freakboy3742 Feb 22, 2023

Choose a reason for hiding this comment

mhsmith Feb 22, 2023 • edited Loading

Choose a reason for hiding this comment

mhsmith commented Feb 23, 2023 • edited Loading

freakboy3742 commented Feb 14, 2023 •

edited by mhsmith

Loading

freakboy3742 commented Feb 20, 2023 •

edited

Loading

mhsmith Feb 22, 2023 •

edited

Loading

mhsmith commented Feb 23, 2023 •

edited

Loading