Skip to content
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

[cssom] Resolved value for margins and paddings doesn't reflect reality #10391

Open
Loirooriol opened this issue Jun 4, 2024 · 0 comments
Open

[cssom] Resolved value for margins and paddings doesn't reflect reality #10391

Loirooriol opened this issue Jun 4, 2024 · 0 comments
Labels
cssom-1 Current Work

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/cssom/#resolved-values

  • {block, inline}-size
  • {height, width}
  • {margin, padding}-{block, inline}-{start, end}
  • {margin, padding}-{bottom, left, right, top}
    If the property applies to the element or pseudo-element and the resolved value of the display property is not none or contents, then the resolved value is the used value. Otherwise the resolved value is the computed value.

For preferred sizes: https://drafts.csswg.org/css-sizing-3/#preferred-size-properties

Applies to: all elements except non-replaced inlines

For margin properties: https://drafts.csswg.org/css-box-4/#margin-physical

Applies to: all elements except internal table elements, ruby base containers, and ruby annotation containers

For padding properties: https://drafts.csswg.org/css-box-4/#padding-physical

Applies to: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers

However, I tried to set them to a percentage:

<!DOCTYPE html>
<div id="target" style="display: X; margin: 25%; padding: 25%; height: 200%; width: 200%">
  <div style="width: 100px; height: 100px"></div>
</div>
<script>
var cs = getComputedStyle(document.querySelector("#target"));
document.body.prepend("margin-top: " + cs.marginTop + "; padding-top: " + cs.paddingTop + "; height: " + cs.height + "; width: " + cs.width)
</script>
Resolved value of margin-top: 25% Spec Gecko Blink WebKit
display: table-row 25% 0px 25px 0px
display: table-row-group 25% 0px 25px 0px
display: table-header-group 25% 0px 25px 0px
display: table-footer-group 25% 0px 25px 0px
display: table-column 25% 0px 0px 0px
display: table-column-group 25% 0px 0px 0px
display: table-cell 25% 0px 0px 0px
display: table-caption <length> 1428px 25px 25px
display: inline <length> 476px 25% 25%
Resolved value of padding-top: 25% Spec Gecko Blink WebKit
display: table-row 25% 0px 25px 25px
display: table-row-group 25% 0px 25px 25px
display: table-header-group 25% 0px 25px 25px
display: table-footer-group 25% 0px 25px 25px
display: table-column 25% 0px 0px 0px
display: table-column-group 25% 0px 0px 0px
display: table-cell 25px 25px 25px 25px
display: table-caption <length> 1428px 25px 25px
display: inline <length> 476px 25% 25%
Resolved value of height: 200% Spec Gecko Blink WebKit
display: table-row 100px 100px 50px 50px
display: table-row-group 100px 100px 50px 50px
display: table-header-group 100px 100px 50px 50px
display: table-footer-group 100px 100px 50px 50px
display: table-column 0px 0px 0px 0px
display: table-column-group 0px 0px 0px 0px
display: table-cell 100px 100px 100px 100px
display: table-caption 100px 100px 100px 100px
display: inline 200% 200% 200% 200%
@Loirooriol Loirooriol added the cssom-1 Current Work label Jun 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cssom-1 Current Work
1 participant
@Loirooriol