diff --git a/Base/res/html/misc/backgrounds.html b/Base/res/html/misc/backgrounds.html new file mode 100644 index 0000000000..7103b56756 --- /dev/null +++ b/Base/res/html/misc/backgrounds.html @@ -0,0 +1,214 @@ + + + + + CSS Background Tests + + + +

CSS Background Tests

+

These are in no way exhaustive, but they cover a variety of different features.

+

The left and right columns should look identical - left uses a single background shorthand, and right uses separate properties.

+ +

Attachment

+

Should remain motionless relative to the browser window

+
+ background: url('background-repeat.png') fixed +
+
+
+
+
+ + background-image: url('background-repeat.png');
+ background-attachment: fixed; + +
+
+
+
+ +

Should scroll with box content

+
+ background: url('background-repeat.png') local +
+
+
+
+
+ + background-image: url('background-repeat.png');
+ background-attachment: local; + +
+
+
+
+ +

Should remain motionless relative to the box

+
+ background: url('background-repeat.png') scroll +
+
+
+
+
+ + background-image: url('background-repeat.png');
+ background-attachment: scroll; + +
+
+
+
+ +

Position

+
+ background: url('background-repeat.png') bottom 5% right 10px no-repeat +
+
+
+ + background-image: url('background-repeat.png');
+ background-position: bottom 5% right 10px no;
+ background-repeat: no-repeat; + +
+
+ +

Clip and Origin

+ +

Images should fill the content-box, with padding on each side. (5px, 10px, 15px, 20px) and aligned so their top-left corner will be at the top-left of the box. This produces clipping.

+
+ background: url('background-repeat.png') padding-box content-box +
+
+
+ + background-image: url('background-repeat.png');
+ background-origin: padding-box;
+ background-clip: content-box; + +
+
+ +

Size

+

Image should be stretched as large as the box, without distorting or clipping

+
+ background: url('background-repeat.png') center / contain +
+
+
+ + background-image: url('background-repeat.png');
+ background-position: center;
+ background-size: contain; + +
+
+ +

Image should be stretched so that the whole box is covered, without distorting

+
+ background: url('background-repeat.png') center / cover +
+
+
+ + background-image: url('background-repeat.png'); + background-position: center; + background-size: cover; + +
+
+ +

Images should be squashed and repeated

+
+ background: url('background-repeat.png') top / 50% 25px +
+
+
+ + background-image: url('background-repeat.png'); + background-position: top; + background-size: 50% 25px; + +
+
+ +

Repeat

+

See here for in-depth background-repeat tests.

+

Images should all be whole, and be spaced apart to fill the box

+
+ background: url('background-repeat.png') space +
+
+
+ + background-image: url('background-repeat.png'); + background-repeat: space; + +
+
+ +

Images should all be whole, and be distorted to fill the box

+
+ background: url('background-repeat.png') round +
+
+
+ + background-image: url('background-repeat.png');
+ background-repeat: round; + +
+
+ +

Multiple backgrounds

+

Should have one smiley face in each corner and one in the center

+
+ + background: url('background-repeat.png') no-repeat top 5px left 5px,
+ url('background-repeat.png') no-repeat top 5px right 5px,
+ url('background-repeat.png') no-repeat bottom 5px left 5px,
+ url('background-repeat.png') no-repeat bottom 5px right 5px,
+ url('background-repeat.png') no-repeat center cyan; + +
+
+
+ + background-color: cyan;
+ background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
+ background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
+ background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'); + +
+
+ + + diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index 51aa68eb68..edecc2152d 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -77,6 +77,8 @@

  • CSSOM

  • Computed style
  • CSS.supports() and @supports
    • +
  • Attributes
    • +
  • Class List

  • Selectors

  • Selectors
  • Attribute selectors
    • @@ -92,6 +94,8 @@
  • :not
  • :hover

  • Properties

    • +
  • Backgrounds
    • +
  • Background-repeat
  • Box-shadow
  • Opacity
  • Text-decoration
    • @@ -110,8 +114,6 @@
  • Floating boxes with overflow=hidden
  • Float clearing
  • Overflow
    • -
  • Attributes
    • -
  • Class List

  • Features

  • Basic functionality
  • css colors
    • @@ -122,7 +124,6 @@
  • margin collapsing 1
  • margin collapsing 2
  • position: absolute, offset from edges
    • -
  • background image with repetition rules
  • link elements with background box placed with z-index
  • Percentage values
  • position: absolute; for top and left