Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
James Graham
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; border: 50px solid white; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a vertical blue stripe.</p>
|
||||
<div style="width: 200px; height: 50px; background-color: blue;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p>
|
||||
<div style="overflow: hidden; width: 100px; height: 100px;">
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: absolute; left: 100px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: relative; top: 100px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; border-top-right-radius: 75px 50px; border-bottom-right-radius: 75px 50px; border-top-left-radius: 75px 50px; border-bottom-left-radius: 75px 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 50%; margin-top: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 50%; height: 100%; margin-left: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 100px; height: 100px; margin: 75px 0 0 25px; background-color: green;">
|
||||
<div style="width: 50px; height: 100px; background-color: lime;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 50px; height: 50px; margin: 50px 0 0 25px; background-color: green;">
|
||||
<div style="width: 25px; height: 50px; background-color: lime;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
<style>
|
||||
div {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
margin-bottom: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
|
||||
<div style="width: 50%"></div>
|
||||
<div style="width: 50%"></div>
|
||||
|
||||
<div style="width: 20em"></div>
|
||||
<div style="width: 20em"></div>
|
||||
|
||||
<div style="width: 50vw"></div>
|
||||
<div style="width: 50vw"></div>
|
||||
|
||||
<div style="width: 40vh"></div>
|
||||
<div style="width: 40vh"></div>
|
||||
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
|
||||
<div style="width: 30ex"></div>
|
||||
<div style="width: 30ex"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p>
|
||||
<div style="background-color: blue; width: 100px; height: 100px; border-left: 50px solid white; border-top: 100px solid white">
|
||||
<div style="width: 100px; height: 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p>
|
||||
<div style="background-color: green; width: 100px; height: 100px; border-top: 50px solid white;">
|
||||
<div style="width: 50px; height: 100px; background-color: blue;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
|
||||
<div style="background-color: blue; width: 100px; height: 100px; border-left: 100px solid white; border-top: 50px solid white;">
|
||||
<div style="width: 50px; height: 100px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p>
|
||||
<div style="background-color: green; width: 100px; height: 100px; margin-left: 50px;">
|
||||
<div style="width: 100px; height: 50px; background-color: blue;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a vertical blue stripe.</p>
|
||||
<div style="width: 50px; height: 200px; background-color: blue;"></div>
|
||||
|
||||
</body></html>
|
||||
|
After Width: | Height: | Size: 135 B |
|
After Width: | Height: | Size: 135 B |
|
After Width: | Height: | Size: 109 B |
|
After Width: | Height: | Size: 109 B |
|
After Width: | Height: | Size: 135 B |
|
After Width: | Height: | Size: 109 B |
|
After Width: | Height: | Size: 224 B |
|
After Width: | Height: | Size: 218 B |
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
|
After Width: | Height: | Size: 222 B |
|
After Width: | Height: | Size: 231 B |
|
After Width: | Height: | Size: 223 B |
|
After Width: | Height: | Size: 137 B |
|
After Width: | Height: | Size: 691 B |
|
After Width: | Height: | Size: 671 B |
|
After Width: | Height: | Size: 760 B |
|
After Width: | Height: | Size: 757 B |
|
After Width: | Height: | Size: 92 B |
|
After Width: | Height: | Size: 92 B |
|
After Width: | Height: | Size: 78 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 156 B |
|
After Width: | Height: | Size: 85 B |
|
After Width: | Height: | Size: 84 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1 KiB |
|
After Width: | Height: | Size: 180 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>CSS Masking: mask-repeat:round repeat;</title>
|
||||
<link href="mailto:64835173@qq.com" rel="author" title="Li Jun">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze"><!-- 11-09-2013 @TestTWF Shenzhen -->
|
||||
|
||||
</head><body>
|
||||
<p>Test passes if there is a blue square and no red.</p>
|
||||
<div style="width: 200px; height:200px; position: fixed; background-color:blue;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||