search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.47k stars 658 forks source link

[cssom] Should shorthands in object from getComputedStyle be enumerable? #2877

Open upsuper opened 6 years ago

upsuper commented 6 years ago

In #2529 we resolved that object returned from gCS should include shorthands, but it is not clear whether they should be enumerable from from that object.

I think I saw someone iterating the properties from gCS result to copy style of one element to another. If we have every shorthands listed there, there is a risk that stuff would get overridden if the order happens to be unfortunate (shorthand comes after its longhands?)

It was raised during the discussion of #2529.

tabatkins commented 6 years ago

Chrome currently does not include shorthands in the list of properties when you enumerate them:

Example

<!DOCTYPE html>
<body>
<script>
var x = [...getComputedStyle(document.body)];
w(x);
</script>

Outputs: "animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,background-attachment,background-blend-mode,background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size,border-bottom-color,border-bottom-left-radius,border-bottom-right-radius,border-bottom-style,border-bottom-width,border-collapse,border-image-outset,border-image-repeat,border-image-slice,border-image-source,border-image-width,border-left-color,border-left-style,border-left-width,border-right-color,border-right-style,border-right-width,border-top-color,border-top-left-radius,border-top-right-radius,border-top-style,border-top-width,bottom,box-shadow,box-sizing,break-after,break-before,break-inside,caption-side,clear,clip,color,content,cursor,direction,display,empty-cells,float,font-family,font-kerning,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-variant-ligatures,font-variant-caps,font-variant-numeric,font-variant-east-asian,font-weight,height,image-rendering,isolation,justify-items,justify-self,left,letter-spacing,line-height,line-height-step,list-style-image,list-style-position,list-style-type,margin-bottom,margin-left,margin-right,margin-top,max-height,max-width,min-height,min-width,mix-blend-mode,object-fit,object-position,offset-anchor,offset-distance,offset-path,offset-position,offset-rotate,opacity,orphans,outline-color,outline-offset,outline-style,outline-width,overflow-anchor,overflow-wrap,overflow-x,overflow-y,padding-bottom,padding-left,padding-right,padding-top,pointer-events,position,resize,right,scroll-behavior,speak,table-layout,tab-size,text-align,text-align-last,text-decoration,text-decoration-line,text-decoration-style,text-decoration-color,text-decoration-skip-ink,text-justify,text-underline-position,text-indent,text-rendering,text-shadow,text-size-adjust,text-overflow,text-transform,top,touch-action,transition-delay,transition-duration,transition-property,transition-timing-function,unicode-bidi,vertical-align,visibility,white-space,widows,width,will-change,word-break,word-spacing,word-wrap,z-index,zoom,-webkit-appearance,backface-visibility,-webkit-border-horizontal-spacing,-webkit-border-image,-webkit-border-vertical-spacing,-webkit-box-align,-webkit-box-decoration-break,-webkit-box-direction,-webkit-box-flex,-webkit-box-ordinal-group,-webkit-box-orient,-webkit-box-pack,-webkit-box-reflect,column-count,column-gap,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,backdrop-filter,align-content,align-items,align-self,flex-basis,flex-grow,flex-shrink,flex-direction,flex-wrap,justify-content,-webkit-font-smoothing,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column-end,grid-column-start,grid-template-areas,grid-template-columns,grid-template-rows,grid-row-end,grid-row-start,row-gap,-webkit-highlight,hyphens,-webkit-hyphenate-character,-webkit-line-break,-webkit-line-clamp,-webkit-locale,-webkit-margin-before-collapse,-webkit-margin-after-collapse,-webkit-mask-box-image,-webkit-mask-box-image-outset,-webkit-mask-box-image-repeat,-webkit-mask-box-image-slice,-webkit-mask-box-image-source,-webkit-mask-box-image-width,-webkit-mask-clip,-webkit-mask-composite,-webkit-mask-image,-webkit-mask-origin,-webkit-mask-position,-webkit-mask-repeat,-webkit-mask-size,order,perspective,perspective-origin,-webkit-print-color-adjust,-webkit-rtl-ordering,shape-outside,shape-image-threshold,shape-margin,-webkit-tap-highlight-color,-webkit-text-combine,-webkit-text-decorations-in-effect,-webkit-text-emphasis-color,-webkit-text-emphasis-position,-webkit-text-emphasis-style,-webkit-text-fill-color,-webkit-text-orientation,-webkit-text-security,-webkit-text-stroke-color,-webkit-text-stroke-width,transform,transform-origin,transform-style,-webkit-user-drag,-webkit-user-modify,user-select,-webkit-writing-mode,-webkit-app-region,buffered-rendering,clip-path,clip-rule,mask,filter,flood-color,flood-opacity,lighting-color,stop-color,stop-opacity,color-interpolation,color-interpolation-filters,color-rendering,fill,fill-opacity,fill-rule,marker-end,marker-mid,marker-start,mask-type,mask-source-type,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,alignment-baseline,baseline-shift,dominant-baseline,text-anchor,writing-mode,vector-effect,paint-order,d,cx,cy,x,y,r,rx,ry,translate,rotate,scale,caret-color,line-break"

gsnedders commented 6 years ago

We should probably add some idlharness tests into each spec directory for the properties they define.

gsnedders commented 2 years ago

What type of enumerability are we talking about here?

Are we talking about [...getComputedStyle(document.body)] per @tabatkins's comment, or are we talking about Object.getOwnPropertyDescriptor(CSSStyleDeclaration.prototype, "font").enumerable)?

Loirooriol commented 1 year ago

It seems clear to me that CSSStyleDeclaration only contains longhands, e.g. setProperty takes care of expanding shorthands. And in particular for getComputedStyle, the spec says

set decls to a list of all longhand properties that are supported CSS properties

Then, length and item() should only account for longhands.

item() is an indexed property getter, so per https://webidl.spec.whatwg.org/#es-iterable, @@iterator should just be %Array.prototype.values%.

So it follows that [...getComputedStyle(document.body)] should not include shorthands either.

Regarding enumeration:

var arr = [];
for (let p in getComputedStyle(document.body)) arr.push(p);
arr;

https://webidl.spec.whatwg.org/#define-the-attributes says [[Enumerable]]: true, so regardless of whether they are longhands or shorthands, the above should include:

That's the case in Gecko and WebKit, but Blink only enumerates webkitBorderRadius.

Loirooriol commented 1 year ago

And BTW, this should be the same for both document.body.style and getComputedStyle(document.body).

shivamidow commented 1 year ago

Chrome currently does not include shorthands in the list of properties when you enumerate them:

No, Chrome includes font-variant in the enumerated properties, which is a shorthand. I see font-variant in your outputs either.