[css] max-width and intrinsic sizes #12

karlcow · 2015-10-26T02:34:37Z

On Gecko, there is a big load of issues related to max-width and a percentage.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 (specifically seeAlso).

The specifications are

The goal of opening this issue is to figure out if Gecko implements something different from the spec or if the spec needs to be updated to adjust to what WebKit and Blink are doing and inform the CSS working Group about it.

@dholbert might be interested and/or @dbaron and/or @tantek

The text was updated successfully, but these errors were encountered:

karlcow · 2015-10-26T04:41:16Z

Probably I should put here a couple of tests so we can describe a bit more what is happening. The parent dimension are important for the behavior of the max-width.

karlcow · 2015-10-26T05:08:57Z

I guess the issue is coming from the prose of the spec.

<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.2.

karlcow · 2015-10-26T07:46:01Z

OK let's see.
A simple test case - http://codepen.io/anon/pen/rOdpdW

Firefox 44.0a1 (2015-10-25) - Gecko

Opera 33.0.1990.35 - Blink

karlcow · 2015-10-26T07:50:05Z

The inspector for the image in blink gives

and

karlcow · 2015-10-26T07:51:59Z

And in Firefox

and

karlcow · 2015-10-26T07:54:19Z

All computed values on Blink

-webkit-app-region: no-drag;
-webkit-appearance: none;
-webkit-background-composite: source-over;
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-column-break-after: auto;
-webkit-column-break-before: auto;
-webkit-column-break-inside: auto;
-webkit-column-count: auto;
-webkit-column-gap: normal;
-webkit-column-rule-color: rgb(0, 0, 0);
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0px;
-webkit-column-span: none;
-webkit-column-width: auto;
-webkit-font-smoothing: auto;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-line-box-contain: block inline replaced;
-webkit-line-break: auto;
-webkit-line-clamp: none;
-webkit-locale: auto;
-webkit-margin-after-collapse: collapse;
-webkit-margin-before-collapse: collapse;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position: 0% 0%;
-webkit-mask-repeat: repeat;
-webkit-mask-size: auto;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(0, 0, 0);
-webkit-text-emphasis-position: over;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(0, 0, 0);
-webkit-text-orientation: vertical-right;
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(0, 0, 0);
-webkit-text-stroke-width: 0px;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-user-select: text;
align-content: start;
align-items: start;
align-self: start;
alignment-baseline: auto;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
backface-visibility: visible;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
baseline-shift: 0px;
border-bottom-color: rgb(0, 0, 0);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
-webkit-border-image: none;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 0);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
buffered-rendering: auto;
caption-side: top;
clear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: rgb(0, 0, 0);
color-interpolation: sRGB;
color-interpolation-filters: linearRGB;
color-rendering: auto;
cursor: auto;
cx: 0px;
cy: 0px;
direction: ltr;
display: inline;
dominant-baseline: auto;
empty-cells: show;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flex-basis: auto;
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
font-family: Times;
font-kerning: auto;
font-size: 16px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-variant-ligatures: normal;
font-weight: normal;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
height: 118.766px;
image-rendering: auto;
isolation: auto;
justify-content: start;
left: auto;
letter-spacing: normal;
lighting-color: rgb(255, 255, 255);
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
marker-end: none;
marker-mid: none;
marker-start: none;
mask: none;
mask-type: luminance;
max-height: none;
max-width: 100%;
min-height: 0px;
min-width: 0px;
mix-blend-mode: normal;
motion-offset: 0px;
motion-path: none;
motion-rotation: auto 0deg;
nav-down: auto;
nav-left: auto;
nav-right: auto;
nav-up: auto;
object-fit: fill;
object-position: 50% 50%;
opacity: 1;
order: 0;
orphans: auto;
outline-color: rgb(0, 0, 0);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-wrap: normal;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
paint-order: fill stroke markers;
perspective: none;
perspective-origin: 147px 59.375px;
pointer-events: auto;
position: static;
r: 0px;
resize: none;
right: auto;
rx: 0px;
ry: 0px;
shape-image-threshold: 0;
shape-margin: 0px;
shape-outside: none;
shape-rendering: auto;
speak: normal;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
tab-size: 8;
table-layout: auto;
text-align: start;
text-anchor: start;
text-decoration: none;
text-indent: 0px;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-transform: none;
top: auto;
touch-action: auto;
transform: none;
transform-origin: 147px 59.375px;
transform-style: flat;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vector-effect: none;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 1;
width: 294px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
x: 0px;
y: 0px;
z-index: auto;
zoom: 1;

karlcow · 2015-10-26T07:55:12Z

All computed values in firefox

align-content: stretch;
align-items: stretch;
align-self: stretch;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
backface-visibility: visible;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: rgb(0, 0, 0);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-spacing: 2px 2px;
border-top-color: rgb(0, 0, 0);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-decoration-break: slice;
box-shadow: none;
box-sizing: content-box;
caption-sidetopclear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: rgb(0, 0, 0);
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
content: none;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: inline;
dominant-baseline: auto;
empty-cells: show;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flex-basis: auto;
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
font-family: serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 16px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: 400;
height: 404px;
hyphens: manual;
image-orientation: 0deg;
image-rendering: auto;
ime-mode: auto;
isolation: auto;
justify-content: flex-start;
left: auto;
letter-spacing: normal;
lighting-color: rgb(255, 255, 255);
line-height: 19.2px;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
marker-end: none;
marker-mid: none;
marker-offset: auto;
marker-start: none;
mask: none;
mask-type: luminance;
max-height: none;
max-width: 1000px;
min-height: 0px;
min-width: 0px;
mix-blend-mode: normal;
object-fitfillobject-position: 50% 50%;
opacity: 1;
order: 0;
outline-color: rgb(0, 0, 0);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
paint-order: normal;
perspective: none;
perspective-origin: 500px 202px;
pointer-events: auto;
position: static;
quotes: "“" "”" "‘" "’";
resize: none;
right: auto;
ruby-align: space-around;
ruby-position: over;
scroll-behavior: auto;
scroll-snap-coordinate: none;
scroll-snap-destination: 0px 0px;
scroll-snap-points-x: none;
scroll-snap-points-y: none;
scroll-snap-type-x: none;
scroll-snap-type-y: none;
shape-rendering: auto;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
table-layout: auto;
text-align: start;
text-anchor: start;
text-decoration: none;
text-decoration-color: rgb(0, 0, 0);
text-decoration-line: none;
text-decoration-style: solid;
text-indent: 0px;
text-orientation: mixed;
text-overflowcliptext-rendering: auto;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-box: border-box;
transform-origin: 500px 202px;
transform-style: flat;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vector-effect: none;
vertical-align: baseline;
visibility: visible;
white-space: normal;
width: 1000px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
writing-mode: horizontal-tb;
z-index: auto;
-moz-appearance: none;
-moz-binding: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-box-align: stretch;
-moz-box-direction: normal;
-moz-box-flex: 0;
-moz-box-ordinal-group: 1;
-moz-box-orient: horizontal;
-moz-box-pack: start;
-moz-column-count: auto;
-moz-column-fill: balance;
-moz-column-gap: 16px;
-moz-column-rule-color: rgb(0, 0, 0);
-moz-column-rule-style: none;
-moz-column-rule-width: 0px;
-moz-column-width: auto;
-moz-float-edge: content-box;
-moz-force-broken-image-icon: 0;
-moz-image-region: auto;
-moz-orient: inline;
-moz-osx-font-smoothing: auto;
-moz-outline-radius-bottomleft: 0px;
-moz-outline-radius-bottomright: 0px;
-moz-outline-radius-topleft: 0px;
-moz-outline-radius-topright: 0px;
-moz-stack-sizing: stretch-to-fit;
-moz-tab-size: 8;
-moz-text-align-last: auto;
-moz-text-size-adjust: auto;
-moz-user-focus: none;
-moz-user-input: auto;
-moz-user-modify: read-only;
-moz-user-select: auto;
-moz-window-dragging: no-drag;

karlcow · 2015-10-26T07:56:50Z

(interesting we seem to have different default values for some of them).

miketaylr · 2015-10-26T16:46:18Z

@karlcow I wonder if this issue would be better brought up to the CSSWG, either as issues to the ref'd specs or just to the main mailing list.

karlcow · 2015-10-26T21:41:21Z

Probably, it's my exploration ground, if I really get the issue. I started to talk about it with David Baron and Florian Rivoal on October 26, 2015 at TPAC.

miketaylr · 2015-10-26T21:55:15Z

👍

karlcow · 2015-10-27T00:19:41Z

ok the spec says too:
https://drafts.csswg.org/css2/visudet.html#propdef-max-width

In CSS 2.2, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

Given the state of implementation… it is not undefined anymore and should be clarified in the specification.

karlcow · 2015-10-27T00:48:31Z

Reported to CSS WG https://lists.w3.org/Archives/Public/www-style/2015Oct/0218.html

cvrebert · 2016-01-22T08:19:44Z

First subthread with substantive replies: https://lists.w3.org/Archives/Public/www-style/2015Dec/0117.html

karlcow · 2016-02-10T02:38:56Z

David Baron has pushed a fix to behave like Blink and WebKit on Gecko
https://bugzilla.mozilla.org/show_bug.cgi?id=823483
And it's working.

karlcow · 2016-02-18T02:37:10Z

I guess the next step here is to get the spec fixed in CSS.

MatsPalmgren mentioned this issue Nov 25, 2016

[css-sizing] percentage [max-]width|height and intrinsic sizes w3c/csswg-drafts#765

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] max-width and intrinsic sizes #12

[css] max-width and intrinsic sizes #12

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

miketaylr commented Oct 26, 2015

karlcow commented Oct 26, 2015

miketaylr commented Oct 26, 2015

karlcow commented Oct 27, 2015

karlcow commented Oct 27, 2015

cvrebert commented Jan 22, 2016

karlcow commented Feb 10, 2016

karlcow commented Feb 18, 2016

[css] max-width and intrinsic sizes #12

[css] max-width and intrinsic sizes #12

Comments

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

karlcow commented Oct 26, 2015

miketaylr commented Oct 26, 2015

karlcow commented Oct 26, 2015

miketaylr commented Oct 26, 2015

karlcow commented Oct 27, 2015

karlcow commented Oct 27, 2015

cvrebert commented Jan 22, 2016

karlcow commented Feb 10, 2016

karlcow commented Feb 18, 2016