diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-shapes/spec-examples | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/spec-examples')
27 files changed, 1779 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> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html new file mode 100644 index 0000000000..57944883b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left."/> + <!-- This test is derived from Example 1 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 200px 200px, 0 200px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, 200px 200px, 0 200px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #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="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">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/shape-outside-002.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-002.html new file mode 100644 index 0000000000..927eaf7f52 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside with clipped left float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left and that the left float shape is clipped to the float's margin box"/> + <!-- This test is derived from Example 2 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 1000px 1000px, 0 1000px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, 200px 200px, 0 200px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #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="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">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/shape-outside-003.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-003.html new file mode 100644 index 0000000000..33045f309f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-003.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside with clipped right float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left and that the right float shape is clipped to the float's margin box"/> + <!-- This test is derived from Example 2 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 200px 200px, 0 200px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, -800px 1000px, 200px 1000px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #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="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">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/shape-outside-004.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-004.html new file mode 100644 index 0000000000..b2f6d8da3d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-004.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: inset with no extent and inline content - inset(50% 50% 50% 50%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-004-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that a shape with no extent allow inline + content to flow through all of the float's box."/> + <!-- This test is derived from Example 3 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: inset(50% 50% 50% 50%); + float: left; + width: 200px; + height: 200px; + } + #failure { + color: red; + z-index: -1; + } + #test, #failure { + position: absolute; + top: 70px; + } + #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="test" class="container"> + <div id="test-float-left"></div> + 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="failure" class="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/shape-outside-005.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-005.html new file mode 100644 index 0000000000..7b9aedb83e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-005.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: inset with no extent and inline content - inset(150% 150% 0% 0%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-004-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that a shape with no extent allow inline + content to flow through all of the float's box."/> + <!-- This test is derived from Example 3 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: inset(150% 150% 0% 0%); + float: left; + width: 200px; + height: 200px; + } + #failure { + color: red; + z-index: -1; + } + #test, #failure { + position: absolute; + top: 70px; + } + #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="test" class="container"> + <div id="test-float-left"></div> + 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="failure" class="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/shape-outside-006.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-006.html new file mode 100644 index 0000000000..671c098604 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-006.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-outside with open areas on both the left & right of + the float area</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps only on one side of + the float even though there is open area on both the left + and right sides of the float."/> + <!-- This test is derived from Example 4 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 250px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-top: 5px; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(50px 0px, 100px 100px, 0px 100px); + float: left; + width: 100px; + height: 100px; + } + #failure-container { + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + .fail { + position: absolute; + height: 20px; + background-color: red; + } + #bar-1 { + top: 11px; + left: 66px; + width: 160px; + } + #bar-2 { + top: 41px; + left: 81px; + width: 140px; + } + #bar-3 { + top: 71px; + left: 96px; + 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="test" class="container"> + <div id="test-float-left"></div> + XXXXXXXX XXXXXXX XXXXXX + </div> + <div id="failure-container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + </div> + <div id="triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html new file mode 100644 index 0000000000..0db826f58e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape smaller than float content area - 1 float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-007-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that inline content only wraps around the + shape, and otherwise overlays the rest of the float margin + box"/> + <!-- This test is derived from Example 5 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 260px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-left: 2px; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 70px, 50px 120px, 0 120px); + float: left; + width: 100px; + height: 100px; + margin-top: 20px; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 20px; + background-color: red; + z-index: -1; + } + #bar-1 { + top: 6px; + left: 3px; + width: 240px; + } + #bar-2 { + top: 36px; + left: 3px; + width: 240px; + } + #bar-3 { + top: 66px; + left: 23px; + width: 220px; + } + #bar-4 { + top: 96px; + left: 53px; + 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="test" class="container"> + <div id="test-float-left"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX + </div> + <div id="margin-line"></div> + <div id="failure-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> + <div id="triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html new file mode 100644 index 0000000000..744022801a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape smaller than float content area - 2 floats</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-008-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that inline content only wraps around the + shapes, and otherwise overlays the rest of the float margin + boxes when two floats are stacked next to each other."/> + <!-- This test is derived from Example 5 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 260px; + font-family: Ahem; + font-size: 15px; + line-height: 2em; + border: 1px solid black; + padding-left: 2px; + } + #test { + color: green; + } + .test-float-left { + shape-outside: polygon(0 70px, 50px 120px, 0 120px); + float: left; + width: 100px; + height: 100px; + margin-top: 20px; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 15px; + background-color: red; + z-index: -1; + } + #bar-1 { + top: 8px; + left: 3px; + width: 255px; + } + #bar-2 { + top: 38px; + left: 3px; + width: 255px; + } + #bar-3 { + top: 68px; + left: 23px; + width: 225px; + } + #bar-4 { + top: 98px; + left: 123px; + width: 135px; + } + #bar-5 { + top: 128px; + left: 153px; + 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="test" class="container"> + <div class="test-float-left"></div> + XXXXXXXXXXXXXXXXX + <div class="test-float-left"></div> + XXXXXXXXXXXXXXXXX + XXXXXXXXXXXXXXX + XXXXXXXXX + XXXXXXX + </div> + <div id="margin-line"></div> + <div id="failure-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="triangle-1" class="triangle"></div> + <div id="triangle-2" class="triangle"></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html new file mode 100644 index 0000000000..4f6a4f732d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - url(), alpha channel, opacity 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel that is completely + transparent."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + width: 400px; + color: green; + } + #image { + float: left; + shape-outside: url("support/circle-no-shadow.png"); + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, + the long green bar is beneath the circle, and no bars intersect the circle. There + should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/circle-no-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html new file mode 100644 index 0000000000..5f63c12cd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel that has some + opacity."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + color: green; + } + #image { + float: left; + shape-outside: url("support/circle-shadow.png"); + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the green horizontal bars are to the right of the circle, + and no bars intersect the circle's shadow. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/circle-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html new file mode 100644 index 0000000000..129412f1f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - shape-image-threshold - 0.9</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies content flows around a shape that is + defined in the image's alpha channel and adjusted by the + image-threshold" /> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + color: green; + } + #test-image { + float: left; + shape-outside: url("support/circle-shadow.png"); + shape-image-threshold: 0.9; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, all + intersect the shadow, none intersect the circle and the long green bar is beneath the + circle. There should be no red. + </p> + <div id="test" class="container"> + <img id="test-image" src="support/circle-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html new file mode 100644 index 0000000000..329f033a4a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - shape-margin</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel and adjusted by + the shape-margin."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + width: 400px; + color: green; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test-image { + float: left; + shape-outside: url("support/circle-no-shadow.png"); + shape-margin: 15px; + } + #margin-circle { + position: absolute; + top: -15px; + left: -15px; + width: 230px; + height: 230px; + background-color: blue; + border-radius: 150px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [200, 214, 216, 214, 200, 158, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, + the long green bar is beneath the circle, and no bars intersect the circle. There + should be no red. + </p> + <div id="test"> + <img id="test-image" src="support/circle-no-shadow.png"/> + <div id="margin-circle"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + <span id="line-6">XXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html new file mode 100644 index 0000000000..682ac0986e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - margin-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its margin box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + position: relative; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + margin: 40px; + border-radius: 90px; + shape-outside: margin-box; + } + #border-shape { + position: absolute; + top: 0px; + left: 0px; + width: 160px; + height: 160px; + background-color: lightblue; + border: 20px solid lightblue; + border-radius: 90px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 3, [182, 198, 200, 198, 182, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test" class="container"> + <div id="box"></div> + <div id="border-shape"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html new file mode 100644 index 0000000000..23b6b4e348 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - border-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its border box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + width: 400px; + color: green; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + border: 40px solid lightblue; + border-radius: 90px; + shape-outside: border-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html new file mode 100644 index 0000000000..a7c4d591bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - padding-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its padding box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + padding: 40px; + border-radius: 90px; + shape-outside: padding-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html new file mode 100644 index 0000000000..2e9c193044 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - content-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its content box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 200px; + height: 200px; + background-color: lightblue; + border-radius: 90px; + shape-outside: content-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html new file mode 100644 index 0000000000..6c285e07f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-margin offset from a polygonal shape-outside</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that that content flows around the shape-margin + defined on a polygonal shape-outside."/> + <!-- This test is derived from Example 10 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + color: green; + width: 300px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #shape-box { + float: left; + width: 200px; + height: 200px; + shape-outside: polygon(20px 40px, 160px 180px, 20px 180px); + shape-margin: 20px; + } + img { + position: absolute; + top: 0px; + left: 0px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({single_test: true}); + document.fonts.ready.then(()=> { + approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]); + done(); + }); + </script> +</head> +<body> + <p> + The test passes if the longest green horizontal bar is beneath the triangle and the + rest of them are to its right and none intersect it. There should be no red. + </p> + <div id="test"> + <div id="shape-box"></div> + <img src="support/rounded-triangle.svg"> + <span id="line-0">XXXXXXXXXX</span> + <span id="line-1">XXXXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXX</span> + <span id="line-4">XXX</span> + <span id="line-5">XXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html new file mode 100644 index 0000000000..22828e3984 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - alpha channel, opacity > 0 + shape-margin</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel and the shape-margin."/> + <!-- This test is derived from Example 11 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #image { + float: left; + shape-outside: url("support/circle-shadow.png"); + shape-margin: 20px; + } + #margin-circle { + position: absolute; + top: 0px; + left: 0px; + width: 300px; + height: 300px; + background-color: black; + clip-path: ellipse(141px 127px at 115px 100px); + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [242, 256, 258, 256, 242, 204, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the black edge + of circle, the long green bar is beneath it, and no bars intersect the black. + There should be no red. + </p> + <div id="test"> + <img id="image" src="support/circle-shadow.png"/> + <div id="margin-circle"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + <span id="line-6">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png Binary files differnew file mode 100644 index 0000000000..4ce5ca02fe --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png Binary files differnew file mode 100644 index 0000000000..ec881dec4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg b/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg new file mode 100644 index 0000000000..68d87d11d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px"> +<g> + <path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5 + C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js b/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js new file mode 100644 index 0000000000..6939b753aa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js @@ -0,0 +1,16 @@ +function approxShapeTest(testId, linePrefix, epsilon, lineOffsets) { + var isPositioned = { 'relative': true, 'fixed': true, 'absolute': true, 'sticky': true }, + testDiv = document.getElementById(testId), + testOffset = isPositioned[getComputedStyle(testDiv).position] ? 0 : testDiv.offsetLeft, + firstLine = document.getElementById(linePrefix + '0'); + + function runTest() { + assert_not_equals(firstLine.offsetLeft, testOffset, "Shape layout should have happened already."); + + for (var i = 0; i < lineOffsets.length; i++) { + var line = document.getElementById(linePrefix + i); + assert_approx_equals(line.offsetLeft, lineOffsets[i] + testOffset, epsilon, 'Line ' + i + ' is positioned properly'); + } + } + runTest(); +} |
