diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shapes/shape-outside/shape-image | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/shape-outside/shape-image')
86 files changed, 3476 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html new file mode 100644 index 0000000000..cbde336e9b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 200px; + height: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: left; + width: 100px; + height: 200px; + background-color: green; + } + </style> +</head> +<body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="gradient"></div> + xx xx xx xx + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html new file mode 100644 index 0000000000..d6a65180fd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 200px; + height: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: right; + width: 100px; + height: 200px; + background-color: green; + } + </style> +</head> +<body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="gradient"></div> + xx xx xx xx + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html new file mode 100644 index 0000000000..7a02119981 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/> + <style type="text/css"> + .square { + display: inline-block; + width: 100px; + height: 100px; + line-height: 100px; + background-color: green; + } + #test { + position: absolute; + top: 70px; + width: 200px; + font-size: 0px; + } + #test > .right { + margin-left: 100px; + } + </style> +</head> +<body> + <p> + The test passes if there are four green squares alternating left and right. There + should be no red. + </p> + <div id="test"> + <div class="square"></div><br> + <div class="square right"></div><br> + <div class="square"></div><br> + <div class="square right"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html new file mode 100644 index 0000000000..91550fefc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left float with linear gradient</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple linear gradient."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8000"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 200px; + height: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: left; + width: 200px; + height: 200px; + background: linear-gradient(to right, green 50%, transparent 50%); + shape-outside: linear-gradient(to right, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.5) 50%, transparent 50%); + } + </style> +</head> +<body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="gradient"></div> + xx xx xx xx + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html new file mode 100644 index 0000000000..c956d7b583 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Right float with linear gradient</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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="match" href="reference/shape-outside-linear-gradient-002-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple linear gradient on a right float."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7917"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 200px; + height: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: right; + width: 200px; + height: 200px; + background: linear-gradient(to left, green 50%, transparent 50%); + shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 50%, rgba(51, 51, 51, 0.25) 50%, transparent 100%); + shape-image-threshold: 0.5; + } + </style> +</head> +<body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="gradient"></div> + xx xx xx xx + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html new file mode 100644 index 0000000000..3062aaed95 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Right float with linear gradient</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-002-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple linear gradient on a right float with + shape-margin applied."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7917"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 200px; + height: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: right; + width: 200px; + height: 200px; + background: linear-gradient(to left, green 50%, transparent 50%); + shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 40%, transparent 40%); + shape-margin: 20px; + } + </style> +</head> +<body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="gradient"></div> + xx xx xx xx + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html new file mode 100644 index 0000000000..80048a1465 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape outside and repeating linear gradient</title> + <link rel="author" title="Alan Stearns" href="mailto:stearns@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="match" href="reference/shape-outside-linear-gradient-004-ref.html"/> + <meta name="assert" content="This test verifies that content wraps correctly around a shape defined by a repeating linear gradient."/> + <style type="text/css"> + .container { + position: absolute; + top: 70px; + width: 200px; + font-size: 0px; + } + .square { + display: inline-block; + width: 100px; + height: 100px; + line-height: 100px; + background-color: green; + } + .gradient { + float: left; + width: 100px; + height: 400px; + shape-outside: repeating-linear-gradient(transparent 0px, transparent 100px, white 200px); + shape-image-threshold: 0.5; + } + #failure { + position: absolute; + top: 70px; + width: 200px; + font-size: 0px; + z-index: -1; + } + #failure > .square { + background-color: red; + } + #failure > .right { + margin-left: 100px; + } + </style> +</head> +<body> + <p> + The test passes if there are four green squares alternating left and right. There + should be no red. + </p> + <div id="test" class="container"> + <div class="gradient"></div> + <div class="square"></div><br> + <div class="square"></div><br> + <div class="square"></div><br> + <div class="square"></div> + </div> + <div id="failure"> + <div class="square"></div><br> + <div class="square right"></div><br> + <div class="square"></div><br> + <div class="square right"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html new file mode 100644 index 0000000000..6d0fc21361 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html new file mode 100644 index 0000000000..68243e0ab8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html new file mode 100644 index 0000000000..4ef0b6b5df --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html new file mode 100644 index 0000000000..11ae7faa36 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the bottom. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the top. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html new file mode 100644 index 0000000000..50c80d0ac7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html new file mode 100644 index 0000000000..1e245cb285 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html new file mode 100644 index 0000000000..756b58eaa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html new file mode 100644 index 0000000000..5a78d1c3ea --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html new file mode 100644 index 0000000000..9ecf76d70b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html new file mode 100644 index 0000000000..624884e390 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under sideways-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the bottom. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the top. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html new file mode 100644 index 0000000000..182c5843d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-rl and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html new file mode 100644 index 0000000000..c1098f0a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <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-margin-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient with shape-margin under vertical-lr and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html new file mode 100644 index 0000000000..25c465dd3a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left float with radial gradient</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../../supported-shapes/support/rounded-rectangle.js"></script> + <script src="../../supported-shapes/support/subpixel-utils.js"></script> + <script src="../../supported-shapes/support/test-utils.js"></script> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple radial gradient."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + .container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 10px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: left; + width: 100px; + height: 100px; + shape-outside: radial-gradient(circle, green 0px, transparent 50px); + } + </style> +</head> +<body> + <p> + The test passes if you see green boxes following the contour of a circle. There should be no red. + </p> + <div id="test" class="container"> + x</br> + <div id="gradient"></div> + <span id='test0'>x</span><br/> + <span id='test1'>x</span><br/> + <span id='test2'>x</span><br/> + <span id='test3'>x</span><br/> + <span id='test4'>x</span><br/> + <span id='test5'>x</span><br/> + <span id='test6'>x</span><br/> + <span id='test7'>x</span><br/> + <span id='test8'>x</span><br/> + <span id='test9'>x</span><br/> + x<br/> + </div> + <div id="log"></div> + <script> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1.5), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html new file mode 100644 index 0000000000..3a30e67864 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left float with radial gradient and percentage shape margin</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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-margin-property"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../../supported-shapes/support/rounded-rectangle.js"></script> + <script src="../../supported-shapes/support/subpixel-utils.js"></script> + <script src="../../supported-shapes/support/test-utils.js"></script> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple radial gradient when a percentage margin + is applied."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + .container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 10px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: left; + width: 100px; + height: 100px; + shape-outside: radial-gradient(circle, green 0px, transparent 40px); + shape-margin: 5%; + } + </style> +</head> +<body> + <p> + The test passes if you see green boxes following the contour of a circle. There should be no red. + </p> + <div id="test" class="container"> + x</br> + <div id="gradient"></div> + <span id='test0'>x</span><br/> + <span id='test1'>x</span><br/> + <span id='test2'>x</span><br/> + <span id='test3'>x</span><br/> + <span id='test4'>x</span><br/> + <span id='test5'>x</span><br/> + <span id='test6'>x</span><br/> + <span id='test7'>x</span><br/> + <span id='test8'>x</span><br/> + <span id='test9'>x</span><br/> + x<br/> + </div> + <div id="log"></div> + <script> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html new file mode 100644 index 0000000000..2e52163bf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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-margin-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../../supported-shapes/support/rounded-rectangle.js"></script> + <script src="../../supported-shapes/support/subpixel-utils.js"></script> + <script src="../../supported-shapes/support/test-utils.js"></script> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple radial gradient when a shape margin + and shape-image threshold are applied."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + .container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 10px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: left; + width: 100px; + height: 100px; + shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 25px, rgba(0, 255, 0, 0.25) 25px, transparent 50px); + shape-margin: 25px; + shape-image-threshold: 0.5; + } + </style> +</head> +<body> + <p> + The test passes if you see green boxes following the contour of a circle. There should be no red. + </p> + <div id="test" class="container"> + x</br> + <div id="gradient"></div> + <span id='test0'>x</span><br/> + <span id='test1'>x</span><br/> + <span id='test2'>x</span><br/> + <span id='test3'>x</span><br/> + <span id='test4'>x</span><br/> + <span id='test5'>x</span><br/> + <span id='test6'>x</span><br/> + <span id='test7'>x</span><br/> + <span id='test8'>x</span><br/> + <span id='test9'>x</span><br/> + x<br/> + </div> + <div id="log"></div> + <script> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1.5), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html new file mode 100644 index 0000000000..5224b23cae --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@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"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="../../supported-shapes/support/rounded-rectangle.js"></script> + <script src="../../supported-shapes/support/subpixel-utils.js"></script> + <script src="../../supported-shapes/support/test-utils.js"></script> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that shape-outside respects a + simple radial gradient on a right float when + shape-image-threshold is applied."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + .container { + text-align: right; + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 10px; + line-height: 1; + } + #test { + color: green; + } + #gradient { + float: right; + width: 100px; + height: 100px; + shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 50px, rgba(0, 255, 0, 0.25) 50px); + shape-image-threshold: 0.5; + } + </style> +</head> +<body> + <p> + The test passes if you see green boxes following the contour of a circle. There should be no red. + </p> + <div id="test" class="container"> + x</br> + <div id="gradient"></div> + <span id='test0'>x</span><br/> + <span id='test1'>x</span><br/> + <span id='test2'>x</span><br/> + <span id='test3'>x</span><br/> + <span id='test4'>x</span><br/> + <span id='test5'>x</span><br/> + <span id='test6'>x</span><br/> + <span id='test7'>x</span><br/> + <span id='test8'>x</span><br/> + <span id='test9'>x</span><br/> + x<br/> + </div> + <div id="log"></div> + <script> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 100, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1, "right"), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html new file mode 100644 index 0000000000..a5752dc1be --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/> + <style type="text/css"> + .container { + width: 100px; + height: 100px; + } + img { + float: left; + } + .green { + position: relative; + left: 50px; + width: 50px; + height: 100px; + background: rgb(0, 100, 0); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div class="container"> + <img src="../support/left-half-rectangle-50.png"/> + <div class="green"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html new file mode 100644 index 0000000000..70e3286f3d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/> + <style type="text/css"> + .container { + width: 150px; + height: 100px; + background-color: black; + } + img { + float: left; + } + .green { + float: right; + width: 50px; + height: 100px; + background-color: rgb(0, 100, 0); + } + </style> +</head> +<body> + <p> + The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red. + </p> + <div class="container"> + <img src="../support/left-half-rectangle-70.png"/> + <div class="green"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html new file mode 100644 index 0000000000..6386fb3d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/> + <style type="text/css"> + .container { + width: 100px; + height: 100px; + background: rgb(0, 100, 0); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div class="container"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html new file mode 100644 index 0000000000..9ef7a4a077 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + body { + margin: 0; + } + .green, .blue { + position: absolute; + top: 70px; + } + .left-rect { + left: 10px; + } + .right-rect { + width: 50px; + height: 100px; + left: 70px; + background: rgb(0,100,0); + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div class="green left-rect"> + <img src="../support/left-half-rectangle.png"> + </div> + <div class="green right-rect"></div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html new file mode 100644 index 0000000000..80e47e4150 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + body { + margin: 0; + } + .green { + background-color: rgb(0,100,0); + width: 50px; + height: 100px; + } + .left-rect { left: 10px; } + .right-rect { left: 70px; } + + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px } + + .green, .blue { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div class="green left-rect"></div> + <div class="green right-rect"></div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html new file mode 100644 index 0000000000..fbe9caf9ee --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + body { + margin: 0; + } + .left-rect { + left: 30px; + top: 90px; + } + .right-rect { + left: 140px; + top: 70px; + width: 50px; + height: 100px; + background-color: rgb(0,100,0); + } + .blue { + width: 2px; + height: 100px; + top: 70px; + background-color: blue; + } + .line-left { + left: 135px; + } + .line-right { + left: 195px; + } + .green, .blue { position: absolute; } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div class="green left-rect"> + <img src="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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"> + </div> + <div class="green right-rect"></div> + <div class="blue line-left"></div> + <div class="blue line-right"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html new file mode 100644 index 0000000000..3c5cdf9e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: absolute; + top: 70px; + left: 8px; + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 20px; + line-height: 20px; + text-align: right; + color: green; + } + #image { float: right; } + </style> +</head> +<body> + <p> + The test passes if there's a green square with an image at top right with vertical white and green stripes. + There should be no red. + </p> + <div class="container"> + <img id="image" src="../support/right-half-rectangle.jpg"/> + XXXXX XXXXX XXXXX XXXXX XXXXX + XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html new file mode 100644 index 0000000000..872cbf1e93 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/> + <style type="text/css"> + .container { + width: 150px; + height: 100px; + } + img { + position: relative; + left: -50px; + } + .green { + float: left; + width: 50px; + height: 100px; + background: rgb(0, 100, 0); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div class="container"> + <div class="green"></div> + <img src="../support/right-half-rectangle.png"/> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html new file mode 100644 index 0000000000..98c00d3b67 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 20px; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="../support/left-half-rectangle.jpg"/> + X<br>X<br>X<br>X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html new file mode 100644 index 0000000000..089a3a2a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 10px; + margin-top: 10px; + margin-bottom: 10px; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/> + X<br>X + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html new file mode 100644 index 0000000000..b199b6e398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 10px; + margin-top: 10px; + margin-bottom: 10px; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/> + X<br>X + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html new file mode 100644 index 0000000000..826f5275d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + padding-left: 90px; + font-family: Ahem; + font-size: 40px; + color: green; + } + #image { + position: absolute; + top: 0px; + left: 100px; + float: right; + margin-bottom: 20px; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="../support/right-half-rectangle.png"/> + X<br>X<br>X<br><span style="padding-left: 70px">X</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html new file mode 100644 index 0000000000..999773bd0a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + padding-left: 90px; + font-family: Ahem; + font-size: 40px; + color: green; + } + #image { + position: absolute; + top: 0px; + left: 100px; + float: right; + margin-bottom: 20px; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="../support/right-half-rectangle.gif"/> + X<br>X<br>X<br><span style="padding-left: 70px">X</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html new file mode 100644 index 0000000000..b199b6e398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 10px; + margin-top: 10px; + margin-bottom: 10px; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/> + X<br>X + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html new file mode 100644 index 0000000000..f326e851b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + body { + margin: 0; + } + .green { + background-color: rgb(0,100,0); + width: 100px; + height: 200px; + } + .left-rect { left: 10px; } + .right-rect { left: 120px; } + + .blue { + width: 2px; + height: 200px; + background-color: blue; + } + .left-line { left: 115px; } + .right-line { left: 230px } + + .green, .blue { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div class="green left-rect"></div> + <div class="green right-rect"></div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html new file mode 100644 index 0000000000..0060369e95 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + body { + margin: 0; + } + .green { + top: 70px; + left: 10px; + width: 100px; + height: 100px; + background-color: rgb(0,100,0); + } + .blue { + top: 50px; + left: 60px; + width: 2px; + height: 140px; + background-color: blue; + } + .green, .blue { position: absolute; } + </style> +</head> +<body> + <p> + The test passes if there are two identical green rectangles on either side of the blue line. + There should be no red. + </p> + <div class="green"></div> + <div class="blue"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html new file mode 100644 index 0000000000..0671a06e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-000-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a png image in a data: url is properly respected on a left float."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: left; + shape-outside: url("data:image/png;base64,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"); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="data:image/png;base64,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"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html new file mode 100644 index 0000000000..d66925da6c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-001-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha is treated as if the image had no alpha."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 150px; + color: rgb(0, 100, 0); + background-color: black; + } + #image { + float: left; + width: 100px; + height: 100px; + shape-outside: url("support/left-half-rectangle-70.png"); + } + #failure { + width: 50px; + height: 100px; + background-color: red; + position: absolute; + top: 0px; + right: 0px; + z-index: -1; + } + </style> +</head> +<body> + <p> + The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red. + </p> + <div id="test" class="container"> + <div id="failure"></div> + <div id="image"> + <img src="support/left-half-rectangle-70.png"/> + </div> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html new file mode 100644 index 0000000000..b7e4578afa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-002-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri is properly interpreted as a shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: left; + shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html new file mode 100644 index 0000000000..5994a79282 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-002-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a svg image with 20% alpha and 0.3 shape-image-threshold creates a proper shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle-20.svg"); + shape-image-threshold: 0.3; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle-20.svg"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html new file mode 100644 index 0000000000..117f3a8e2c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-000-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a png image with 50% alpha and 0.6 shape-image-threshold creates a proper shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle-50.png"); + shape-image-threshold: 0.6; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle-50.png"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html new file mode 100644 index 0000000000..d15cbf4157 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a left float</title> + <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@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="match" href="reference/shape-image-002-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri with 70% alpha and 0.8 shape-image-threshold creates a proper shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: left; + shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'); + shape-image-threshold: 0.8; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html new file mode 100644 index 0000000000..1a9fe77176 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real image + shape-margin (px)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given a png file."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 50px/1 Ahem; + } + #test { + width: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle.png"); + shape-margin: 10px; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .container, .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle.png"/> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html new file mode 100644 index 0000000000..351aa02416 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(svg), real image + shape-margin (px)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="match" href="reference/shape-image-007-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given an svg file."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 50px/1 Ahem; + } + #test { + width: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle.svg"); + shape-margin: 10px; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .container, .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle.svg"/> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html new file mode 100644 index 0000000000..64ea7ef342 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(jpg), data uri + shape-margin (%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="match" href="reference/shape-image-008-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin as a percentage when shape-outside is given an jpg data uri."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 50px/1 Ahem; + } + #test { + width: 200px; + height: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + margin: 20px; + shape-outside: url(data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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); + shape-margin: 5%; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .line-left { + left: 135px; + } + .line-right { + left: 195px; + } + .failure { + left: 140px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .container, .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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" /> + X<br/>X + </div> + <div class="blue line-left"></div> + <div class="blue line-right"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html new file mode 100644 index 0000000000..c7978bbabc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from + a shape-outside png file with shape-image-threshold set + the shape-margin in + absolute length."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + #test, #image, #white, .blue, .failure { + position: absolute; + top: 70px; + } + #test, #image { left: 10px; } + #image { z-index: -2; } + + #white { + left: 60px; + width: 10px; + height: 100px; + background-color: white; + z-index: -1; + } + #test { + font: 50px/1 Ahem; + width: 200px; + color: rgb(0,100,0); + z-index: 2; + } + #shape-image { + float: left; + width: 100px; + height: 100px; + shape-outside: url("support/left-half-rectangle-70.png"); + shape-margin: 10px; + shape-image-threshold: 0.75; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + z-index: 3; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: 1; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <img id="image" src="support/left-half-rectangle-70.png"/> + <div id="white"></div> + <div id="test"> + <div id="shape-image"></div> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html new file mode 100644 index 0000000000..07acd2a420 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), data uri + shape-image-threshold + shape-margin (%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from + a shape-outside png file with shape-image-threshold set + the shape-margin as + a percentage."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + #test, #image, #white, .blue, .failure { + position: absolute; + top: 70px; + } + #test, #image { left: 10px; } + #image { z-index: -2; } + + #white { + left: 60px; + width: 10px; + height: 100px; + background-color: white; + z-index: -1; + } + #test { + font: 50px/1 Ahem; + width: 200px; + color: rgb(0,100,0); + z-index: 2; + } + #shape-image { + float: left; + width: 100px; + height: 100px; + shape-outside: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAALpJREFUeNrs0UEVABAURcHP5pcRSxpR9FHGhhycuQ3emxI9TnxQ7pxttfH6jhoCIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACAsQFQAQEiIAAERAgAgJEQAQEiIAAEZDPuwAAAP//AwCf+AWUylJrCQAAAABJRU5ErkJggg==); + shape-margin: 5%; + shape-image-threshold: 0.7; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + z-index: 3; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: 1; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <img id="image" src="data:image/png;base64,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"/> + <div id="white"></div> + <div id="test"> + <div id="shape-image"></div> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html new file mode 100644 index 0000000000..a1286f07bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(svg), real image + shape-image-threshold + shape-margin (px)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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-margin-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/> + <link rel="match" href="reference/shape-image-007-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around the image pixels extracted from + a shape-outside svg file with shape-image-threshold set + the shape-margin in + absolute length."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + #test, #image, #white, .blue, .failure { + position: absolute; + top: 70px; + } + #test, #image { left: 10px; } + #image { z-index: -2; } + + #white { + left: 60px; + width: 10px; + height: 100px; + background-color: white; + z-index: -1; + } + #test { + font: 50px/1 Ahem; + width: 200px; + color: rgb(0,100,0); + z-index: 2; + } + #shape-image { + float: left; + width: 100px; + height: 100px; + shape-outside: url("support/left-half-rectangle-50.svg"); + shape-margin: 10px; + shape-image-threshold: 0.55; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + z-index: 3; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: 1; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <img id="image" src="support/left-half-rectangle-50.svg"/> + <div id="white"></div> + <div id="test"> + <div id="shape-image"></div> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html new file mode 100644 index 0000000000..5ec28f5a7a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Wrapping content around right floating actual jpg image</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-012-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels when shape-outside is given a jpg."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: absolute; + top: 70px; + left: 8px; + font-family: Ahem; + font-size: 20px; + color: green; + line-height: 20px; + } + #test { + width: 200px; + height: 200px; + text-align: right; + background-color: red; + } + #image { + float: right; + margin-left: 10px; + shape-outside: url("support/right-half-rectangle.jpg"); + } + </style> +</head> +<body> + <p> + The test passes if there's a green square with an image at top right with vertical white and green stripes. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle.jpg"/> + XXXXX XXXXX XXXXX XXXXX XXXXX + XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html new file mode 100644 index 0000000000..c487d63138 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Wrapping content around shape given by a right floating png</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-013-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around the shape defined by the data uri png."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + color: rgb(0, 100, 0); + background-color: red; + } + #test { + width: 100px; + height: 100px; + text-align: right; + } + #image { + float: right; + margin-left: 10px; + shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAK5JREFUeNrs0QERADAMArEyr/Uvgfno5R1A0nYulM2JIW8ERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIgLgAgIEAEBIiBABASIgAgIEAEBIiDH+wAAAP//AwD5cQUr8xYXFAAAAABJRU5ErkJggg=="); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle.png"/> + X X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html new file mode 100644 index 0000000000..1a8bf75f16 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Wrapping content around shape given by a right floating svg file</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-002-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around the shape defined by an svg file."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + color: rgb(0, 100, 0); + background-color: red; + } + #test { + width: 100px; + height: 100px; + text-align: right; + } + #image { + float: right; + margin-left: 10px; + shape-outside: url("support/right-half-rectangle.svg"); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle.svg"/> + X + X + </div> + <div id="overlay"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html new file mode 100644 index 0000000000..3d2c1ec6a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a right float</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-013-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a png image with 20% alpha and 0.2 shape-image-threshold creates a proper shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: right; + shape-outside: url(support/right-half-rectangle-20.png); + shape-image-threshold: 0.2; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle-20.png"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html new file mode 100644 index 0000000000..d0eed8d173 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a right float</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-013-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: right; + shape-outside: url(support/right-half-rectangle-70.png); + shape-image-threshold: 0.71; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle-70.png"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html new file mode 100644 index 0000000000..d5afb242db --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Image shape on a right float</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@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="match" href="reference/shape-image-002-ref.html"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + } + #test { + width: 100px; + color: rgb(0, 100, 0); + background-color: red; + } + #image { + float: right; + shape-outside: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsMCwwLDAuNykiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGw9IiMwMDY0MDAiIGQ9Ik01MCwwaDUwYzAsMzMuMywwLDY2LjcsMCwxMDBINTBWMHoiLz4NCjwvc3ZnPg0K"); + shape-image-threshold: 0.71; + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle-70.svg"/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html new file mode 100644 index 0000000000..d94a2a9d92 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(jpg), real image + shape-margin (%)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-018-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + shape-outside: url("support/left-half-rectangle.jpg"); /* size: 100x100, no alpha channel */ + shape-margin: 10%; /* overall shape is 120x120 rectangle with corner radii = 10px */ + } + #failure { + position: absolute; + top: 0px; + left: 40px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="support/left-half-rectangle.jpg"/> + X<br>X<br>X<br>X + <div id="failure"> + X<br>X<br>X<br><span style="margin-left: 120px">X + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html new file mode 100644 index 0000000000..14c3fb2a5f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(png), data uri + shape-margin (px)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-019-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies the boundary of a shape-outside defined by a PNG data URI and a shape-margin."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + margin-top: 10px; + margin-bottom: 100px; + /* 20x20 solid blue PNG */ + shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="); + shape-margin: 10px; + } + #failure { + position: absolute; + top: 0px; + left: 130px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/> + X<br>X + <div id="failure"> + X<br><span style="margin-left: 30px">X</span> + </div> + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html new file mode 100644 index 0000000000..aa3c5cc3aa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(svg), data uri + shape-margin (%)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-020-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI and a shape-margin."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + margin-top: 10px; + margin-bottom: 100px; + shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"); + shape-margin: 5%; + } + #failure { + position: absolute; + top: 0px; + left: 130px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/> + X<br>X + <div id="failure"> + X<br><span style="margin-left: 30px">X</span> + </div> + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html new file mode 100644 index 0000000000..8671fa1c61 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(png), real image + shape-image-threshold + shape-margin (%)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-021-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + shape-outside: url("support/right-half-rectangle.png"); /* size: 100x100, only the right 50x100 half is opaque */ + shape-margin: 10%; /* overall shape is 120x90 rectangle with corner radii = 20px */ + shape-image-threshold: 0.5; + } + #failure { + position: absolute; + top: 0px; + left: 90px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="support/right-half-rectangle.png"/> + X<br>X<br>X<br>X + <div id="failure"> + X<br>X<br>X<br><span style="margin-left: 70px">X</span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html new file mode 100644 index 0000000000..8e567b1708 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(gif), real image + shape-image-threshold + shape-margin (px)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-022-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a GIF image file and shape-margin is correct."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + shape-outside: url("support/right-half-rectangle.gif"); /* size: 100x100, only the right 50x100 half is opaque */ + shape-margin: 20px; /* overall shape is 120x90 rectangle with corner radii = 20px */ + shape-image-threshold: 0.2; + } + #failure { + position: absolute; + top: 0px; + left: 90px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="support/right-half-rectangle.gif"/> + X<br>X<br>X<br>X + <div id="failure"> + X<br>X<br>X<br><span style="margin-left: 70px">X</span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html new file mode 100644 index 0000000000..73e6322c8f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: right float, url(svg), data uri + shape-image-threshold + shape-margin (%)</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@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="match" href="reference/shape-image-023-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: relative; + width: 200px; + font-family: Ahem; + font-size: 40px; + text-align: right; + color: green; + } + #image { + float: right; + margin-left: 100px; + margin-top: 10px; + margin-bottom: 100px; + shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgba(0,0,255, 0.5)'/></svg>"); + shape-image-threshold: 0.4; + shape-margin: 5%; + } + #failure { + position: absolute; + top: 0px; + left: 130px; /* container.width - shape-outside+margin.width - font-size */ + width: 200px; + text-align: left; + color: red; + z-index: -1; + } + </style> +</head> +<body> + <p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p> + <div id="container"> + <img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgb(0,0,255)'/></svg>"/> + X<br>X + <div id="failure"> + X<br><span style="margin-left: 30px">X</span> + </div> + </div> +</body> +</html> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html new file mode 100644 index 0000000000..3ca0ba912b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-outside from img element with different size than the image file</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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="match" href="reference/shape-image-024-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + calculated from the size of the img element, which is different + than the size of the image itself."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 100px/1 Ahem; + } + #test { + width: 211px; + color: rgb(0,100,0); + } + #image { + float: left; + width: 200px; + height: 200px; + shape-outside: url("support/left-half-rectangle.png"); + shape-margin: 10px; + } + .blue { + width: 2px; + height: 200px; + background-color: blue; + } + .left-line { left: 115px; } + .right-line { left: 230px; } + + .failure { + left: 120px; + width: 100px; + height: 200px; + background-color: red; + z-index: -1; + } + .container, .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle.png"/> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html new file mode 100644 index 0000000000..f202ffb2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-outside from first frame of animated gif</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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="match" href="reference/shape-image-025-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside is extracted from the + first frame of an animated gif."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + .container { + left: 10px; + width: 200px; + font: 50px/1 Ahem; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/animated.gif"); + } + .blue-line { + top: 50px; + left: 60px; + width: 2px; + height: 140px; + background-color: blue; + } + .square { + width: 50px; + height: 50px; + } + .green { + left: 10px; + background-color: rgb(0,100,0); + } + .failure { + left: 60px; + background-color: red; + z-index: -1; + } + .container, .blue-line, .square, .failure { position: absolute; } + .container, .square, .failure { top: 70px; } + </style> +</head> +<body> + <p> + The test passes if there are two identical green rectangles on either side of the blue line. + There should be no red. + </p> + <div class="container"> + <img id="image" src="support/animated.gif"/> + X<br/>X + </div> + <div class="green square"></div> + <div class="blue-line"></div> + <div class="failure square"></div> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html new file mode 100644 index 0000000000..74f5f34411 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real offset image + shape-margin (px)</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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-margin-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given a png file. + Additionally, the shape-outside: image element is offset from its + containing block."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + font: 50px/1 Ahem; + padding: 50px; + position: absolute; + top: 20px; + left: -40px; + } + #test { + width: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle.png"); + shape-margin: 10px; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle.png"/> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html new file mode 100644 index 0000000000..112d7b9763 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.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-margin-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given a png file. + Additionally, the shape-outside: image element is given a negative + left offset relative to its containing block."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 50px/1 Ahem; + } + #test { + width: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle.png"); + shape-margin: 20px; + margin-left: -10px; + width: 100px; + height: 100px; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .container, .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html new file mode 100644 index 0000000000..f9dc89d0e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>'shape-outside' layout is updated after the image has been loaded</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-image"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #shape { + float: left; + width: 200px; + height: 200px; + shape-outside: url("support/left-half-rectangle.png?pipe=trickle(d1)"); + } +</style> +<p> + Verify that an image valued shape-outside layout is updated after the image has + been loaded. This test checks that the left edge of the "Hello World" text span + is defined by the 200px wide float before shape-outside image has been loaded and + by the 100px wide image segment after it has been loaded. +</p> +<div id="container"> + <img src="support/left-half-rectangle.png" id="shape"><span id="text">Hello World</span> +</div> +<script> + function elementRect(elementId) { + var s = document.getElementById("container").getBoundingClientRect(); + var r = document.getElementById(elementId).getBoundingClientRect(); + return {left: r.left - s.left, top: r.top - s.top, + width: r.width, height: r.height}; + } + + async_test(t => { + assert_equals(elementRect("text").left, 200, 'image not loaded'); + + window.onload = t.step_func_done(() => { + document.body.offsetTop; // Force a layout. + + assert_equals(elementRect("text").left, 100, 'image loaded'); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif Binary files differnew file mode 100644 index 0000000000..9e424df7cd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png Binary files differnew file mode 100644 index 0000000000..4d5dd8928a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg new file mode 100644 index 0000000000..f221a3d39b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.2)" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png Binary files differnew file mode 100644 index 0000000000..c64fd71dc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg new file mode 100644 index 0000000000..d0109053eb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.5)" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png Binary files differnew file mode 100644 index 0000000000..39f44b5d36 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg new file mode 100644 index 0000000000..7286ce06ce --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg Binary files differnew file mode 100644 index 0000000000..1291251d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png Binary files differnew file mode 100644 index 0000000000..74a8eb47c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg new file mode 100644 index 0000000000..cbd135b5e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png Binary files differnew file mode 100644 index 0000000000..1ca67bd0b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png Binary files differnew file mode 100644 index 0000000000..68bf7d03f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png Binary files differnew file mode 100644 index 0000000000..0df4e24d4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg new file mode 100644 index 0000000000..2e2db1a878 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif Binary files differnew file mode 100644 index 0000000000..8c3a4147cb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg Binary files differnew file mode 100644 index 0000000000..a074d70186 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png Binary files differnew file mode 100644 index 0000000000..ff944b7bdf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg new file mode 100644 index 0000000000..bb06f34d5a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg @@ -0,0 +1,3 @@ +<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"> +<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/> +</svg>
\ No newline at end of file |
