[css] max-width and intrinsic sizes

[karlcow]

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

• https://drafts.csswg.org/css-sizing-3/#width-height-keywords
• https://drafts.csswg.org/css2/visudet.html#propdef-max-width

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

[karlcow]

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]

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]

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]

The inspector for the image in blink gives

and

[karlcow]

And in Firefox

and

[karlcow]

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]

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]

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

[miketaylr]

@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]

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]

:+1:

[karlcow]

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]

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

[cvrebert]

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

[karlcow]

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]

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