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-box | |
| 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-box')
77 files changed, 4258 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html new file mode 100644 index 0000000000..ea248f1457 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html new file mode 100644 index 0000000000..f7137463d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html new file mode 100644 index 0000000000..d6d061dc1b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html new file mode 100644 index 0000000000..f66a499116 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html new file mode 100644 index 0000000000..4639acc920 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html new file mode 100644 index 0000000000..bb9bdcb82d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html new file mode 100644 index 0000000000..f0e0305caa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html new file mode 100644 index 0000000000..3f6cf9762f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html new file mode 100644 index 0000000000..0d137557c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html new file mode 100644 index 0000000000..964b38949a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html new file mode 100644 index 0000000000..1fd0a1d9b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html new file mode 100644 index 0000000000..c96d926d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html new file mode 100644 index 0000000000..667cdf9b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html new file mode 100644 index 0000000000..683c4590ec --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html new file mode 100644 index 0000000000..628cf3d588 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 198px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #square { + position: absolute; + top: 80px; + left: 200px; + width: 40px; + height: 40px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="line"></div> + <div id="square"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html new file mode 100644 index 0000000000..092840901f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #square { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="line"></div> + <div id="square"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html new file mode 100644 index 0000000000..53c10c892f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: content-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding-left: 25px; + border-left: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html new file mode 100644 index 0000000000..aa9c34ce92 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: content-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding-right: 25px; + border-right: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html new file mode 100644 index 0000000000..0c77300522 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: content-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html new file mode 100644 index 0000000000..c3dc6de8d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: content-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html new file mode 100644 index 0000000000..55c7960876 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html new file mode 100644 index 0000000000..3806e09993 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html new file mode 100644 index 0000000000..8b7e2955f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html new file mode 100644 index 0000000000..d24afcd711 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html new file mode 100644 index 0000000000..aa74b16469 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html new file mode 100644 index 0000000000..a96f6c30de --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html new file mode 100644 index 0000000000..73e4e91096 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html new file mode 100644 index 0000000000..16ed0e5578 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-bottom-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html new file mode 100644 index 0000000000..2c6cc1db9d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .bfc { + position: absolute; + width: 200px; + line-height: 0; + direction: ltr; + } + + .container { + direction: rtl; + unicode-bidi: bidi-override; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <body class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner --> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html new file mode 100644 index 0000000000..7cf8fafc93 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .bfc { + position: absolute; + width: 200px; + line-height: 0; + direction: rtl; + } + + .container { + direction: ltr; + unicode-bidi: bidi-override; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-top-left-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html new file mode 100644 index 0000000000..0aa6993e37 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: padding-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border-left: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html new file mode 100644 index 0000000000..8459758e50 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: padding-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border-right: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html new file mode 100644 index 0000000000..a5cb5e82a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#shape { + margin-left: 25px; + width: 200px; + height: 200px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="shape"></div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html new file mode 100644 index 0000000000..88abbd73f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html new file mode 100644 index 0000000000..b15f4e275b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html new file mode 100644 index 0000000000..9bcadb121d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html new file mode 100644 index 0000000000..de942dc69d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html new file mode 100644 index 0000000000..fd97e01202 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:border-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<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-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:border-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + background-color: red; + color: green; + text-align: right; +} +#test-shape { + float: right; + width: 15px; + height: 10px; + margin: 95px 65px 95px 120px; + shape-margin: 70px; + shape-outside: border-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html new file mode 100644 index 0000000000..863e3c000d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html new file mode 100644 index 0000000000..5b2837187e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius, no margin</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + /* No margin. */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html new file mode 100644 index 0000000000..ff0960fc19 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-003-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html new file mode 100644 index 0000000000..0a7dee8caa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius, no margin</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-004-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + /* No margin. */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html new file mode 100644 index 0000000000..8bd2113921 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-005-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html new file mode 100644 index 0000000000..4afe1d42c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-006-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html new file mode 100644 index 0000000000..4a55ad0364 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-007-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html new file mode 100644 index 0000000000..de0c5d5dce --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-008-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html new file mode 100644 index 0000000000..27119bf33a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-009-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under sideways-rl writing-mode."> + <style> + .container { + writing-mode: sideways-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html new file mode 100644 index 0000000000..dcb60fc495 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-010-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under sideways-rl writing-mode."> + <style> + .container { + writing-mode: sideways-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html new file mode 100644 index 0000000000..c604857c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-011-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html new file mode 100644 index 0000000000..70b16559a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-012-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-bottom-right-radius value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html new file mode 100644 index 0000000000..76a9bbb152 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, shape-outside: content-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-001-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + the content box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: left; + width: 170px; + height: 170px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: content-box; + } + #line { + position: absolute; + top: 0px; + left: 198px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 200px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html new file mode 100644 index 0000000000..c58152efb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, shape-outside: border-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-001-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + the border box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: left; + width: 150px; + height: 150px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box; + } + #line { + position: absolute; + top: 0px; + left: 198px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 200px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html new file mode 100644 index 0000000000..dd2030d9cf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, shape-outside: padding-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-001-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + the padding box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: left; + width: 160px; + height: 160px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: padding-box; + } + #line { + position: absolute; + top: 0px; + left: 198px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 200px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html new file mode 100644 index 0000000000..9465b5197e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, shape-outside: content-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-005-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + the content box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + text-align: right; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: right; + width: 170px; + height: 170px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: content-box; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html new file mode 100644 index 0000000000..cc88efaf04 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, shape-outside: border-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-005-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + the border box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + text-align: right; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: right; + width: 150px; + height: 150px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html new file mode 100644 index 0000000000..3b3e58f0dd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, shape-outside: padding-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-005-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + the padding box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + text-align: right; + width: 300px; + height: 200px; + color: green; + } + #test-shape { + float: right; + width: 160px; + height: 160px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: padding-box; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html new file mode 100644 index 0000000000..3216a76155 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, shape-outside: border-box</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-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-005-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + the border box, with negative margins. + The float area is clipped to the margin box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + text-align: right; + width: 250px; + height: 200px; + color: green; + } + #test-shape { + float: right; + width: 150px; + height: 150px; + margin: -20px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html new file mode 100644 index 0000000000..a6558ae41b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box value."> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: content-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html new file mode 100644 index 0000000000..f20457781e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <title>CSS Shape Test: float right, content-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value."> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: content-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html new file mode 100644 index 0000000000..5ad0463bef --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:content-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<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-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:content-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + color: green; + background-color: red; + text-align: right; +} +#test-shape { + margin-left: 30px; + float: right; + box-sizing: border-box; + width: 200px; + height: 200px; + padding: 95px 40px 95px 120px; + shape-margin: 70px; + shape-outside: content-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html new file mode 100644 index 0000000000..90bc2d3a57 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: content-box; + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html new file mode 100644 index 0000000000..aeae55ca23 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: content-box; + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html new file mode 100644 index 0000000000..b8977a92a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html new file mode 100644 index 0000000000..09d4e57aca --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html new file mode 100644 index 0000000000..c2a21fc520 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html new file mode 100644 index 0000000000..96b162e904 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html new file mode 100644 index 0000000000..f1b7f550fb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-003-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html new file mode 100644 index 0000000000..26f000fc9a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-004-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html new file mode 100644 index 0000000000..39d2a87e9d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-005-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-top-right-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html new file mode 100644 index 0000000000..8cce6f1831 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-006-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-bottom-right-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-bottom-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html new file mode 100644 index 0000000000..61143a8fe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-007-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value."> + <style> + .bfc { + width: 200px; + line-height: 0; + direction: ltr; + } + + .container { + direction: rtl; + unicode-bidi: bidi-override; + } + + .shape { + float: left; + shape-outside: margin-box; + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <body class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html new file mode 100644 index 0000000000..ddae6453d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-008-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value."> + <style> + .bfc { + width: 200px; + line-height: 0; + direction: rtl; + } + + .container { + direction: ltr; + unicode-bidi: bidi-override; + } + + .shape { + float: right; + shape-outside: margin-box; + border-top-left-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html new file mode 100644 index 0000000000..0eee6fb41e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box value."> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: padding-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html new file mode 100644 index 0000000000..eb298dee2b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <title>CSS Shape Test: float right, padding-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box value."> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: padding-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html new file mode 100644 index 0000000000..d816be13e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:padding-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<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-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:padding-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + background-color: red; + color: green; + text-align: right; +} +#test-shape { + margin-left: 30px; + float: right; + box-sizing: border-box; + width: 200px; + height: 200px; + border-width: 95px 40px 95px 120px; + border-style: solid; + border-color: transparent; + shape-margin: 70px; + shape-outside: padding-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html new file mode 100644 index 0000000000..8b775c1526 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: padding-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html new file mode 100644 index 0000000000..ba603db912 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: padding-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> |