fix: Better support for intrinsics, table, vertical-align, and display

[Sub6Resources]

No description provided.

[codecov]

Codecov Report

Attention: Patch coverage is 44.94382% with 49 lines in your changes missing coverage. Please review.

Project coverage is 63.96%. Comparing base (79ec194) to head (90550dd).

Files	Patch %	Lines
lib/src/css_box_widget.dart	23.91%	35 Missing ⚠️
lib/src/style/margin.dart	0.00%	7 Missing ⚠️
lib/src/style.dart	50.00%	5 Missing ⚠️
lib/src/builtins/styled_element_builtin.dart	77.77%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1306      +/-   ##
==========================================
- Coverage   64.91%   63.96%   -0.95%     
==========================================
  Files          38       39       +1     
  Lines        2981     3022      +41     
==========================================
- Hits         1935     1933       -2     
- Misses       1046     1089      +43     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Sub6Resources]

Can remove this

[erickok]

This now allows nested tables I think, which is great! Can we still use a wrapper TagWrapExtension to make the table horizontally scrollable?

[Sub6Resources]

Good question, I didn't check that in my testing. I'll look over that again and let you know!

[Sembauke]

What does this pr do?

[Sub6Resources]

Sorry @Sembauke I opened this right as a flight I was waiting for started boarding, so it didn't include any details and still needs some tests written.

Mainly, this fixes #1165 by properly interpreting the CSS vertical-align property on all elements. Most elements, block-level elements in particular, don't need to align with the text baseline, so they will default to PlaceholderAlignment.bottom, which has no issues in an intrinsically sized context. It also adds a try-catch that keeps dry layout from failing and instead prints a more developer-friendly message to the console letting them know that their html in an intrinsic context may have layout bugs that can be fixed by explicitly setting vertical-align to bottom. So far I've only seen this triggered by images within a table, but I'm sure there are many other cases this will come up in, especially within the intrinsic context of tables.

This PR also expands the Display enum to use a more css-like approach under the hood and adds the full set of values, even if they aren't supported by the core flutter_html so that extensions like flutter_html_table can utilize display: table; and other related properties. This means that extension authors can more easily implement things like grid and flex display types without needing to parse the CSS on their own.

[droplet-js]

Any news update? I have same issue, when i use Html Widget as CupertinoAlertDialog content.

[frankvollebregt]

For me, the current beta version doesn't correctly calculate the intrinsic height, so I'm using a dependency override from this branch (which works great for my needs!). When is this expected to be merged into a (pre)release?

[omar3alaa]

Hey! Any ETA when this gonna be merged and released? @Sub6Resources

[EtcGonza]

Greetings! Any update? I have the same issue...

[omar3alaa]

Hey @Sub6Resources! Really appreciate your efforts on this PR, it helps a lot to fix an existing issue for a lot of the plugin's users. Do we have any expected timeline for it to be released as we blocked by it for releasing a new feature for our company?

[ManuEspesoJbs]

No ETA? I'm facing same problem

[shovel-kun]

This PR causes a regression in nested list alignment in the following HTML snippet.

<div> <ol> <li> <ul> <li>to read</li> </ul> <div> <div> <div> <div> ミルトンの <ruby>作 <rt>さく</rt> </ruby> <ruby>品 <rt>ひん</rt> </ruby>を <span>読んだ</span>ことがありますか。 </div> <div>Have you ever read Milton's works? <span>[1]</span></div> </div> </div> </div> </li> <li> <ul> <li>to recite (e.g. a sutra)</li> <li>to chant</li> </ul> </li> <li> <ul> <li>to predict</li> <li>to guess</li> <li>to forecast</li> <li>to read (someone's thoughts)</li> <li>to see (e.g. into someone's heart)</li> <li>to divine</li> </ul> <div> <div> <div> <div> <ruby>彼 <rt>かの</rt> </ruby> <ruby>女 <rt>じょ</rt> </ruby>の <ruby>心 <rt>こころ</rt> </ruby>の <ruby>動 <rt>うご</rt> </ruby>きを <span>読む</span>ことさえできなかった。 </div> <div> I could not even make a guess at the working of her mind. <span>[2]</span> </div> </div> </div> </div> </li> <li> <ul> <li>to pronounce</li> <li>to read (e.g. a kanji)</li> </ul> </li> <li> <ul> <li>to decipher</li> <li>to read (a meter, graph, music, etc.)</li> <li>to tell (the time)</li> </ul> <div> <div> <div> <div> <ruby>私 <rt>わたし</rt> </ruby>の <ruby>頭 <rt>あたま</rt> </ruby>は <ruby>楽 <rt>がく</rt> </ruby> <ruby>譜 <rt>ふ</rt> </ruby>を <span>読む</span>ようにはよく <ruby>慣 <rt>な</rt> </ruby>らされて <ruby>居 <rt>お</rt> </ruby>りますが、どうも <ruby>暗 <rt>あん</rt> </ruby> <ruby>号 <rt>ごう</rt> </ruby>を <span>読む</span>には <ruby>適 <rt>てき</rt> </ruby>しません。 </div> <div> My mind is quite accustomed to reading music, but deciphering secret codes is not its forte. <span>[3]</span> </div> </div> </div> </div> </li> <li> <ul> <li>to count</li> <li>to estimate</li> </ul> <div> <div> <div>Note</div> <div>now mostly used in idioms</div> </div> <div> <div> <div> <span>See:</span> <a> <span >さばを <ruby>読 <rt>よ</rt> </ruby>む </span> </a> </div> <div> to manipulate figures to one's advantage; to count wrongly on purpose; to inflate or deflate one's age </div> </div> </div> </div> </li> <li> <ul> <li>to read (a kanji) with its native Japanese reading</li> </ul> <div> <div> <div>Note</div> <div>also written as 訓む</div> </div> </div> </li> </ol> </div>

3.0.0-beta.2 (Expected)

Result on this PR