Are you over 18 and want to see adult content?
More Annotations
A complete backup of www.spa.gov.sa/2041821
Are you over 18 and want to see adult content?
A complete backup of sporza.be/nl/matches/voetbal/buitenland/eng/premier-league/2019-2020/regulier/28/tottenham-hotspur-wolverha
Are you over 18 and want to see adult content?
A complete backup of www.hln.be/sport/voetbal/buitenlands-voetbal/serie-a/live-mertens-begint-op-de-bank-tegen-torino-wordt-hij-
Are you over 18 and want to see adult content?
A complete backup of www.demorgen.be/tv-cultuur/duffy-onthult-waarom-ze-in-2011-plots-stopte-met-zingen-ik-werd-gevangengehouden
Are you over 18 and want to see adult content?
A complete backup of www.nouvelobs.com/l-amerique-selon-trump/20200301.OBS25487/joe-biden-se-relance-en-caroline-du-sud-avant-le
Are you over 18 and want to see adult content?
A complete backup of www.superhaber.tv/eskiya-dunyaya-hukumdar-olmaz-158-bolum-izle-eskiya-dunyaya-hukumdar-olmaz-son-bolum-izle
Are you over 18 and want to see adult content?
A complete backup of www.boerse-social.com/2020/03/02/atx-fruhmover_osterreichische_post_andritz_erste_group_rbi_facc_wienerberg
Are you over 18 and want to see adult content?
A complete backup of www.bbc.co.uk/sport/football/51532901
Are you over 18 and want to see adult content?
Favourite Annotations
A complete backup of diaperstory.tumblr.com
Are you over 18 and want to see adult content?
A complete backup of ethoswatches.com
Are you over 18 and want to see adult content?
A complete backup of cyberdotin.wordpress.com
Are you over 18 and want to see adult content?
A complete backup of brandeyemediaplus.com
Are you over 18 and want to see adult content?
A complete backup of flugzeugforum.de
Are you over 18 and want to see adult content?
A complete backup of metallbau-a-schoene.de
Are you over 18 and want to see adult content?
A complete backup of breathplayfetish.com
Are you over 18 and want to see adult content?
Text
THE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly. Time taken: Specs tested: Want more tests? Be my guest! Cheaters. WebKit claims to support CSS3 background-repeat, but it’s LYING; Results Handcrafted by Lea Verou Donate Handcrafted by Lea Verou DonateTHE CSS3 TEST
YOUR BROWSER SCORES 63% DETERMINED BY PASSING 1558 TESTS OUT OF 2489 TOTAL FOR 568 FEATURES BACKGROUNDS AND BORDERS LEVEL 3TRDEV
100%
PROPERTIES
* background-repeat spaceround
repeat repeat
space repeat
round repeat
no-repeat repeat
repeat space
space space
round space
no-repeat space
repeat round
space round
round round
no-repeat round
repeat no-repeat
space no-repeat
round no-repeat
no-repeat no-repeat
* background-attachment local * background-position bottom 10px right 20pxbottom 10px right
top right 10px
* background-clip border-boxpadding-box
content-box
* background-origin border-boxpadding-box
content-box
* background-size autocover
contain
10px
50%
10px auto
auto 10%
50em 50%
* background url(foo.png), url(bar.svg)top left / 50% 60%
border-box
border-box padding-box url(foo.png) bottom right / cover padding-box content-box * border-top-left-radius 050%
250px 100px
* border-top-right-radius 050%
250px 100px
* border-bottom-right-radius 050%
250px 100px
* border-bottom-left-radius 050%
250px 100px
* border-radius 10px50%
10px / 20px
2px 4px 8px 16px
2px 4px 8px 16px / 2px 4px 8px 16px * border-image-source noneurl(foo.png)
* border-image-slice 1030%
10 10
30% 10
10 30%
30% 30%
10 10 10
30% 10 10
10 30% 10
30% 30% 10
10 10 30%
30% 10 30%
10 30% 30%
30% 30% 30%
10 10 10 10
30% 10 10 10
10 30% 10 10
30% 30% 10 10
10 10 30% 10
30% 10 30% 10
10 30% 30% 10
30% 30% 30% 10
10 10 10 30%
30% 10 10 30%
10 30% 10 30%
30% 30% 10 30%
10 10 30% 30%
30% 10 30% 30%
10 30% 30% 30%
30% 30% 30% 30%
fill 30%
fill 10
fill 2 4 8% 16%
30% fill
10 fill
2 4 8% 16% fill
* border-image-width 10px5%
28
auto
10px 10px
5% 10px
28 10px
auto 10px
10px 5%
5% 5%
28 5%
auto 5%
10px 28
5% 28
28 28
auto 28
10px auto
5% auto
28 auto
auto auto
10px 10% 10
5% 10px 20 auto
* border-image-outset 10px20
10px 20
10px 20px
20 30
2px 3px 4
1 2px 3px 4
* border-image-repeat stretchrepeat
round
space
stretch stretch
repeat stretch
round stretch
space stretch
stretch repeat
repeat repeat
round repeat
space repeat
stretch round
repeat round
round round
space round
stretch space
repeat space
round space
space space
* border-image url(foo.png) 10url(foo.png) 10%
url(foo.png) 10% fill url(foo.png) 10 round url(foo.png) 10 stretch repeat url(foo.png) 10 / 10px url(foo.png) 10 / 10% / 10px url(foo.png) fill 10 / 10% / 10px url(foo.png) fill 10 / 10% / 10px space * box-shadow 1px 1px0 0 black
1px 2px 3px black
1px 2px 3px 4px blackinset 1px 1px
1px 2px 3px 4px black inset BACKGROUNDS AND BORDERS LEVEL 4DEV80%
PROPERTIES
* background-position-x rightcenter
50%
left, left
left, right
right, left
left, 0%
10%, 20%, 40%
0px
30px
0%, 10%, 20%, 30%
left, left, left, left, leftcalc(20px)
calc(20px + 1em)
calc(20px / 2)
calc(20px + 50%)
calc(50% - 10px)
calc(-20px)
calc(-50%)
calc(-20%)
right 20px
left 20px
right -50px
left -50px
right 20px
* background-position-y bottomcenter
50%
top, top
top, bottom
bottom, top
top, 0%
10%, 20%, 40%
0px
30px
0%, 10%, 20%, 30%
top, top, top, top, topcalc(20px)
calc(20px + 1em)
calc(20px / 2)
calc(20px + 50%)
calc(50% - 10px)
calc(-20px)
calc(-50%)
calc(-20%)
bottom 20px
top 20px
bottom -50px
top -50px
bottom 20px
IMAGE VALUES LEVEL 3TR DEV70%
VALUES
* linear-gradient() linear-gradient(white, black)Failed in: cursor linear-gradient(to right, white, black)Failed in: cursor linear-gradient(45deg, white, black)Failed in: cursor linear-gradient(white 50%, black)Failed in: cursor linear-gradient(white 5px, black)Failed in: cursor linear-gradient(white, #f06, black)Failed in: cursor linear-gradient(currentColor, black)Failed in: cursor linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)Failedin: cursor
* radial-gradient() radial-gradient(white, black)Failed in: cursor radial-gradient(circle, white, black)Failed in: cursor radial-gradient(ellipse, white, black)Failed in: cursor radial-gradient(closest-corner, white, black)Failed in: cursor radial-gradient(circle closest-corner, white, black)Failed in: cursor radial-gradient(farthest-side, white, black)Failed in: cursor radial-gradient(circle farthest-side, white, black)Failed in: cursor radial-gradient(50%, white, black)Failed in: cursor radial-gradient(60% 60%, white, black)Failed in: cursor * repeating-linear-gradient() repeating-linear-gradient(white, black)Failed in: cursor * repeating-radial-gradient() repeating-radial-gradient(white, black)Failed in: cursorPROPERTIES
* object-fit fill
contain
cover
none
scale-down
* object-position 50% 50%center
top right
bottom 10px right 20px * image-orientation from-image0deg
90deg
45deg
45deg flip
1turn
100grad
2rad
* image-rendering autosmooth
high-quality
crisp-edges
pixelated
IMAGE VALUES LEVEL 4TR DEV36%
VALUES
* linear-gradient() linear-gradient(45deg, #f06 25%, yellow 25% 50%, #f06 50% 75%, yellow 75%)Failed in: cursor * radial-gradient() radial-gradient(center, red 0% 25%, blue 25% 75%, red 75% 100%)Failed in: cursor * conic-gradient() conic-gradient(white, black)Failed in: cursor conic-gradient(from 5deg, white, black)Failed in: cursor conic-gradient(at top left, white, black)Failed in: cursor conic-gradient(white 50%, black)Failed in: cursor conic-gradient(white 5deg, black)Failed in: cursor conic-gradient(white, #f06, black)Failed in: cursor conic-gradient(currentColor, black)Failed in: cursor conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg)Failed in: cursor * repeating-conic-gradient() repeating-conic-gradient(white, black)Failed in: cursor repeating-conic-gradient(hsla(0, 0%, 100%, .2) 0deg 15deg, hsla(0, 0%, 100%, 0) 0deg 30deg)Failed in: cursor * image() image('sprites.png#xywh=10,30,60,20') image('wavy.svg', 'wavy.png' , 'wavy.gif') image('dark.png', black)image(green)
* image-set() image-set('foo.png' 1x, 'foo-2x.png' 2x, 'foo-print.png' 600dpi) * element() element(#foo) * cross-fade() cross-fade(url(a.png), url(b.png)) cross-fade(url(a.png) 50%, url(b.png)) cross-fade(url(a.png) 50%, white)PROPERTIES
* image-resolution from-imagefrom-image snap
snap from-image
1dppx
1dpcm
300dpi
from-image 300dpi
300dpi from-image
300dpi from-image snap SELECTORS LEVEL 3TR DEV100%
SELECTORS
* Sibling combinator foo ~ bar* ::before ::before
* ::after ::after
* ::first-letter ::first-letter * ::first-line ::first-line*
*
*
* Namespaces *|html
*|html
* :target :target
* :enabled :enabled
* :disabled :disabled* :checked :checked
* :indeterminate :indeterminate* :root :root
* :nth-child :nth-child(even):nth-child(odd)
:nth-child(n)
:nth-child(-n)
:nth-child(0n)
:nth-child(1)
:nth-child(-1)
:nth-child(0)
:nth-child(n+1)
:nth-child(3n+1)
:nth-child(3n + 1)
:nth-child(-n+1)
:nth-child(-n-1)
:nth-child(3n-1)
* :nth-last-child :nth-last-child(even) :nth-last-child(odd):nth-last-child(n)
:nth-last-child(-n)
:nth-last-child(0n)
:nth-last-child(1)
:nth-last-child(-1)
:nth-last-child(0)
:nth-last-child(n+1) :nth-last-child(3n+1) :nth-last-child(3n + 1) :nth-last-child(-n+1) :nth-last-child(-n-1) :nth-last-child(3n-1) * :nth-of-type :nth-of-type(even):nth-of-type(odd)
:nth-of-type(n)
:nth-of-type(-n)
:nth-of-type(0n)
:nth-of-type(1)
:nth-of-type(-1)
:nth-of-type(0)
:nth-of-type(n+1)
:nth-of-type(3n+1)
:nth-of-type(3n + 1):nth-of-type(-n+1)
:nth-of-type(-n-1)
:nth-of-type(3n-1)
* :nth-last-of-type :nth-last-of-type(even) :nth-last-of-type(odd) :nth-last-of-type(n) :nth-last-of-type(-n) :nth-last-of-type(0n) :nth-last-of-type(1) :nth-last-of-type(-1) :nth-last-of-type(0) :nth-last-of-type(n+1) :nth-last-of-type(3n+1) :nth-last-of-type(3n + 1) :nth-last-of-type(-n+1) :nth-last-of-type(-n-1) :nth-last-of-type(3n-1) * :last-child :last-child * :only-child :only-child * :first-of-type :first-of-type * :last-of-type :last-of-type * :only-of-type :only-of-type* :empty :empty
* :not() :not(*)
:not(element)
:not(.class):not(#id):not():not(:link) SELECTORS LEVEL 4TR DEV51%
SELECTORS
* :indeterminate :indeterminate* :blank :blank
* :placeholder-shown :placeholder-shown* :default :default
* :valid :valid
* :invalid :invalid
* :in-range :in-range * :out-of-range :out-of-range * :required :required * :optional :optional * :read-only :read-only * :read-write :read-write * :focus-visible :focus-visible * :focus-within :focus-within* :current :current
* :current() :current(p, li, dt, dd)* :past :past
* :future :future
* :scope :scope
* :any-link :any-link * :local-link :local-link * :target-within :target-within * :lang() :lang(zh, "*-hant") * :not() :not(em, #foo) * :where() :where(em, #foo) :where(:not(:hover)) * :is() :is(em, #foo):is(:not(:hover))
* :has() a:has(> img)dt:has(+ dt)
section:not(:has(h1, h2, h3, h4, h5, h6)) section:has(:not(h1, h2, h3, h4, h5, h6)) * :nth-child of :nth-child(-n+3 of li.important) :nth-child(even of :not()* || foo || bar
* :nth-col() :nth-col(even):nth-col(odd)
:nth-col(n)
:nth-col(-n)
:nth-col(0n)
:nth-col(1)
:nth-col(-1)
:nth-col(0)
:nth-col(n+1)
:nth-col(3n+1)
:nth-col(3n + 1)
:nth-col(-n+1)
:nth-col(-n-1)
:nth-col(3n-1)
* :nth-last-col() :nth-last-col(even):nth-last-col(odd)
:nth-last-col(n)
:nth-last-col(-n)
:nth-last-col(0n)
:nth-last-col(1)
:nth-last-col(-1)
:nth-last-col(0)
:nth-last-col(n+1)
:nth-last-col(3n+1)
:nth-last-col(3n + 1):nth-last-col(-n+1)
:nth-last-col(-n-1)
:nth-last-col(3n-1)
*
*
*
*
*
*
PSEUDO-ELEMENTS LEVEL 4TR DEV100%
SELECTORS
* ::selection ::selection * ::inactive-selection ::inactive-selection * ::spelling-error ::spelling-error * ::grammar-error ::grammar-error* ::marker ::marker
* ::placeholder ::placeholder SCOPING LEVEL 1TR DEV100%
SELECTORS
* :host :host
* :host() :host(*)
:host(.foo)
* :host-context() :host-context(*):host-context(.foo)
* ::slotted() ::slotted(*)::slotted(.foo)
MEDIA QUERIES LEVEL 3TR DEV100%
MEDIA QUERIES
* negation not print not all and (width:1px)* width (width)
(min-width:1px)
(max-width:1000000px)* height (height)
(min-height:1px)
(max-height:1000000px) * device-width (device-width) (min-device-width:1px) (max-device-width:1000000px) * device-height (device-height) (min-device-height:1px) (max-device-height:1000000px) * orientation (orientation:portrait), (orientation:landscape) * aspect-ratio (aspect-ratio) (min-aspect-ratio:1/1000000) (min-aspect-ratio:1 / 1000000) (max-aspect-ratio:1000000/1) * device-aspect-ratio (device-aspect-ratio) (min-device-aspect-ratio:1/1000000) (min-device-aspect-ratio:1 / 1000000) (max-device-aspect-ratio:1000000/1)* color (color)
(min-color: 0)
(max-color: 100)
* color-index all, (color-index) (min-color-index: 0) (max-color-index: 10000000) * monochrome all, (monochrome)(min-monochrome: 0)
(max-monochrome: 10000) * resolution (resolution) (min-resolution: 1dpi) (max-resolution: 1000000dpi) (max-resolution: 1000000dpcm) * scan not tv, (scan: progressive) not tv, (scan: interlace)* grid all, (grid)
(grid: 0), (grid: 1) MEDIA QUERIES LEVEL 4TR DEV19%
MEDIA QUERIES
* resolution (resolution: infinite)* hover (hover)
(hover: none)
(hover: hover)
* any-hover (any-hover)(any-hover: none)
(any-hover: hover)
* pointer (pointer)
(pointer: none)
(pointer: coarse)
(pointer: fine)
* any-pointer (any-pointer)(any-pointer: none)
(any-pointer: coarse)(any-pointer: fine)
* update (update)
(update: none)
(update: slow)
(update: fast)
* overflow-block (overflow-block: none) (overflow-block: scroll) (overflow-block: optional-paged) (overflow-block: paged) * overflow-inline (overflow-inline: none) (overflow-inline: scroll) * color-gamut (color-gamut)(color-gamut: srgb)
(color-gamut: p3)
(color-gamut: rec2020) MEDIA QUERIES LEVEL 5DEV 10%MEDIA QUERIES
* prefers-reduced-motion (prefers-reduced-motion: no-preference) (prefers-reduced-motion: reduce) * prefers-reduced-transparency (prefers-reduced-transparency:no-preference)
(prefers-reduced-transparency: reduce) * prefers-contrast (prefers-contrast: no-preference) (prefers-contrast: high) (prefers-contrast: low) * prefers-color-scheme (prefers-color-scheme: no-preference) (prefers-color-scheme: light) (prefers-color-scheme: dark) * scripting (scripting: none) (scripting: initial-only) (scripting: enabled) * light-level (light-level: dim) (light-level: normal) (light-level: washed) * environment-blending (environment-blending: opaque) (environment-blending: additive) (environment-blending: subtractive) * inverted-colors (inverted-colors: none) (light-level: inverted) BASIC USER INTERFACE LEVEL 3TR DEV60%
PROPERTIES
* box-sizing border-boxcontent-box
* outline-offset -5px0
5px
* resize none
both
horizontal
vertical
* text-overflow clipellipsis
* cursor url(foo.png) 2 2, autodefault
none
context-menu
cell
vertical-text
alias
copy
no-drop
not-allowed
grab
grabbing
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
zoom-in
zoom-out
* caret-color auto
green
* nav-up auto
#foo
#foo current
#foo root
* nav-right auto
#foo
#foo current
#foo root
* nav-down auto
#foo
#foo current
#foo root
* nav-left auto
#foo
#foo current
#foo root
BASIC USER INTERFACE LEVEL 4TR DEV27%
PROPERTIES
* appearance auto
none
* caret auto
green
bar
green bar
* caret-shape auto
bar
block
underscore
* text-overflow clipellipsis
fade
fade(10px)
fade(10%)
'foo'
clip clip
ellipsis clip
fade clip
fade(10px) clip
fade(10%) clip
'foo' clip
clip ellipsis
ellipsis ellipsis
fade ellipsis
fade(10px) ellipsis
fade(10%) ellipsis
'foo' ellipsis
clip fade
ellipsis fade
fade fade
fade(10px) fade
fade(10%) fade
'foo' fade
clip fade(10px)
ellipsis fade(10px)
fade fade(10px)
fade(10px) fade(10px) fade(10%) fade(10px)'foo' fade(10px)
clip fade(10%)
ellipsis fade(10%)
fade fade(10%)
fade(10px) fade(10%)fade(10%) fade(10%)
'foo' fade(10%)
clip 'foo'
ellipsis 'foo'
fade 'foo'
fade(10px) 'foo'
fade(10%) 'foo'
'foo' 'foo'
* user-select auto
text
none
contain
all
TRANSITIONSTR DEV
100%
PROPERTIES
* transition-property noneall
width
width, height
* transition-duration 0s1s
100ms
* transition-timing-function easelinear
ease-in
ease-out
ease-in-out
cubic-bezier(.5, .5, .5, .5) cubic-bezier(.5, 1.5, .5, -2.5)step-start
step-end
steps(3, start)
steps(5, end)
* transition-delay 1s-1s
* transition 1s 2s width linear EASING FUNCTIONSTR DEV0%
PROPERTIES
* transition-timing-function steps(2, jump-start)steps(2, jump-end)
steps(1, jump-both)
steps(2, jump-none)
ANIMATIONSTR DEV
100%
PROPERTIES
* animation-name foofoo, bar
* animation-duration 0s1s
100ms
* animation-timing-function easelinear
ease-in
ease-out
ease-in-out
cubic-bezier(.5, .5, .5, .5) cubic-bezier(.5, 1.5, .5, -2.5)step-start
step-end
steps(3, start)
steps(5, end)
* animation-iteration-count infinite8
4.35
* animation-direction normalalternate
reverse
alternate-reverse
* animation-play-state runningpaused
* animation-delay 1s-1s
* animation-fill-mode noneforwards
backwards
both
* animation foo 1s 2s infinite linear alternate both@RULES
* @keyframes @keyframes foo TRANSFORMS LEVEL 1TR DEV95%
PROPERTIES
* transform none
translate(5px)
translate(5px, 10px)translateY(5px)
translateX(5px)
translateY(5%)
translateX(5%)
scale(2)
scale(2, -1)
scaleX(2)
scaleY(2.5)
rotate(45deg)
skew(45deg)
skew(45deg, 15deg)
skewX(45deg)
skewY(45deg)
matrix(1,-.2,0,1,0,0) matrix(1,-.2,0,1,10,10) translate(50px, -24px) rotate(180deg) scale(.5) skew(0, 22.5deg) translate3d(0, 0, 5px)translateZ(5px)
scale3d(1, 0, -1)
scaleZ(1.5)
rotate3d(1, 1, 1, 45deg)rotateX(-45deg)
rotateY(-45deg)
rotateZ(-45deg)
matrix3d(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0) matrix3d(0,0,0,0,0,0,0,0,0,0,1,0,10,10,0,1) translate3d(50px, -24px, 5px) rotate3d(1, 2, 3, 180deg) scale3d(-1,0, .5)
perspective(600px)
* transform-origin 10pxtop
top left
50% 100%
left 0%
left 50% 0
* transform-box border-boxfill-box
view-box
* transform-style flatpreserve-3d
* perspective none
600px
* perspective-origin 10pxtop
top left
50% 100%
left 0%
* backface-visibility visiblehidden
TRANSFORMS LEVEL 2DEV 0%PROPERTIES
* translate none
50%
50% 50%
50% 50% 10px
* scale none
2
2 2
2 2 2
* rotate none
45deg
x 45deg
y 45deg
z 45deg
-1 0 2 45deg
45deg x
45deg y
45deg z
45deg -1 0 2
* transform-style auto MOTION PATH MODULE LEVEL 1TR DEV35%
PROPERTIES
* offset auto
center
200px 100px ray(45deg closest-side) 200px 100px ray(45deg closest-side) 10% 200px 100px ray(45deg closest-side) 10% reverse 200px 100px ray(45deg closest-side) 10% reverse 45deg 200px 100px ray(45deg closest-side) 10% 45deg reverse 200px 100px ray(45deg closest-side) 45deg 10% 200px 100px ray(45deg closest-side) 45deg reverse 10% 200px 100px ray(45deg closest-side) reverse 10%auto / center
center / 200px 100px 200px 100px ray(45deg closest-side) / 200px 100px 200px 100px ray(45deg closest-side) 10% / 200px 100px 200px 100px ray(45deg closest-side) 10% reverse / 200px 100px 200px 100px ray(45deg closest-side) 10% reverse 45deg / 200px 100px 200px 100px ray(45deg closest-side) 10% 45deg reverse / 200px 100px 200px 100px ray(45deg closest-side) 45deg 10% / 200px 100px 200px 100px ray(45deg closest-side) 45deg reverse 10% / 200px 100px 200px 100px ray(45deg closest-side) reverse 10% / 200px 100px* offset-path none
ray(45deg closest-side) ray(45deg farthest-side) ray(45deg closest-corner) ray(45deg farthest-corner)ray(45deg sides)
ray(0.25turn sides contain) ray(100grad closest-side contain) ray(calc(180deg - 0.25turn) closest-side) inset(10% round 10% 40% 10% 40%) ellipse(at top 50% left 20%) circle(at right 5% top)margin-box
border-box
padding-box
content-box
fill-box
stroke-box
view-box
circle(60%) margin-box polygon(100% 0, 100% 100%, 0 100%) path('M 20 20 H 80 V 30')url(image.png)
url(#id)
* offset-distance 10% * offset-position auto200px
200px 100px
center
* offset-anchor auto200px
200px 100px
center
* offset-rotate auto0deg
reverse
-45deg
auto 180deg
reverse 45deg
2turn reverse
TEXT LEVEL 3TR DEV
50%
PROPERTIES
* text-transform full-widthfull-size-kana
capitalize full-width capitalize full-width full-size-kana* tab-size 4
1em
* line-break auto
loose
normal
strict
anywhere
* word-break normal
keep-all
break-all
* white-space break-spaces* hyphens auto
manual
none
* overflow-wrap normalbreak-word
anywhere
* word-wrap normal
break-word
anywhere
* text-align start
end
left
right
center
justify
match-parent
justify-all
* text-align-all startend
left
right
center
justify
match-parent
* text-align-last autostart
end
left
right
center
justify
match-parent
* text-justify auto
none
inter-word
inter-character
* word-spacing 50%
* text-indent 1em hanging1em each-line
1em hanging each-line * hanging-punctuation nonefirst
last
force-end
allow-end
first last
first force-end
first force-end last first allow-end lastTEXT LEVEL 4TR DEV
9%
PROPERTIES
* text-space-collapse collapsediscard
preserve
preserve-breaks
preserve-spaces
* text-space-trim nonetrim-inner
discard-before
discard-after
trim-inner discard-before trim-inner discard-before discard-after* text-wrap wrap
nowrap
balance
* wrap-before auto
avoid
avoid-line
avoid-flex
line
flex
* wrap-after auto
avoid
avoid-line
avoid-flex
line
flex
* wrap-inside auto
avoid
* hyphenate-character auto'0'
* hyphenate-limit-zone 1%1em
* hyphenate-limit-chars auto5
auto 3
5 4 3
* hyphenate-limit-lines no-limit2
* hyphenate-limit-last nonealways
column
page
spread
TEXT DECORATION LEVEL 3TR DEV100%
PROPERTIES
* text-decoration underline dotted green * text-decoration-line noneunderline
overline
line-through
underline overline
* text-decoration-color white * text-decoration-style soliddouble
dotted
dashed
wavy
* text-underline-position autounder
left
right
under left
under right
* text-emphasis-style nonefilled
open
dot
circle
double-circle
triangle
sesame
open dot
'foo'
* text-emphasis-color green * text-emphasis open dot green * text-emphasis-position over leftover right
under left
under right
* text-shadow none
1px 1px
0 0 black
1px 2px 3px black
TEXT DECORATION LEVEL 4TR DEV50%
PROPERTIES
* text-decoration-skip noneobjects
objects spaces
objects leading-spaces objects trailing-spaces objects leading-spaces trailing-spaces objects leading-spaces trailing-spaces edges objects leading-spaces trailing-spaces edges box-decorationobjects edges
objects box-decorationspaces
spaces edges
spaces edges box-decoration spaces box-decorationleading-spaces
leading-spaces trailing-spaces edges leading-spaces trailing-spaces edges box-decorationedges
edges box-decorationbox-decoration
* text-decoration-skip-ink noneauto
LINE GRID LEVEL 1TR DEV0%
PROPERTIES
* box-snap none
block-start
block-end
center
baseline
last-baseline
* line-grid match-parentcreate
* line-snap none
baseline
contain
FONTS LEVEL 3TR DEV
69%
PROPERTIES
* font-stretch normalultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
* font-size-adjust none.5
* font-synthesis noneweight
style
weight style
style weight
* font-kerning auto
normal
none
* font-variant-position normalsub
super
* font-variant-ligatures normalnone
common-ligatures
no-common-ligatures
discretionary-ligatures no-discretionary-ligatures historical-ligatures no-historical-ligaturescontextual
no-contextual
common-ligatures discretionary-ligatures historical-ligaturescontextual
* font-variant-caps normalsmall-caps
all-small-caps
petite-caps
all-petite-caps
titling-caps
unicase
* font-variant-numeric normallining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
ordinal
slashed-zero
lining-nums proportional-nums diagonal-fractions oldstyle-nums tabular-nums stacked-fractions ordinal slashed-zero slashed-zero ordinal tabular-nums stacked-fractions oldstyle-nums * font-variant-alternates normalhistorical-forms
* font-variant-east-asian normaljis78
jis83
jis90
jis04
simplified
traditional
full-width
proportional-width
ruby
simplified full-width ruby * font-feature-settings normal'c2sc'
'smcp' on
'liga' off
'smcp', 'swsh' 2
DESCRIPTORS
* unicode-range U+416U+0-7F
U+A5, U+4E00-9FFF
U+30??
@RULES
* @font-face @font-faceFONTS LEVEL 4TR DEV
32%
PROPERTIES
* font-variant none
normal
all-petite-caps
historical-forms
super
sub lining-nums contextual ruby * font-feature-settings normal'swsh' 2
* font-language-override normal'SRB'
* font-weight 1
90
750
1000
* font-min-size 12ptsmall
smaller
80%
0
* font-max-size 100ptxx-large
larger
120%
infinity
* font-style oblique 15degoblique -15deg
oblique 0deg
* font-optical-sizing noneauto
* font-palette normallight
dark
@RULES
* @font-feature-values @font-feature-values Jupiter Sans * @font-palette-values @font-palette-values AugustaWRITING MODESTR DEV
100%
PROPERTIES
* direction ltr
rtl
* unicode-bidi normalembed
isolate
bidi-override
isolate-override
plaintext
* writing-mode horizontal-tbvertical-rl
vertical-lr
* text-orientation mixedupright
sideways
* text-combine-upright noneall
COLOR LEVEL 3TR DEV
100%
VALUES
* rgba rgba(0,0,0,.5)* #RGB #F06
#FF0066
* hsl hsl(0,0%,0%)
* hsla hsla(0,0%,0%,.5) * transparent transparent * currentColor currentColorPROPERTIES
* opacity -5
0
.5
1
2
COLOR LEVEL 4TR DEV
38%
VALUES
* Comma-less colors rgb(0% 20% 70%)rgb(0 64 185)
hsl(0 0% 0%)
* / alpha rgba(0% 20% 70% / 50%) rgba(0% 20% 70% / .5) rgba(0 64 185 / 50%)rgba(0 64 185 / .5)
hsla(0 0% 0% /.5)
* optional alpha rgb(0% 20% 70% / 50%) rgb(0% 20% 70% / .5)rgb(0 64 185 / 50%)
rgb(0 64 185 / .5)
hsl(0 0% 0% / .5)
* Hex with alpha #000F#000000FF
* rebeccapurple rebeccapurple * hwb() hwb(0 0% 0%)hwb(0 0% 0% / .5)
* lab() lab(0 0 0)
lab(0 0 0 /.5)
* lch() lch(0 0 0)
lch(0 0 0 / .5)
* gray() gray(50)
gray(50 / .5)
* color() color(.2 .4 .6) color(image-p3 .2. 4 .6)color(foo .2 .4 .6)
color(.2 .4 .6 / .5) color(image-p3 .2 .4 .6 / .5) color(foo .2 .4 .6 / .5) * device-cmyk() device-cmyk(.2 .3 .4 .5) device-cmyk(.2 .3 .4 .5 / .5) device-cmyk(.2 .3 .4 .5 / 50%)PROPERTIES
* color-adjust economyexact
* opacity 45%
MULTI-COLUMN LAYOUTTR DEV97%
PROPERTIES
* column-width 10em
auto
* column-count 2
auto
* columns 100px
3
10em 2
auto 2
10em auto
auto auto
2 10em
auto 10em
2 auto
* column-gap 1em
normal
* column-rule-color red * column-rule-style nonesolid
dotted
* column-rule-width 1px * column-rule transparent1px solid black
* column-span none
all
* column-fill auto
balance
balance-all
VALUES AND UNITS LEVEL 3TR DEV89%
VALUES
* rem 5rem
* ch 5ch
* vw 5vw
* vh 5vh
* vmin 5vmin
* vmax 5vmax
* q 5q
* attr() attr(data-px)attr(data-px px)
attr(data-px px, initial) * calc() calc(1px + 2px)calc(5px*2)
calc(5px/2)
calc(100%/3 - 2*1em - 2*1px) calc(attr(data-px)*2)calc(5px - 10px)
calc(1vw - 1px)
calc(calc(100%))
PROPERTIES
* transform rotate(calc(15deg + 30deg)) VALUES AND UNITS LEVEL 4TR DEV0%
VALUES
* toggle() toggle(1px, 2px) * min() max(10 * (1vw + 1vh) / 2, 12px) * max() max(10 * (1vw + 1vh) / 2, 12px) * clamp() clamp(12px, 10 * (1vw + 1vh) / 2, 100px) ENVIRONMENT VARIABLES LEVEL 1DEV100%
VALUES
* env() env(safe-area-inset-top) env(safe-area-inset-top, 12px) env(safe-area-inset-right) env(safe-area-inset-right, 12px) env(safe-area-inset-bottom) env(safe-area-inset-bottom, 12px) env(safe-area-inset-left) env(safe-area-inset-left, 12px)REGIONSTR DEV
0%
PROPERTIES
* flow-from none
named-flow
* flow-into none
named-flow
* region-fragment autobreak
FLEXIBLE BOX LAYOUTTR DEV98%
PROPERTIES
* align-content flex-startflex-end
space-between
space-around
* align-items flex-startflex-end
* align-self flex-startflex-end
* display flex
inline-flex
* flex none
5 7 10%
* flex-basis auto
content
1px
* flex-direction rowrow-reverse
column
column-reverse
* flex-flow row
row-reverse
column
column-reverse
wrap
wrap-reverse
* flex-grow 0
5
* flex-shrink 1
10
* flex-wrap nowrap
wrap
wrap-reverse
* justify-content flex-startflex-end
space-between
space-around
* min-height auto
* min-width auto
* order 0
1
GRID LAYOUT LEVEL 1TR DEV100%
PROPERTIES
* display grid
inline-grid
* grid-template-columns noneauto
100px
1fr
100px 1fr auto
repeat(2, 100px 1fr) repeat(4, 10px 250px ) 10px 100px 1fr max-content minmax(min-content, 1fr) repeat(auto-fill, minmax(25ch, 1fr))10px 250px
150px 1fr
10px 250px 10px 250px10px
auto minmax(min-content, 1fr) repeat(2, 40px)repeat(5, auto)
* grid-template-rows noneauto
100px
1fr
100px 1fr auto
repeat(2, 100px 1fr) 100px 1fr max-content minmax(min-content, 1fr)10px 250px
50px 1fr 50px
* grid-template-areas none'articles'
'head head'
'head head' 'nav main' 'foot ....' * grid-template none auto 1fr auto / auto 1fr 'a a a' 'b b b' 1fr/ auto 1fr auto
* grid-auto-columns auto1fr
100px
max-content
minmax(min-content, 1fr) * grid-auto-rows auto1fr
100px
100px 30%
100px 30% 1em
min-content
minmax(min-content, 1fr) * grid-auto-flow rowcolumn
row dense
column dense
* grid auto-flow 1fr / 100px none / auto-flow 1fr auto-flow / auto 1fr repeat(auto-fill, 5em) / auto-flow 1fr auto-flow 1fr / repeat(auto-fill, 5em) 'H H ' 'A B ' 'F F ' 30px / auto 1fr * grid-row-start auto4
C
C 2
span C
span 1
* grid-column-start auto4
C
C 2
span C
span 1
* grid-row-end auto
4
C
C 2
span C
span 1
* grid-column-end auto4
C
C 2
span C
span 1
* grid-column auto
1
-1
1 / 1
1 / -1
auto / auto
2 / span 2
* grid-row auto
1
-1
1 / 1
1 / -1
auto / auto
2 / span 2
* grid-area 1 / 1
1 / span 1
span / 10 / -1
* grid-column-gap 0
1em
* grid-row-gap 0
1em
* grid-gap 0 0
0 1em
1em
1em 1em
GRID LAYOUT LEVEL 2TR DEV0%
PROPERTIES
* grid-template-columns subgrid * grid-template-rows subgridBOX ALIGNMENTTR DEV
99%
PROPERTIES
* align-self auto
normal
stretch
baseline
first baseline
last baseline
center
start
end
self-start
self-end
unsafe start
safe start
* align-items normalstretch
baseline
first baseline
last baseline
center
start
end
self-start
self-end
unsafe start
safe start
* align-content normalbaseline
first baseline
last baseline
space-between
space-around
space-evenly
stretch
center
start
end
flex-start
flex-end
unsafe start
safe start
* justify-self auto
normal
stretch
baseline
first baseline
last baseline
center
start
end
self-start
self-end
unsafe start
safe start
left
right
safe right
* justify-items normalstretch
baseline
first baseline
last baseline
center
start
end
self-start
self-end
unsafe start
safe start
left
right
safe right
legacy
legacy left
legacy right
legacy center
* justify-content normalspace-between
space-around
space-evenly
stretch
center
start
end
flex-start
flex-end
unsafe start
safe start
left
right
safe right
* place-content normalbaseline
first baseline
last baseline
space-between
space-around
space-evenly
stretch
center
start
end
flex-start
flex-end
unsafe start
safe start
normal normal
baseline normal
first baseline normal space-between normalcenter normal
unsafe start normal
normal stretch
baseline stretch
first baseline stretch space-between stretchcenter stretch
unsafe start stretchnormal safe right
baseline safe right
first baseline safe right space-between safe rightcenter safe right
unsafe start safe right * place-items normalstretch
baseline
first baseline
last baseline
center
start
end
self-start
self-end
unsafe start
safe start
normal normal
stretch normal
baseline normal
first baseline normalself-start normal
unsafe start normal
normal stretch
stretch stretch
baseline stretch
first baseline stretchself-start stretch
unsafe start stretch normal last baseline stretch last baseline baseline last baseline first baseline last baseline self-start last baseline unsafe start last baselinenormal legacy left
stretch legacy left
baseline legacy left first baseline legacy left self-start legacy left unsafe start legacy left* gap 0 0
0 1em
1em
1em 1em
* column-gap 0
1em
* row-gap 0
1em
CASCADING AND INHERITANCE LEVEL 3TRDEV
100%
VALUES
* unset unset
PROPERTIES
* all initial
inherit
unset
CASCADING AND INHERITANCE LEVEL 4TRDEV
0%
VALUES
* revert revert
PROPERTIES
* all revert
CONDITIONAL RULESTR DEV100%
@RULES
* @support @supports (color: green) @supports not (foo: bar) @supports (color: green) or (color: red) @supports (color: green) and (color: red) @supports (color: green) and (not (foo: bar)) @supports (color: green) or (not (foo: bar))MASKINGTR DEV
41%
PROPERTIES
* clip-path url('#clip')inset(50%)
circle()
ellipse()
polygon(0 10px, 30px 0)circle() border-box
border-box
padding-box
content-box
margin-box
fill-box
stroke-box
view-box
none
* clip-rule nonzero
evenodd
* mask-image none
linear-gradient(black 0%, transparent 100%)url(image.png)
* mask-mode alpha
luminance
match-source
* mask-repeat repeat-xrepeat-y
repeat
space
round
no-repeat
repeat repeat
space repeat
round repeat
no-repeat repeat
repeat space
space space
round space
no-repeat space
repeat round
space round
round round
no-repeat round
repeat no-repeat
space no-repeat
round no-repeat
no-repeat no-repeat
* mask-position centerleft 50%
bottom 10px right 20pxbottom 10px right
top right 10px
* mask-clip border-boxpadding-box
content-box
margin-box
fill-box
stroke-box
view-box
no-clip
* mask-origin border-boxpadding-box
content-box
margin-box
fill-box
stroke-box
view-box
* mask-size auto
10px
cover
contain
10px
50%
10px auto
auto 10%
50em 50%
* mask-composite addsubtract
intersect
exclude
* mask top
space
url(image.png)
url(image.png) luminance url(image.png) luminance top space * mask-border-source noneurl(image.png)
* mask-border-slice 0 fill50% fill
1.1 fill
0 1 fill
0 1 2 fill
0 1 2 3 fill
* mask-border-width auto10px
50%
1
1.0
auto 1
auto 1 50%
auto 1 50% 1.1
* mask-border-outset 01.1
0 1
0 1 2
0 1 2 3
* mask-border-repeat stretchrepeat
round
space
stretch stretch
repeat stretch
round stretch
space stretch
stretch repeat
repeat repeat
round repeat
space repeat
stretch round
repeat round
round round
space round
stretch space
repeat space
round space
space space
* mask-border url(image.png)url(image.png) 10px
url(image.png) space url(image.png) 1 fill url(image.png) 1 fill 10px url(image.png) 1 fill 10px url(image.png) 1 fill 10px 2 * mask-type luminancealpha
COMPOSITING AND BLENDINGTR DEV100%
PROPERTIES
* mix-blend-mode normalmultiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
* isolation auto
isolate
* background-blend-mode normalmultiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
normal, multiply
DISPLAYTR DEV
4%
PROPERTIES
* display run-in
flow
flow-root
block flow
inline flow
run-in flow
block flow-root
inline flow-root
run-in flow-root
block table
inline table
run-in table
block flex
inline flex
run-in flex
block grid
inline grid
run-in grid
block ruby
inline ruby
run-in ruby
inline list-item
list-item inline flow list-item block flow SHAPES LEVEL 1TR DEV93%
PROPERTIES
* shape-outside none inset(10% round 10% 40% 10% 40%) ellipse(at top 50% left 20%) circle(at right 5% top) polygon(100% 0, 100% 100%, 0 100%)margin-box
border-box
padding-box
content-box
inset(10% round 10% 40% 10% 40%) margin-box ellipse(at top 50% left 20%) margin-box circle(at right 5% top) margin-box polygon(100% 0, 100% 100%, 0 100%) margin-boxattr(src url)
url(image.png)
* shape-image-threshold 01
0.0
0.1
* shape-margin 0
10px
50%
SHAPES LEVEL 2DEV 0%PROPERTIES
* shape-inside auto
outside-shape
shape-box
display
inset(10% round 10% 40% 10% 40%) ellipse(at top 50% left 20%) circle(at right 5% top) polygon(100% 0, 100% 100%, 0 100%)url(image.png)
* shape-padding 0
10px
50%
EXCLUSIONSTR DEV
0%
PROPERTIES
* wrap-flow auto
both
start
end
minimum
maximum
clear
* wrap-through wrap
none
FILTER EFFECTS LEVEL 1TR DEV95%
PROPERTIES
* filter none
url(#id)
url(image.svg#id)
blur(5px)
brightness(0.5)
contrast(150%)
drop-shadow(15px 15px 15px black)grayscale(50%)
hue-rotate(50deg)
invert(50%)
opacity(50%)
sepia(50%)
saturate(150%)
grayscale(100%) sepia(100%)* flood-color black
#FFF
* flood-opacity 1
0
0.2
45%
* color-interpolation-filters autosRGB
linearRGB
* lighting-color white#000
FILTER EFFECTS LEVEL 2DEV 0%PROPERTIES
* backdrop-filter noneurl(#id)
url(image.svg#id)
blur(5px)
brightness(0.5)
contrast(150%)
drop-shadow(15px 15px 15px black)grayscale(50%)
hue-rotate(50deg)
invert(50%)
opacity(50%)
sepia(50%)
saturate(150%)
grayscale(100%) sepia(100%) POINTER EVENTSTR DEV100%
PROPERTIES
* touch-action auto
none
pan-x
pan-y
pan-x pan-y
manipulation
FULLSCREEN APITR DEV100%
SELECTORS
* ::backdrop ::backdrop * :fullscreen :fullscreenFRAGMENTATIONTR DEV
91%
PROPERTIES
* break-before auto
avoid
avoid-page
page
left
right
recto
verso
avoid-column
column
avoid-region
region
* break-after auto
avoid
avoid-page
page
left
right
recto
verso
avoid-column
column
avoid-region
region
* break-inside auto
avoid
avoid-page
avoid-column
avoid-region
* box-decoration-break sliceclone
* orphans 1
2
* widows 1
2
POSITIONED LAYOUTTR DEV20%
PROPERTIES
* position sticky
* inset-before auto
10px
50%
* inset-after auto
10px
50%
* inset-start auto
10px
50%
* inset-end auto
10px
50%
WILL CHANGETR DEV
100%
PROPERTIES
* will-change scroll-positioncontents
transform
top, left
CSSOM VIEW MODULETR DEV100%
PROPERTIES
* scroll-behavior autosmooth
RUBYTR DEV
0%
PROPERTIES
* display ruby
ruby-base
ruby-text
ruby-base-container
ruby-text-container
* ruby-position overunder
inter-character
* ruby-merge separatecollapse
auto
* ruby-align start
center
space-between
space-around
SCROLL SNAPTR DEV
99%
PROPERTIES
* scroll-margin 0px
6px 5px
10px 20px 30px
10px 20px 30px 40px
20px 3em 1in 5rem
calc(2px)
calc(3 * 25px)
calc(3 * 25px) 5px 10em calc(1vw - 5px) * scroll-margin-block 10px10px 10px
* scroll-margin-block-end 10px * scroll-margin-block-start 10px * scroll-margin-bottom 10px * scroll-margin-inline 10px10px 10px
* scroll-margin-inline-start 10px * scroll-margin-inline-end 10px * scroll-margin-left 10px * scroll-margin-right 10px * scroll-margin-top 10px * scroll-padding auto0px
6px 5px
10px 20px 30px
10px 20px 30px 40px
10px auto 30px auto
10%
20% 3em 1in 5rem
calc(2px)
calc(50%)
calc(3 * 25px)
calc(3 * 25px) 5px 10% calc(10% - 5px) * scroll-padding-block 10px50%
10px 50%
50% 50%
* scroll-padding-block-end 10px50%
* scroll-padding-block-start 10px50%
* scroll-padding-bottom 10px50%
* scroll-padding-inline 10px50%
10px 50%
50% 50%
* scroll-padding-inline-end 10px50%
* scroll-padding-inline-start 10px50%
* scroll-padding-left 10px50%
* scroll-padding-right 10px50%
* scroll-padding-top 10px50%
* scroll-snap-align nonestart
end
center
none start
end center
center start
end none
center center
* scroll-snap-stop normalalways
* scroll-snap-type nonex mandatory
y mandatory
block mandatory
inline mandatory
both mandatory
x proximity
y proximity
block proximity
inline proximity
both proximity
SCROLL ANCHORINGDEV 100%PROPERTIES
* overflow-anchor noneauto
LOGICAL PROPERTIESTR DEV47%
PROPERTIES
* caption-side inline-startinline-end
* float inline-startinline-end
* clear inline-startinline-end
* text-align start
end
* resize block
inline
* block-size 100px
* inline-size 100px
* min-block-size 100px * min-inline-size 100px * max-block-size 100px * max-inline-size 100px* margin-block 10px
10px 10px
* margin-block-start 10px * margin-block-end 10px * margin-inline 10px10px 10px
* margin-inline-start 10px * margin-inline-end 10px* inset 10px
10px 10px
10px 10px 10px
10px 10px 10px 10px
* inset-block 10px
10px 10px
* inset-block-start 10px * inset-block-end 10px* inset-inline 10px
10px 10px
* inset-inline-start 10px * inset-inline-end 10px * padding-block 10px10px 10px
* padding-block-start 10px * padding-block-end 10px * padding-inline 10px10px 10px
* padding-inline-start 10px * padding-inline-end 10px* border-block 1px
2px dotted
medium dashed green
* border-block-start 1px2px dotted
medium dashed green
* border-block-start-width thin * border-block-start-style dotted * border-block-start-color navy * border-block-end 1px2px dotted
medium dashed green
* border-block-end-width thin * border-block-end-style dotted * border-block-end-color navy * border-block-width thin 2px * border-block-style dotted dashed * border-block-color navy blue* border-inline 1px
2px dotted
medium dashed green
* border-inline-start 1px2px dotted
medium dashed green
* border-inline-start-width thin * border-inline-start-style dotted * border-inline-start-color navy * border-inline-end 1px2px dotted
medium dashed green
* border-inline-end-width thin * border-inline-end-style dotted * border-inline-end-color navy * border-inline-width thin 2px * border-inline-style dotted dashed * border-inline-color navy blue * border-start-start-radius 050%
250px 100px
* border-start-end-radius 050%
250px 100px
* border-end-start-radius 050%
250px 100px
* border-end-end-radius 050%
250px 100px
* margin logical 5px 10px 15px 20px * padding logical 5px 10px 15px 20px * border-color logical red green blue yellow * border-style logical solid dotted dashed none * border-width logical 5px 10px 15px 20px * background-image-transform logicalphysical
rotate
* background-repeat logical repeat-x no-repeat * border-image-transform logicalphysical
rotate
LISTS LEVEL 3TR DEV
53%
PROPERTIES
* list-style-type disclosure-closeddisclosure-open
hebrew
cjk-decimal
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
japanese-informal
japanese-formal
korean-hangul-formal korean-hanja-informalkorean-hanja-formal
simp-chinese-informalsimp-chinese-formal
trad-chinese-informaltrad-chinese-formal
cjk-heavenly-stem
cjk-earthly-branch
trad-chinese-informaltrad-chinese-formal
simp-chinese-informalsimp-chinese-formal
japanese-informal
japanese-formal
arabic-indic
persian
urdu
devanagari
gurmukhi
gujarati
oriya
kannada
malayalam
bengali
tamil
telugu
thai
lao
myanmar
khmer
hangul
hangul-consonant
ethiopic-halehame
ethiopic-numeric
ethiopic-halehame-am ethiopic-halehame-ti-er ethiopic-halehame-ti-etother-style
inside
outside
\32 style
"-"
'-'
symbols("*" "\2020" "\2021" "\A7") symbols(cyclic '*' '\2020' '\2021' '\A7') * marker-side match-selfmatch-parent
* counter-reset foo
foo 1
foo 1 bar
foo 1 bar 2
none
* counter-set foo
foo 1
foo 1 bar
foo 1 bar 2
none
* counter-increment foofoo 1
foo 1 bar
foo 1 bar 2
none
* content counter(chno, upper-latin) '. ' counter(section, upper-roman) ' - '' '
counter(notecntr, disc) ' 'counter(p, none)
counter(h1, upper-alpha) '.' counter(h2, decimal) ' ' '(' counters(list-item, '.') ') '@RULES
* @counter-style @counter-style foo OVERFLOW LEVEL 3TR DEV26%
PROPERTIES
* line-clamp none
1
5 clip
5 ellipsis
5 "… (continued on next page)"* max-lines none
1
* overflow-x visiblehidden
clip
scroll
auto
* overflow-y visiblehidden
clip
scroll
auto
* overflow-inline visiblehidden
clip
scroll
auto
* overflow-block visiblehidden
clip
scroll
auto
* continue auto
discard
OVERFLOW LEVEL 4TR DEV0%
SELECTORS
* ::nth-fragment() :nth-fragment(even):nth-fragment(odd)
:nth-fragment(n)
:nth-fragment(-n)
:nth-fragment(0n)
:nth-fragment(1)
:nth-fragment(-1)
:nth-fragment(0)
:nth-fragment(n+1)
:nth-fragment(3n+1)
:nth-fragment(3n + 1):nth-fragment(-n+1)
:nth-fragment(3n-1)
CONTAINMENTDEV 100%
PROPERTIES
* contain none
strict
content
size
layout
style
paint
INTRINSIC & EXTRINSIC SIZINGTR DEV51%
PROPERTIES
* width stretch
max-content
min-content
fit-content
fit-content(10%)
* min-width stretch
max-content
min-content
fit-content
fit-content(10%)
* max-width stretch
max-content
min-content
fit-content
fit-content(10%)
* height stretch
max-content
min-content
fit-content
fit-content(10%)
* min-height stretchmax-content
min-content
fit-content
fit-content(10%)
* max-height stretchmax-content
min-content
fit-content
fit-content(10%)
* column-width stretchmax-content
min-content
fit-content
fit-content(10%)
OVERSCROLL BEHAVIORDEV100%
PROPERTIES
* overscroll-behavior containnone
auto
contain contain
none contain
auto contain
contain none
none none
auto none
contain auto
none auto
auto auto
* overscroll-behavior-x containnone
auto
* overscroll-behavior-y containnone
auto
SCROLLBARS LEVEL 1TR DEV0%
PROPERTIES
* scrollbar-color autodark
light
red blue
* scrollbar-width autothin
none
12px
PAINTING API LEVEL 1TR DEV20%
VALUES
* paint() paint(company-logo)Failed in: cursor paint(chat-bubble, blue) paint(failing-argument-syntax, 1px, 2px) paint(arc, purple, 0.4turn, 0.8turn, 40px, 15px) LAYOUT API LEVEL 1TR DEV0%
PROPERTIES
* display layout(foo)SHADOW PARTSTR DEV
100%
SELECTORS
* ::part ::part(label) CUSTOM PROPERTIES FOR CASCADING VARIABLESTRDEV
100%
DECLARATION
* --* --foo: 2px
* var(--*) width: var(--foo)width: var(--FOO)
width: var(--foo, 4px) color: rgba(255, 255, 255, var(--foo, .2) ) FILL AND STROKE LEVEL 3TR DEV26%
PROPERTIES
* fill url(foo.png), url(bar.svg)top left / 50% 60%
border-box
border-box padding-box url(foo.png) bottom right / cover padding-box content-box* fill-rule nonzero
evenodd
* fill-break bounding-boxslice
clone
* fill-color green
* fill-image url(foo.png) image('sprites.png#xywh=10,30,60,20') image('wavy.svg', 'wavy.png' , 'wavy.gif') image('dark.png', black)image(green)
linear-gradient(to bottom, yellow 0%, blue 100%)child
child(2)
* fill-origin match-parentfill-box
stroke-box
content-box
padding-box
border-box
* fill-position centerleft 50%
bottom 10px right 20pxbottom 10px right
top right 10px
* fill-size auto
cover
contain
10px
50%
10px auto
auto 10%
50em 50%
* fill-repeat repeat-xrepeat-y
repeat
space
round
no-repeat
repeat repeat
space repeat
round repeat
no-repeat repeat
repeat space
space space
round space
no-repeat space
repeat round
space round
round round
no-repeat round
repeat no-repeat
space no-repeat
round no-repeat
no-repeat no-repeat
* fill-opacity 0.5
45%
* stroke url(foo.png), url(bar.svg)top left / 50% 60%
border-box
border-box padding-box url(foo.png) bottom right / cover padding-box content-box* stroke-width 0
1px
25%
* stroke-align centerinset
outset
* stroke-linecap buttround
square
* stroke-linejoin croparcs
miter
bevel
round
fallback
crop bevel
arcs round
miter fallback
* stroke-miterlimit 4 * stroke-break bounding-boxslice
clone
* stroke-dasharray none0
4px
4px 12%
4px 12% 3em
4px 12% 3em 5px
4px 12% 3em 5px 10%
* stroke-dashoffset 04px
12%
* stroke-dash-corner none15px
* stroke-dash-justify nonestretch
compress
dashes
gaps
stretch dashes
compress gaps dashesstretch gaps
compress dashes gaps * stroke-color green * stroke-image url(foo.png) image('sprites.png#xywh=10,30,60,20') image('wavy.svg', 'wavy.png' , 'wavy.gif') image('dark.png', black)image(green)
linear-gradient(to bottom, yellow 0%, blue 100%)child
child(2)
* stroke-origin match-parentfill-box
stroke-box
content-box
padding-box
border-box
* stroke-position centerleft 50%
bottom 10px right 20pxbottom 10px right
top right 10px
* stroke-size auto
cover
contain
10px
50%
10px auto
auto 10%
50em 50%
* stroke-repeat repeat-xrepeat-y
repeat
space
round
no-repeat
repeat repeat
space repeat
round repeat
no-repeat repeat
repeat space
space space
round space
no-repeat space
repeat round
space round
round round
no-repeat round
repeat no-repeat
space no-repeat
round no-repeat
no-repeat no-repeat
* stroke-opacity 0.545%
CAUTION: This test checks which CSS3 features the browser recognizes, _not_ whether they are implemented correctly.Time taken: 66MS
Limited
time offer: Get 10 free Adobe Stock images.ads
via Carbon
SPECS TESTED:
* Backgrounds and Borders Level 3 * Backgrounds and Borders Level 4 * Image Values Level 3 * Image Values Level 4* Selectors Level 3
* Selectors Level 4
* Pseudo-Elements Level 4* Scoping Level 1
* Media Queries Level 3 * Media Queries Level 4 * Media Queries Level 5 * Basic User Interface Level 3 * Basic User Interface Level 4* Transitions
* Easing Functions
* Animations
* Transforms Level 1 * Transforms Level 2 * Motion Path Module Level 1* Text Level 3
* Text Level 4
* Text Decoration Level 3 * Text Decoration Level 4* Line Grid Level 1
* Fonts Level 3
* Fonts Level 4
* Writing Modes
* Color Level 3
* Color Level 4
* Multi-column Layout * Values and Units Level 3 * Values and Units Level 4 * Environment Variables Level 1* Regions
* Flexible Box Layout * Grid Layout Level 1 * Grid Layout Level 2* Box Alignment
* Cascading and Inheritance Level 3 * Cascading and Inheritance Level 4* Conditional Rules
* Masking
* Compositing and Blending* Display
* Shapes Level 1
* Shapes Level 2
* Exclusions
* Filter Effects Level 1 * Filter Effects Level 2* Pointer Events
* Fullscreen API
* Fragmentation
* Positioned Layout
* Will Change
* CSSOM View Module
* Ruby
* Scroll Snap
* Scroll Anchoring
* Logical Properties* Lists Level 3
* Overflow Level 3
* Overflow Level 4
* Containment
* Intrinsic & Extrinsic Sizing * Overscroll Behavior * Scrollbars Level 1 * Painting API Level 1 * Layout API Level 1* Shadow Parts
* Custom Properties for Cascading Variables * Fill and Stroke Level 3 Want more tests? Be my guest!CHEATERS
* WebKit claims to support CSS3 background-repeat, but it’s LYINGResults
✿ Handcrafted by Lea Verou ✿ DonateDetails
Copyright © 2024 ArchiveBay.com. All rights reserved. Terms of Use | Privacy Policy | DMCA | 2021 | Feedback | Advertising | RSS 2.0