import { Property , Style } from "@siteimprove/alfa-style" ; import { normalize } from "../common/normalize" ; type Name = Property . Name | Property . Shorthand . Name ; internal export namespace Serialise { export function borderShorthand ( style , property ) { const shorthand = `border-${ property }` as const ; function getLongHand ( side ) { return style . computed ( `border-${ side }-${ property }` ) . toString ( ) ; } let top = getLongHand ( "top" ) ; let right = getLongHand ( "right" ) ; let bottom = getLongHand ( "bottom" ) ; let left = getLongHand ( "left" ) ; if ( left === right ) { left = "" ; if ( bottom === top ) { bottom = "" ; if ( right === top ) { right = "" ; if ( top === Property . get ( `border-top-${ property }` ) . initial . toString ( ) ) { top = "" ; } } } } return [ shorthand , `${ top } ${ right } ${ bottom } ${ left }` . trim ( ) ] ; } export function getLonghand ( style , name ) { const property = style . computed ( name ) . toString ( ) ; return property === Property . get ( name ) . initial . toString ( ) ? "" : property ; } export function outline ( style ) { return normalize ( ( [ "color" , "style" , "width" ] as const ) . map ( ( property ) => getLonghand ( style , `outline-${ property }` ) ) . join ( " " ) ) ; } export function textDecoration ( style ) { return normalize ( ( [ "line" , "color" , "style" , "thickness" ] as const ) . map ( ( property ) => getLonghand ( style , `text-decoration-${ property }` ) ) . join ( " " ) ) ; } export function font ( style ) { const optional = ( [ "style" , "weight" ] as const ) . map ( ( property ) => getLonghand ( style , `font-${ property }` ) ) . join ( " " ) ; const size = style . computed ( "font-size" ) ; const family = style . computed ( "font-family" ) ; if ( optional !== " " ) { return normalize ( `${ optional } ${ size } ${ family }` ) ; } if ( size . value . equals ( Property . get ( "font-size" ) . initial . value ) && family . value . values [ 0 ] . equals ( Property . get ( "font-family" ) . initial . values [ 0 ] ) ) { return "" ; } return normalize ( `${ size } ${ family }` ) ; } export function background ( style ) { const attachment = style . computed ( "background-attachment" ) . value . values ; const clip = style . computed ( "background-clip" ) . value . values ; const image = style . computed ( "background-image" ) . value . values ; const origin = style . computed ( "background-origin" ) . value . values ; const positionX = style . computed ( "background-position-x" ) . value . values ; const positionY = style . computed ( "background-position-y" ) . value . values ; const repeatX = style . computed ( "background-repeat-x" ) . value . values ; const repeatY = style . computed ( "background-repeat-y" ) . value . values ; const size = style . computed ( "background-size" ) . value . values ; function getValue < T > ( array , n , property ? ) { const value = `${ array ?. [ n ] ?? array [ 0 ] }` ; return property !== undefined && value === Property . get ( property ) . initial . toString ( ) ? "" : value ; } function getSize ( n ) { const value = getValue ( size , n , "background-size" ) ; return value === "" ? "" : " / " + value ; } function getPosition ( n ) { const posX = getValue ( positionX , n , "background-position-x" ) ; const posY = getValue ( positionY , n , "background-position-y" ) ; const value = ( posX === "" && posY !== "" ? "0px" : posX ) + " " + posY ; const size = getSize ( n ) ; return size === "" ? value : ( value === " " ? "0px 0px" : value ) + size ; } function getRepeat ( n ) { const value = getValue ( repeatX , n ) + " " + getValue ( repeatY , n ) ; switch ( value ) { case "repeat no-repeat" : return "repeat-x" ; case "no-repeat repeat" : return "repeat-y" ; case "repeat repeat" : return "" ; case "space space" : return "space" ; case "round round" : return "round" ; case "no-repeat no-repeat" : return "no-repeat" ; default : return value ; } } function getBoxes ( n ) { const originBox = getValue ( origin , n ) ; const clipBox = getValue ( clip , n ) ; return originBox === clipBox ? originBox : originBox === Property . get ( "background-origin" ) . initial . toString ( ) && clipBox === Property . get ( "background-clip" ) . initial . toString ( ) ? "" : originBox + " " + clipBox ; } function getLayer ( n ) { const imageValue = getValue ( image , n ) ; return imageValue === "none" ? "" : `${ imageValue } ${ getPosition ( n ) } ${ getRepeat ( n ) } ${ getValue ( attachment , n , "background-attachment" ) } ${ getBoxes ( n ) }` ; } const layers = image . map ( ( _ , i ) => getLayer ( i ) ) ; layers [ layers . length - 1 ] = getLonghand ( style , "background-color" ) + " " + layers [ layers . length - 1 ] ; return layers . map ( normalize ) . filter ( ( layer ) => layer !== "" ) . join ( ", " ) ; } }