Skip to content

[BUG] Error when trying to render an html with negative padding #919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
mmasdivins opened this issue Dec 3, 2021 · 3 comments · Fixed by #924
Closed

[BUG] Error when trying to render an html with negative padding #919

mmasdivins opened this issue Dec 3, 2021 · 3 comments · Fixed by #924
Labels
bug Something isn't working

Comments

@mmasdivins
Copy link

mmasdivins commented Dec 3, 2021 •
edited
Loading

Describe the bug:
It gives and error when trying to render the HTML attached. The error happens on html_parser.dart on line 1048 when creating a container with a negative padding. I don't know why it tries to put a negative reason, but the HTML works fine on a web browser.

HTML to reproduce the issue:

Html widget configuration:
The HTML that gives the error:

<div class="Section0"><p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-top-style:hidden;border-left-style:hidden;border-right-style:hidden;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">Let's do a test:</span></p>
<ul type="disc" style="margin:0pt; padding-left:0pt">
<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Symbol;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">Non enumerated point</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Symbol;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">more points</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Symbol;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">more</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Symbol;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">and more</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Symbol;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">and even more</span></li>
</ul>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;">&#xa0;</span></p>
<ol type="1" start="1" style="margin:0pt; padding-left:0pt">
<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">now enumerated points</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">second</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">third</span></li>

<li style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:18pt;padding-left:-18pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">forth</span></li>
</ol>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;">&#xa0;</span></p>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">Now with </span><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:bold;font-style:normal;font-variant:normal;text-decoration: none;">bold</span></p>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">and </span><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:italic;font-variant:normal;text-decoration: none;">italic</span></p>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span lang="en-US" style="font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">and maybe with </span><span lang="en-US" style="color:#FF0000;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">color</span></p>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;"><span style="color:#FF0000;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;">&#xa0;</span></p>
<p style="text-align:left;page-break-inside:auto;page-break-after:auto;page-break-before:avoid;line-height:normal;margin-top:0pt;margin-bottom:0pt;margin-left:0pt;text-indent:0pt;margin-right:0pt;border-left-style:hidden;border-right-style:hidden;border-bottom-style:hidden;"><span lang="en-US" style="color:#000000;font-family:Arial;font-size: 16px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;text-decoration: none;">Wish it works fine</span></p>
</div>

Screenshots:
Image of the HTML viewed on a browser:
imatge

Device details and Flutter/Dart/flutter_html versions:
Flutter version 2.5.3
Dart version 2.14.4
Flutter Html version 2.2.0

Stacktrace/Logcat
'package:flutter/src/widgets/container.dart': Failed assertion: line 269 pos 15: 'padding == null || padding.isNonNegative': is not true.

A picture of a cute animal
imatge
@mmasdivins mmasdivins added the bug Something isn't working label Dec 3, 2021
@mmasdivins mmasdivins changed the title [BUG] [BUG] Error when trying to render an html with negative padding Dec 3, 2021
@tneotia
Copy link
Contributor

tneotia commented Dec 3, 2021

@erickok I thought this was fixed in latest release?

@mmasdivins
Copy link
Author

I'm using the latest version, I did also try with version 2.1.5

@erickok
Copy link
Contributor

erickok commented Dec 3, 2021

We fixed this for margins but not for paddings, I think. Ah well... Should be an easy fix.

erickok added a commit to vrtdev/flutter_html that referenced this issue Dec 7, 2021
@erickok
Fix Sub6Resources#919 by ensuring non-negative insets are used for al…
9a47423 
…l margins and paddings applied in the library
@erickok erickok mentioned this issue Dec 7, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Ensure non-negative insets are used for all margins and paddings vrtdev/flutter_html
3 participants
@erickok @tneotia @mmasdivins