PIE htc test
Test 1: border-radius, box-shadow, gradient
Test 4: multiple box-shadow
Test 4: multiple box-shadow
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ with PIE: IE6,7,8
Test 5: text-shadow (edit me!!)
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ IE6,7,8,9
Test 6: border-image
Used image:
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ IE6,7,8,9
Test 7: RGBA
Works with: Chrome 4+, Firefox 3+, Safari 3.1+ with PIE: IE6,7,8
Test 8: Position fixed
Chrome, Firefox, Safari, IE 7+ IE6
Test 9: background-patterns (CSS3 - no images)
- horizontal
- vertical
- picnic
- angled
- angled-135
- checkered
- carbon
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9
Test 10: multiple bodere with boxshadow
I have rainbow borders with rounded corners!
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8
Test 11: background-origin
- background-origin: border-box
- background-origin: content-box
- background-origin: padding-box
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8
Test 12
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8
Matching mask shadow color blends to solid background.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8
Test 14: resize
I have lots of text in a small box which you can resize thanks to the CSS3 resize property.
horizontal
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9
Test 15: box-sizing
box-sizing: content-box (default)
box width: 300 pixels + 10 pixels padding and 1 pixel border on each side = 322 pixels
box-sizing: border-box
box width: 300 pixels, including padding and borders
box-sizing: padding-box
box width: 300 pixels, including padding
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7
Test 16: outline-offset
I have an offline offset
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9
Test 17: columns
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Works with: Chrome, Firefox, Safari with PIE: IE6,7,8,9
Test 18: display:table
display: table-cell;
width: 20%
Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
display: table-cell;
width: 30%
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.
display: table-cell;
without width
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7
Test 19: content
.test19:after{
content: "Hello World";
}
->
Works with: Chrome, Firefox, Safari, IE8, 9 with PIE: IE6,7
Test 20: some selectors
- E[attribute^=value] (value begins exactly with a given string)
- E[attribute|=value] (value either equal to a given string or starting with that string followed by a hyphen (-))
- E[attribute$=value] (value ending exactly with a given string)
- E[attribute*=value] (value containing the a given substring)
- E[attribute~=value]] (value containing a given word, delimited by spaces)
Test 21: css shapes
Works with: Chrome, Firefox, Safari, IE9 with PIE: IE6,7,8
Transparent PNG tests
- with img tag
- background
no-repeat
-
- background
repeat
-
- background
position -50px -50px
-
- background png
on top of an other (position absolute)