diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/spec-examples/reference')
5 files changed, 349 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html new file mode 100644 index 0000000000..573e74cc87 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + #container { + position: absolute; + top: 60px; + text-align: center; + font-family: Ahem; + font-size: 20px; + color: green; + line-height: 1em; + } + #level-1 { + width: 400px; + height: 80px; + } + #level-2 { + width: 200px; + height: 40px; + margin-left: 100px; + } + #level-3 { + width: 100px; + height: 40px; + margin-left: 150px; + } + #level-4 { + width: 50px; + height: 20px; + margin-left: 175px; + } + #level5 { + width: 400px; + height: 20px; + } + #left-triangle, #right-triangle { + position: absolute; + top: 60px; + width: 200px; + height: 200px; + background-color: lightblue; + } + #left-triangle { + clip-path: polygon(0 0, 200px 200px, 0 200px); + } + #right-triangle { + left: 200px; + clip-path: polygon(200px 0, 200px 200px, 0 200px); + } + </style> +</head> +<body> + <p> + The test passes if the green shape does not intersect either of the triangles and + there is one green horizontal bar beneath the triangles. There should be no red. + </p> + <div id="container"> + <div id="level-1"> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX + </div> + <div id="level-2"> + XXXXXXXXX XXXXXXX + </div> + <div id="level-3"> + XXXXX XXX + </div> + <div id="level-4"> + X + </div> + <br> + <div id="level-5"> + XXXXXXXXXXXXXXXXX + </div> + </div> + <div id="left-triangle"></div> + <div id="right-triangle"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html new file mode 100644 index 0000000000..4653e0d690 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + color: green; + } + #square{ + position: absolute; + top: 70px; + width: 196px; + height: 196px; + border: 1px solid black; + z-index: 10; + } + + </style> +</head> +<body> + <p> + The test passes if there are two columns of six green horizontal bars of the same + size inside the square and two columns of six matching green bars outside and to the + right of the square. There should be no red. + </p> + <div id="container"> + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="square"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html new file mode 100644 index 0000000000..50f604e865 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 250px; + height: 105px; + border: 1px solid black; + } + .bar { + position: absolute; + height: 20px; + background-color: green; + } + #line-1 { + top: 10px; + left: 65px; + width: 160px; + } + #line-2 { + top: 40px; + left: 80px; + width: 140px; + } + #line-3 { + top: 70px; + left: 95px; + width: 120px; + } + #triangle { + position: absolute; + top: 70px; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(50px 0px, 100px 100px, 0px 100px); + } + </style> +</head> +<body> + <p> + The test passes if all there are three green horizontal bars to the right of the + triangle that are all inside the rectangle and there should be no green to the left + of the triangle. There should be no red. + </p> + <div id="container"> + <div id="line-1" class="bar"></div> + <div id="line-2" class="bar"></div> + <div id="line-3" class="bar"></div> + </div> + <div id="triangle"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html new file mode 100644 index 0000000000..8f4c8015e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 260px; + height: 120px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-left: 2px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .bar { + position: absolute; + height: 20px; + background-color: green; + } + #bar-1 { + top: 5px; + width: 240px; + } + #bar-2 { + top: 35px; + width: 240px; + } + #bar-3 { + top: 65px; + left: 22px; + width: 220px; + } + #bar-4 { + top: 95px; + left: 52px; + width: 200px; + } + #triangle { + position: absolute; + top: 90px; + width: 100px; + height: 100px; + background-color: lightblue; + margin-left: 2px; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + } + </style> +</head> +<body> + <p> + The test passes if one green bar is inside the top rectangle, three green bars + are in the bottom rectangle, and none intersect the triangle. There should be no red. + </p> + <div id="container"> + <div id="bar-1" class="bar"></div> + <div id="bar-2" class="bar"></div> + <div id="bar-3" class="bar"></div> + <div id="bar-4" class="bar"></div> + </div> + <div id="margin-line"></div> + <div id="triangle"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html new file mode 100644 index 0000000000..cfa7932325 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 262px; + height: 150px; + border: 1px solid black; + } + #failure-container { + + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 15px; + background-color: green; + z-index: -1; + } + #bar-1 { + top: 7px; + left: 2px; + width: 255px; + } + #bar-2 { + top: 37px; + left: 2px; + width: 255px; + } + #bar-3 { + top: 67px; + left: 22px; + width: 225px; + } + #bar-4 { + top: 97px; + left: 122px; + width: 135px; + } + #bar-5 { + top: 127px; + left: 152px; + width: 105px; + } + .triangle { + position: absolute; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + + } + #triangle-1 { + top: 90px; + margin-left: 2px; + } + #triangle-2 { + top: 120px; + margin-left: 102px; + } + </style> +</head> +<body> + <p> + The test passes if one green bar is inside the top rectangle, four green bars + are in the bottom rectangle, and none intersect the triangles. There should be no + red. + </p> + <div id="container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + <div id="bar-4" class="fail"></div> + <div id="bar-5" class="fail"></div> + </div> + <div id="margin-line"></div> + <div id="triangle-1" class="triangle"></div> + <div id="triangle-2" class="triangle"></div> +</body> +</html> |