text-shadow

Ce paragraphe doit avoir une ombre portée sous le texte.

Ce paragraphe ne doit pas avoir une ombre portée sous le texte. Si l'apparence du texte est la même que le paragraphe ci-dessus, text-shadow est non supporté.

box-shadow

Ce paragraphe doit être dans une boite avec une ombre portée.

Ce paragraphe ne doit pas être dans une boite avec une ombre portée. Si l'apparence du texte est la même que le paragraphe ci-dessus, box-shadow est non supporté.

-webkit-box-shadow

Ce paragraphe doit être dans une boite avec une ombre portée.

Ce paragraphe ne doit pas être dans une boite avec une ombre portée. Si l'apparence du texte est la même que le paragraphe ci-dessus, -webkit-box-shadow est non supporté.

multiple backgrounds

Cet élément a des dimensions width et height définies à 400px. Il a quatre images en fond empilées l'une sur l'autre. Vous devez voir un carré vert au premier niveau calé en haut et à gauche, puis juste en dessous l'image de fond orangé, puis le fond magenta et le dernier fond bleu.

border-image

Cet élément a des dimensions width et height définies à 400px. Il dispose d'un border-image aux quatre côtés. Vous devez voir un damier rouge et jaune à chaque coin. Les bordures top et bottom doivent être en damier répété. Les bordures left et right doivent être composées d'un seul damier étiré sur toute la hauteur. Si vous voyez un cadre noir tout autour, border-image est non supporté.

-webkit-border-image

Cet élément a des dimensions width et height définies à 400px. Il dispose d'un border-image aux quatre côtés. Vous devez voir un damier rouge et jaune à chaque coin. Les bordures top et bottom doivent être en damier répété. Les bordures left et right doivent être composées d'un seul damier étiré sur toute la hauteur. Si vous voyez un cadre noir tout autour, -webkit-border-image est non supporté.

-webkit-border-image: round

Cet élément a des dimensions width et height définies à 400px. Il dispose d'un border-image aux quatre côtés, utilisant la valeur 'round'. Vous devez voir un damier rouge et jaune répété tout autour. Si vous voyez un cadre noir tout autour, -webkit-border-image: round est non supporté.

-webkit-border-image: stretch

Cet élément a des dimensions width et height définies à 400px. Il dispose d'un border-image aux quatre côtés, utilisant la valeur 'stretch'. Vous devez voir un damier rouge et jaune à chaque coin et un damier étiré le long des quatre côtés. Si vous voyez un cadre noir tout autour, -webkit-border-image: stretch est non supporté.

text-stroke

Ce paragraphe doit apparaître avec du texte éclairé (L'outline doit être de couleur différente que le texte lui-même).

Ce paragraphe ne doit pas apparaître avec du texte éclairé. Si l'apparence du texte est la même que le paragraphe ci-dessus, text-stroke est non supporté.

-webkit-text-stroke

Ce paragraphe doit apparaître avec du texte éclairé (L'outline doit être noir et le corps du texte jaune).

Ce paragraphe ne doit pas apparaître avec du texte éclairé. Si l'apparence du texte est la même que le paragraphe ci-dessus, -webkit-text-stroke est non supporté.

text-fill-color

Ce paragraphe doit apparaître avec le corps du texte en couleur (la couleur du texte doit être bleue).

Ce paragraphe ne doit pas apparaître avec le corps du texte en couleur. Si l'apparence du texte est la même que le paragraphe ci-dessus, text-fill-color est non supporté.

-webkit-text-fill-color

Ce paragraphe doit apparaître avec le corps du texte en couleur (la couleur du texte doit être bleue).

Ce paragraphe ne doit pas apparaître avec le corps du texte en couleur. Si l'apparence du texte est la même que le paragraphe ci-dessus, -webkit-text-fill-color est non supporté.

border-radius

Ce paragraphe est cerné d'une bordure. Chaque angle est défini par son propre rayon d'arrondi.

Ce paragraphe est cerné d'une bordure. Si l'apparence est la même que le paragraphe ci-dessus, border-radius est non supporté

-webkit-border-radius

Ce paragraphe est cerné d'une bordure. Chaque angle est défini par son propre rayon d'arrondi.

Ce paragraphe est cerné d'une bordure. Si l'apparence est la même que le paragraphe ci-dessus, -webkit-border-radius est non supporté

-webkit-border-radius [chaque angle est précisé]

Ce paragraphe est cerné d'une bordure. Chaque angle est défini par son propre rayon d'arrondi.

iPhone supporte -webkit-border-top-left-radius, -webkit-border-top-right-radius, -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, mais -webkit-border-radius-shorthand est non supporté.

opacity

Ce paragraphe a du texte blanc et un background noir, mais ce dernier apparaît gris en raison d'une opacité de mentionnée à .5

Ce paragraphe doit avoir du texte blanc et un background noir. S'il apparaît comme le paragraphe ci-dessus, opacity est non supporté

appearance

text-overflow: ellipsis

Ce paragraphe a un width de 200px en CSS. L'ensemble du texte passe cette limite en overflow. Si la propriété text-overflow est supportée avec la valeur ellipsis, des points de suspension comme ... sont présent après le dernier caractère visible du paragraphe.

Le paragraphe ci-dessus a un width de 200px, le contenu est stylé en nowrap, la propriété overflow indiquée en hidden et le text-overflow en "ellipsis". Si text-overflow est supporté, les premiers mots du paragraphe apparaissent suivis de trois points de suspension.

text-overflow: clip

Ce paragraphe a un width de 200px en CSS. L'ensemble du texte passe cette limite en overflow.

Le paragraphe ci-dessus a un width de 200px, le contenu est stylé en nowrap, la propriété overflow indiquée en hidden et le text-overflow en "clip". Si text-overflow is supporté, les premiers mots du paragraphe apparaissent et à l'endroit où le texte passe la limite en overflow, il est coupé. Si la limite ne passe pas entre deux mots mais par un caractère, ce dernier apparaitra tronqué net.