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-inline | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.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-inline')
129 files changed, 5336 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-inline/META.yml b/testing/web-platform/tests/css/css-inline/META.yml new file mode 100644 index 0000000000..42e669d316 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-inline/ +suggested_reviewers: + - dauwhe + - fantasai + - rachelandrew diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-computed.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-computed.html new file mode 100644 index 0000000000..e19f7ffca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-computed.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> + +<script> +test_computed_value('baseline-source', 'auto'); +test_computed_value('baseline-source', 'first'); +test_computed_value('baseline-source', 'last'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-001.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-001.html new file mode 100644 index 0000000000..f9760c14c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-001.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: first; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-y="25"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-y="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="35"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="60"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-y="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-y="60"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-y="75"></span> + <table class="inner" style="display: inline-table;" data-offset-y="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-y="75"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-002.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-002.html new file mode 100644 index 0000000000..7e88562a1c --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-002.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; + writing-mode: vertical-rl; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: first; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-x="65"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="90"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-x="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="160"></span> + <table class="inner" style="display: inline-table;" data-offset-x="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-x="160"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-003.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-003.html new file mode 100644 index 0000000000..bbc0782211 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-003.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; + writing-mode: vertical-lr; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: first; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-x="25"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-x="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="55"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="55"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="70"></span> + <table class="inner" style="display: inline-table;" data-offset-x="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-x="70"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-invalid.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-invalid.html new file mode 100644 index 0000000000..9be4f5c378 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-invalid.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value('baseline-source', 'foobar'); +test_invalid_value('baseline-source', 'default'); +test_invalid_value('baseline-source', 'auto first'); +test_invalid_value('baseline-source', 'first auto'); +test_invalid_value('baseline-source', '3px'); +test_invalid_value('baseline-source', '10%'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-001.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-001.html new file mode 100644 index 0000000000..4141fad5c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-001.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: last; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-y="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="95"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-y="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="65"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-y="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-y="90"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-y="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-y="90"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-y="135"></span> + <table class="inner" style="display: inline-table;" data-offset-y="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-y="135"></span> + <div class="inner" style="display: inline-block;" data-offset-y="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-002.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-002.html new file mode 100644 index 0000000000..b2e825b4d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-002.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; + writing-mode: vertical-rl; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: last; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-x="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="30"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="100"></span> + <table class="inner" style="display: inline-table;" data-offset-x="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-x="100"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-003.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-003.html new file mode 100644 index 0000000000..96b8b2c958 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-003.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<style> +.target { + inline-size: 200px; + padding: 10px; + border: solid 3px; + position: relative; + line-height: 0; + font-size: 20px; + writing-mode: vertical-lr; +} + +.inner { + border: solid 5px; + padding: 10px; + baseline-source: last; + font-size: 30px; +} + +table { border-spacing: 0; } +tr { vertical-align: baseline; } +td { padding: 0; } +caption { + margin: 10px; + background: lime; + block-size: 20px; +} + +span { + display: inline-block; + width: 1em; + height: 1em; + outline: solid cyan 3px; + outline-offset: -3px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target > *')"> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <div style="overflow: hidden;"> + <div><span></span></div> + <div><span></span></div> + </div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-block; columns: 2;" data-offset-x="10"> + <div style="font-size: 20px;"><span></span></div> + <div style="font-size: 20px;"><span></span></div> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="90"></span> + <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-x="10"> + <span></span><br> + <span></span><br> + <span></span><br> + <span></span><br> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="60"></span> + <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-x="10"> + <div><span></span></div> + <div><span></span></div> + </div> +</div> + +<div class="target"> + <span data-offset-x="85"></span> + <fieldset class="inner" style="display: inline-block;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="85"></span> + <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> + <span></span><br><span></span> + <legend><span></span></legend> + </fieldset> +</div> + +<div class="target"> + <span data-offset-x="130"></span> + <table class="inner" style="display: inline-table;" data-offset-x="10"> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> +</div> + +<div class="target"> + <span data-offset-x="130"></span> + <div class="inner" style="display: inline-block;" data-offset-x="10"> + <table> + <caption></caption> + <tr> + <td style="font-size: 10px;"><span></span><br><span></span></td> + <td><span></span><br><span></span></td> + </tr> + <tr> + <td><span></span><br><span></span></td> + <td style="font-size: 10px;"><span></span><br><span></span></td> + </tr> + <caption style="caption-side: bottom;"></caption> + </table> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-valid.html b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-valid.html new file mode 100644 index 0000000000..6ca38566bb --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-valid.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value('baseline-source', 'auto'); +test_valid_value('baseline-source', 'first'); +test_valid_value('baseline-source', 'last'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/change-inline-change-abspos-crash.html b/testing/web-platform/tests/css/css-inline/change-inline-change-abspos-crash.html new file mode 100644 index 0000000000..7752cc6592 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/change-inline-change-abspos-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255718"> +<div style="display:inline-block; position:relative;"> + <div id="abspos" style="position:absolute;"></div> +</div> +<br> +<br> +<div id="troublemaker" style="display:inline-block; width:2px;"></div> +<script> + document.body.offsetTop; + troublemaker.style.width = "1px"; + document.body.offsetTop; + abspos.style.paddingLeft = "1px"; +</script> diff --git a/testing/web-platform/tests/css/css-inline/empty-text-node-001-ref.html b/testing/web-platform/tests/css/css-inline/empty-text-node-001-ref.html new file mode 100644 index 0000000000..7ec7f1bdb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/empty-text-node-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Inline reference</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<style> +.green { color: green; } +.red { color: red; } +.ref { + display: inline-block; +} +div div { + width: 50px; + height: 0px; + border: 20px solid green; + margin: 10px; +} +</style> +<p>Test passes if the <span class=green>green</span> boxes have <span class=red>no red</span> in the middle.</p> + +<div class=ref> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class=ref> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<div class=ref> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/empty-text-node-001.html b/testing/web-platform/tests/css/css-inline/empty-text-node-001.html new file mode 100644 index 0000000000..eddf31ec59 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/empty-text-node-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Inline test: empty text node</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" title="2.1. Layout of Line Boxes" href="https://drafts.csswg.org/css-inline/#line-boxes"> +<link rel="match" href="empty-text-node-001-ref.html"> +<meta name="assert" content="Empty text node in a line box is treated as zero height."> +<style> +.green { color: green; } +.red { color: red; } +.testContent, .testBefore, .testAfter { + display: inline-block; +} +div div { + width: 50px; + line-height: 30px; + border: 20px solid green; + background-color: red; + margin: 10px; +} +.testBefore div::before { + content: ""; +} +.testAfter div::after { + content: ""; +} +.normal { white-space: normal; } +.nowrap { white-space: nowrap; } +.pre { white-space: pre; } +.prewrap { white-space: pre-wrap; } +.preline { white-space: pre-line; } +.breakspaces { white-space: break-spaces; } +</style> +<p>Test passes if the <span class=green>green</span> boxes have <span class=red>no red</span> in the middle.</p> + +<div class=testContent> + <div class=normal></div> + <div class=nowrap></div> + <div class=pre></div> + <div class=prewrap></div> + <div class=preline></div> + <div class=breakspaces></div> + <script> + [...document.querySelectorAll(".testContent div")].forEach((node, i) => node.appendChild(document.createTextNode(""))); + </script> +</div> + +<div class=testBefore> + <div class=normal></div> + <div class=nowrap></div> + <div class=pre></div> + <div class=prewrap></div> + <div class=preline></div> + <div class=breakspaces></div> +</div> + +<div class=testAfter> + <div class=normal></div> + <div class=nowrap></div> + <div class=pre></div> + <div class=prewrap></div> + <div class=preline></div> + <div class=breakspaces></div> +</div> diff --git a/testing/web-platform/tests/css/css-inline/float-becomes-inflow-crash.html b/testing/web-platform/tests/css/css-inline/float-becomes-inflow-crash.html new file mode 100644 index 0000000000..c820b093ce --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/float-becomes-inflow-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1331189"> +<div id="elm" style="float:left;"></div> +x +<script> + document.body.offsetTop; + elm.style.cssFloat = "none"; + getComputedStyle(elm).cssFloat; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-inline/inheritance.html b/testing/web-platform/tests/css/css-inline/inheritance.html new file mode 100644 index 0000000000..6723c2a6e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/inheritance.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Inline Layout properties</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('alignment-baseline', 'baseline', 'central'); +assert_not_inherited('baseline-shift', '0px', '10px'); +assert_inherited('dominant-baseline', 'auto', 'central'); +assert_not_inherited('initial-letters', 'normal', '2 3'); +assert_inherited('initial-letters-align', 'alphabetic', 'hanging'); +assert_inherited('initial-letters-wrap', 'none', 'grid'); +assert_not_inherited('initial-sizing', 'normal', 'stretch'); +// https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height +assert_inherited('line-height', 'normal', '20px'); +assert_not_inherited('vertical-align', 'baseline', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-ref.html new file mode 100644 index 0000000000..3e2be1766d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { columns: 2;} + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC<br clear="both">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl-ref.html new file mode 100644 index 0000000000..986e2945ae --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in RTL.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: right; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: rtl; + height: 500px; + writing-mode: horizontal-tb; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC<br clear="both">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl.html new file mode 100644 index 0000000000..14222f4ca9 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in RTL.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="Initial-letter-breaking-rtl-ref.html"> +<style> + .sample { + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: right; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: rtl; + height: 500px; + writing-mode: horizontal-tb; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html new file mode 100644 index 0000000000..d43b2e39bf --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in vertical-lr.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: ltr; + height: 500px; + writing-mode: vertical-lr; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-left: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr.html new file mode 100644 index 0000000000..16c54c66f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in vertical-lr.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="Initial-letter-breaking-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: ltr; + height: 500px; + writing-mode: vertical-lr; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html new file mode 100644 index 0000000000..0fe5e74a08 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in vertical-rl.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: ltr; + height: 500px; + writing-mode: vertical-rl; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-right: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl.html new file mode 100644 index 0000000000..146fd5c5d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation in vertical-rl.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="Initial-letter-breaking-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { + columns: 2; + direction: ltr; + height: 500px; + writing-mode: vertical-rl; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking.html b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking.html new file mode 100644 index 0000000000..bd199fc2bb --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests interaction with fragmentation.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-breaking"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="Initial-letter-breaking-ref.html"> +<style> + .sample { + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .mc { columns: 2;} + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="mc"> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-ref.html new file mode 100644 index 0000000000..adc458fe9b --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 10px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall-ref.html new file mode 100644 index 0000000000..c170adcae3 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby overflow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 80px; + width: 80px; + } + + .surrounding { display:inline-block; } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="surrounding">bc <ruby>xyz<rt>X</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall.html new file mode 100644 index 0000000000..fd92e1b2bb --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby overflow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-drop-over-ruby-tall-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>X</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby.html new file mode 100644 index 0000000000..5d8b0b9c5d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-drop-over-ruby-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-ref.html new file mode 100644 index 0000000000..db3c809965 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + ruby { ruby-position: under; } + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall-ref.html new file mode 100644 index 0000000000..c56ef2efb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + ruby { ruby-position: under; } + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .surrounding { display:inline-block; margin-bottom: -2px; } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="surrounding">bc <ruby>xyz<rt>X</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall.html new file mode 100644 index 0000000000..6892160e0b --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-drop-under-ruby-tall-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + ruby { ruby-position: under; } + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>X</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby.html new file mode 100644 index 0000000000..c9f4623d06 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-drop-under-ruby-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + ruby { ruby-position: under; } + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-ref.html new file mode 100644 index 0000000000..a2c4878270 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in LTR</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + margin-top: 12px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl-ref.html new file mode 100644 index 0000000000..00dd32be9a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + margin-top: 12px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl.html new file mode 100644 index 0000000000..7bfd20151a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-margins-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .initial-letter::first-letter { + margin-top: 10px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html new file mode 100644 index 0000000000..6bbc5c3b7a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-bottom: 30px; + margin-left: 23px; + margin-right: 45px; + margin-top: 10px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr.html new file mode 100644 index 0000000000..09c69480fa --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-margins-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .initial-letter::first-letter { + margin-top: 10px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html new file mode 100644 index 0000000000..d608d256c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in vertical-rl</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 53px; + margin-top: 10px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl.html new file mode 100644 index 0000000000..2e2696fed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in vertical-rl</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-margins-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .initial-letter::first-letter { + margin-top: 10px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins.html new file mode 100644 index 0000000000..3ce4c7d6c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with margin in LTR</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-margins-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .initial-letter::first-letter { + margin-top: 10px; + margin-bottom: 30px; + margin-left: 15px; + margin-right: 45px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html new file mode 100644 index 0000000000..43222b43da --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .surrounding { + display:inline-block; + margin-top: -16px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br><br> +<div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html new file mode 100644 index 0000000000..f1086074c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby overflow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 8px; + width: 80px; + } + + .surrounding { display:inline-block; } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="surrounding">bc <ruby>xyz<rt>X</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall.html new file mode 100644 index 0000000000..eddba2f27d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby overflow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-raise-over-ruby-tall-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>X</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby.html new file mode 100644 index 0000000000..29b285ba33 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with over ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-raise-over-ruby-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html new file mode 100644 index 0000000000..9adde37556 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + ruby { ruby-position: under; } + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .surrounding { + display:inline-block; + margin-top: -16px; + margin-bottom: -2px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br><br> +<div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html new file mode 100644 index 0000000000..7e334e55db --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + ruby { ruby-position: under; } + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .surrounding { display:inline-block; margin-top: 72px; margin-bottom: -2px; } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="surrounding">bc <ruby>xyz<rt>X</rt></ruby></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall.html new file mode 100644 index 0000000000..40130d479f --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-raise-under-ruby-tall-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + rt { font-size: 80px; } + ruby { ruby-position: under; } + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>X</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby.html new file mode 100644 index 0000000000..367479dac7 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with under ruby</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-block-position-raise-under-ruby-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + ruby { ruby-position: under; } + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc <ruby>xyz<rt>XYZ</rt></ruby><br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-computed.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-computed.html new file mode 100644 index 0000000000..e46306259a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-computed.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Tests parsing of the initial-letter property</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials"> +<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id="target"></div> +<div id="scratch"></div> + +<script> +test_computed_value('initial-letter', 'normal'); +test_computed_value('initial-letter', '1.23'); +test_computed_value('initial-letter', '1.23 456'); +test_computed_value('initial-letter', '1.23 calc(45.6)', '1.23 46'); +test_computed_value('initial-letter', '1.23 drop'); +test_computed_value('initial-letter', '1.23 raise'); +test_computed_value('initial-letter', 'drop 1.23', '1.23 drop'); +test_computed_value('initial-letter', 'raise 1.23', '1.23 raise'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-ref.html new file mode 100644 index 0000000000..aa26159571 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl-ref.html new file mode 100644 index 0000000000..1b55ae05e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl.html new file mode 100644 index 0000000000..542cf00d21 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-drop-initial-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html new file mode 100644 index 0000000000..f28d1eed83 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-left: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr.html new file mode 100644 index 0000000000..98bb7a6e51 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-drop-initial-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html new file mode 100644 index 0000000000..4ec34f4c0b --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-right: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl.html new file mode 100644 index 0000000000..4d6aece9f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-drop-initial-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial.html new file mode 100644 index 0000000000..edd3ac968d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter drop initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#drop-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-drop-initial-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-ref.html new file mode 100644 index 0000000000..a269513a00 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"><div class="float"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl-ref.html new file mode 100644 index 0000000000..22b93e1a3f --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: right; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"><div class="float"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl.html new file mode 100644 index 0000000000..96b2811771 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-001-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: right; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"><div class="float"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html new file mode 100644 index 0000000000..3982a3669c --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-left: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"><div class="float"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr.html new file mode 100644 index 0000000000..d9b98462d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-001-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"><div class="float"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl-ref.html new file mode 100644 index 0000000000..816d8403ba --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in vertical-rl</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-right: 8px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"><div class="float"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl.html new file mode 100644 index 0000000000..850321fd75 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line in vertical-rl</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-001-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"><div class="float"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001.html new file mode 100644 index 0000000000..76e83c6a93 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should be part of the line</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-001-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"><div class="float"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002-ref.html new file mode 100644 index 0000000000..f451a265be --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests adding the initial-letter to the exclusion-space</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + display: inline-block; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .surrounding { + display: inline-block; + margin-left: -20px; + vertical-align: top; + } + + .surrounding2 { + display: block; + margin-left: 50px; + margin-top: 0px; + } +</style> +</head> +<body> +<div class="sample"><div class="float"></div><div class="float"></div> +<div class="fake-initial-letter"></div> +<div class="surrounding">bc<br>def<br>ghi<br>jkl<br></div> +<div class="surrounding2">mno</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002.html new file mode 100644 index 0000000000..6f266ea0e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests adding the initial-letter to the exclusion-space</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-002-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"><div class="float"></div><div class="float"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003-ref.html new file mode 100644 index 0000000000..54c30de947 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests float-avoidance in the block-direction</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-right: 10px; + margin-top: -48px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="float"></div><div class="float" style="width:80px"></div> +<div class="fake-initial-letter"></div> +<div style="display:inline-block; margin-left:-10px;"> +bc<br>def<br>ghi<br>jkl<br></div> +mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003.html new file mode 100644 index 0000000000..985227533a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests float-avoidance in the block-direction</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-003-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +<div class="float"></div><div class="float" style="width:80px"></div> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004-ref.html new file mode 100644 index 0000000000..0e9a6ab273 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests left floats should clear left initial-letters and visa-versa.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br> +<div class="float" style="clear:left"></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004.html new file mode 100644 index 0000000000..07dd52cc9c --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests left floats should clear left initial-letters and visa-versa.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-004-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: none; + float: left; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br> +<div class="float"></div> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005-ref.html new file mode 100644 index 0000000000..d1e7be2aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests right float should be pushed on to next line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: right; + height: 50px; + width: 50px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + .float { margin-top: -58px; } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc def<div class="float"></div><br> +ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005.html new file mode 100644 index 0000000000..6cdd851e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests right float should be pushed on to next line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-float-005-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .float { + background: cyan; + clear: left; + float: right; + height: 50px; + width: 50px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc def<div class="float"></div><br> +ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-ref.html new file mode 100644 index 0000000000..1afceed1a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter indentation</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#indentation"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-left: 20px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl-ref.html new file mode 100644 index 0000000000..3a7c17145a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter indentation in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#indentation"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-right: 20px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl.html new file mode 100644 index 0000000000..cd3e6f8bc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter indentation in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#indentation"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-indentation-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + .sample { + text-indent: 10px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation.html new file mode 100644 index 0000000000..20431f4beb --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter indentation</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#indentation"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-indentation-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + .sample { + text-indent: 10px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-invalid.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-invalid.html new file mode 100644 index 0000000000..574a347bda --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Tests parsing of the initial-letter property</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials"> +<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value('initial-letter', 'foobar'); +test_invalid_value('initial-letter', 'drop'); +test_invalid_value('initial-letter', 'raise'); +test_invalid_value('initial-letter', 'drop 1 2'); +test_invalid_value('initial-letter', 'raise 1 2'); +test_invalid_value('initial-letter', '-1'); +test_invalid_value('initial-letter', '0'); +test_invalid_value('initial-letter', '0.5'); +test_invalid_value('initial-letter', '1 -1'); +test_invalid_value('initial-letter', '1 0'); +test_invalid_value('initial-letter', '1 0.5'); +test_invalid_value('initial-letter', '1 1.5'); +test_invalid_value('initial-letter', '1 2 3'); +test_invalid_value('initial-letter', '1 drop 3'); +test_invalid_value('initial-letter', '1 raise 3'); +test_invalid_value('initial-letter', '1 foobar 3'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline-ref.html new file mode 100644 index 0000000000..4559c4db02 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with text-decoration</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-layout"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + color: transparent; + text-decoration-color: black; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-decoration-thickness: 1px; + } + + .fake-initial-letter { + background: transparent; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .fake-underline { + background: black; + width: 80px; + height: 1px; + margin-top: 65px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"><div class="fake-underline"></div></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline.html new file mode 100644 index 0000000000..af70ecd1bd --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter with text-decoration</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-layout"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-layout-text-decoration-underline-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + color: transparent; + text-decoration-color: black; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-decoration-thickness: 1px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + text-decoration-color: black; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-decoration-thickness: 1px; + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html new file mode 100644 index 0000000000..f59625a4a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html new file mode 100644 index 0000000000..9dce9e6e14 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl.html new file mode 100644 index 0000000000..10b90ac395 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raise-initial-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html new file mode 100644 index 0000000000..58e5c333e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .fake-initial-letter { + background: lime; + display: inline-block; + height: 80px; + margin-left: 8px; + margin-right: 8px; + width: 80px; + } + + .remainder { + display: inline-block; + vertical-align: top; + margin-top: -20px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="remainder">bc</div><br> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr.html new file mode 100644 index 0000000000..6b1ebd5091 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raise-initial-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html new file mode 100644 index 0000000000..5fa6845068 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .fake-initial-letter { + background: lime; + display: inline-block; + height: 80px; + margin-left: 8px; + margin-right: 8px; + width: 80px; + } + + .remainder { + display: inline-block; + vertical-align: bottom; + margin-top: -20px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="remainder">bc</div><br> +def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl.html new file mode 100644 index 0000000000..62a699f57f --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raise-initial-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial.html new file mode 100644 index 0000000000..4b8e81453b --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raise-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raise-initial-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html new file mode 100644 index 0000000000..7285ed8a82 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial should not overlap with previous line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raised-sunken-caps"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div>This line before initial letter.</div> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise.html new file mode 100644 index 0000000000..4e90667bd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter raise initial should not overlap with previous line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raised-sunken-caps"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raised-sunken-caps-raise-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 raise; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div>This line before initial letter.</div> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html new file mode 100644 index 0000000000..a68a760ac6 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunken initial should not overlap with previous line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raised-sunken-caps"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div>This line before initial letter.</div> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken.html new file mode 100644 index 0000000000..add90302dc --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunken initial should not overlap with previous line.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#raised-sunken-caps"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-raised-sunken-caps-sunken-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 2; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div>This line before initial letter.</div> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears-ref.html new file mode 100644 index 0000000000..07b93dd0ee --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter subsequent paragraph clears initial letter.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#short-para-initial-letter"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + clear: left; + } +</style> +</head> +<body> +<div class="sample"><div class="fake-initial-letter"></div>bc<br>Def<br></div> +<div class="sample" style="padding-top:32px"><div class="fake-initial-letter"></div>XY<br>ABC<br></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears.html new file mode 100644 index 0000000000..92d0756a9d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter subsequent paragraph clears initial letter.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#short-para-initial-letter"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-short-para-initial-letter-clears-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter">Abc<br>Def<br></div> +<div class="sample initial-letter">WXY<br>ABC</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps-ref.html new file mode 100644 index 0000000000..efdfc61a67 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter subsequent paragraph wraps initial letter.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#short-para-initial-letter"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"><div class="fake-initial-letter"></div>bc</div> +<div>subsequent paragraph</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps.html new file mode 100644 index 0000000000..d09be38813 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter subsequent paragraph wraps initial letter.</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#short-para-initial-letter"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-short-para-initial-letter-wraps-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter">Abc</div> +<div>subsequent paragraph</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html new file mode 100644 index 0000000000..9b036a2be3 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunken initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html new file mode 100644 index 0000000000..3318c7e8bd --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div><br><br> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl.html new file mode 100644 index 0000000000..214ee94c3a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in RTL</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-sunk-initial-rtl-ref.html"> +<style> + .sample { + border: solid 1px green; + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 2; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html new file mode 100644 index 0000000000..c3ccef2814 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .fake-initial-letter { + background: lime; + display: inline-block; + height: 80px; + margin-left: 8px; + margin-right: 8px; + width: 80px; + } + + .remainder { + display: inline-block; + margin-left: 48px; + margin-top: -20px; + vertical-align: bottom; + } + + .remainder2 { + display: inline-block; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="remainder">bc<br>def<br></div><br> +<div class="remainder2">ghi<br>jkl<br>mno<br></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr.html new file mode 100644 index 0000000000..a4901290a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-sunk-initial-vlr-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-lr; + } + + .initial-letter::first-letter { + initial-letter: 3 2; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html new file mode 100644 index 0000000000..a7db8b9ea0 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .fake-initial-letter { + background: lime; + display: inline-block; + height: 80px; + margin-left: 8px; + margin-right: 8px; + width: 80px; + } + + .remainder { + display: inline-block; + margin-right: 48px; + margin-top: -20px; + vertical-align: top; + } + + .remainder2 { + display: inline-block; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +<div class="remainder">bc<br>def</div><br> +<div class="remainder2">ghi<br>jkl<br>mno<br></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl.html new file mode 100644 index 0000000000..52584a98db --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunk initial in vertical-lr</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-sunk-initial-vrl-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + height: 230px; + line-height: 24px; + writing-mode: vertical-rl; + } + + .initial-letter::first-letter { + initial-letter: 3 2; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial.html new file mode 100644 index 0000000000..701469ca90 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter sunken initial</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#sunk-initial"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-sunk-initial-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .initial-letter::first-letter { + initial-letter: 3 2; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-valid.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-valid.html new file mode 100644 index 0000000000..3c1e32811d --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Tests parsing of the initial-letter property</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials"> +<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value('initial-letter', 'normal'); +test_valid_value('initial-letter', '1.23'); +test_valid_value('initial-letter', '1.23 456'); +test_valid_value('initial-letter', '1.23 calc(45.6)'); +test_valid_value('initial-letter', '1.23 drop'); +test_valid_value('initial-letter', '1.23 raise'); +test_valid_value('initial-letter', 'drop 1.23', '1.23 drop'); +test_valid_value('initial-letter', 'raise 1.23', '1.23 raise'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line-ref.html new file mode 100644 index 0000000000..5b54045363 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should take ::first-line style</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .sample::first-line { color: cyan; } + .fake-initial-letter { + background: cyan; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } +</style> +</head> +<body> +<div class="sample"> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line.html new file mode 100644 index 0000000000..202c996b8a --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should take ::first-line style</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-with-first-line-ref.html"> +<style> + .sample { + border: solid 1px green; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + width: 230px; + } + + .sample::first-line { color: cyan; } + .initial-letter::first-letter { + initial-letter: 3 drop; + color: inherit; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } +</style> +</head> +<body> +<div class="sample initial-letter"> +Abc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-ref.html new file mode 100644 index 0000000000..332dc00377 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should handle tabular character</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + font-family: Ahem; + font-size: 20px; + line-height: 24px; + } + + .fake-initial-letter { + background: lime; + float: left; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .fake-initial-letter-tab { + background: yellow; + float: left; + height: 80px; + margin-top: 2px; + width: 640px; + } +</style> +</head> +<body> +<div class="sample"><div class="fake-initial-letter-tab"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl-ref.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl-ref.html new file mode 100644 index 0000000000..0b9a074af7 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should handle tabular character</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<style> + .sample { + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + } + + .fake-initial-letter { + background: lime; + float: right; + height: 80px; + margin-top: 2px; + width: 80px; + } + + .fake-initial-letter-tab { + background: yellow; + float: right; + height: 80px; + margin-top: 2px; + width: 640px; + } +</style> +</head> +<body> +<div class="sample"><div class="fake-initial-letter-tab"></div> +<div class="fake-initial-letter"></div> +bc<br>def<br>ghi<br>jkl<br>mno<br> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl.html new file mode 100644 index 0000000000..f8a2d7a2a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should handle tabular character</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-with-tab-rtl-ref.html"> +<style> + .sample { + direction: rtl; + font-family: Ahem; + font-size: 20px; + line-height: 24px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .sample { white-space: pre; } + .initial-letter::first-letter { background: yellow; } +</style> +</head> +<body> +<div class="sample initial-letter">	Abc +def +ghi +jkl +mno</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab.html b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab.html new file mode 100644 index 0000000000..49b1f6b4b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>Tests initial letter should handle tabular character</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-styling"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" > +<link rel="match" href="initial-letter-with-tab-ref.html"> +<style> + .sample { + font-family: Ahem; + font-size: 20px; + line-height: 24px; + } + + .initial-letter::first-letter { + initial-letter: 3 drop; + color: lime; + font-size: 100px; /* should be ignored in rendering */ + line-height: 50px; /* should be ignored in rendering */ + } + + .sample { white-space: pre; } + .initial-letter::first-letter { background: yellow; } +</style> +</head> +<body> +<div class="sample initial-letter">	Abc +def +ghi +jkl +mno</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/inline-002-crash.html b/testing/web-platform/tests/css/css-inline/inline-002-crash.html new file mode 100644 index 0000000000..a10eee9907 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/inline-002-crash.html @@ -0,0 +1 @@ +<textarea style="margin: -1073741824;"> diff --git a/testing/web-platform/tests/css/css-inline/inline-crash-chrome-001.html b/testing/web-platform/tests/css/css-inline/inline-crash-chrome-001.html new file mode 100644 index 0000000000..cfc0fdd269 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/inline-crash-chrome-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Inline: Chrome crash with split inlines</title> +<link rel="author" href="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=962242"> +<meta name="assert" content="Chrome crashes on split inlines"> +<style> +.first-line::first-line { + font-size: larger; +} +</style> +<div class="first-line"> + <ol style="list-style-position: inside"> + <li> + <tag> + <div></div> +<script> +test(() => { +}, 'did not crash'); +</script> diff --git a/testing/web-platform/tests/css/css-inline/inline-crash.html b/testing/web-platform/tests/css/css-inline/inline-crash.html new file mode 100644 index 0000000000..65008f74ce --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/inline-crash.html @@ -0,0 +1,210 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1245786"> +<style> + nav{ position: absolute; } + body > * { position: relative; } +</style> +<body> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<span> +<div> +<nav> diff --git a/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-computed.html b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-computed.html new file mode 100644 index 0000000000..83137f0564 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: getComputedStyle().alignmentBaseline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property"> +<link rel="help" href="https://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty"> +<meta name="assert" content="alignment-baseline computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("alignment-baseline", "baseline"); +test_computed_value("alignment-baseline", "text-bottom"); +test_computed_value("alignment-baseline", "alphabetic"); +test_computed_value("alignment-baseline", "ideographic"); +test_computed_value("alignment-baseline", "middle"); +test_computed_value("alignment-baseline", "central"); +test_computed_value("alignment-baseline", "mathematical"); +test_computed_value("alignment-baseline", "text-top"); +test_computed_value("alignment-baseline", "bottom"); +test_computed_value("alignment-baseline", "center"); +test_computed_value("alignment-baseline", "top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-invalid.html b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-invalid.html new file mode 100644 index 0000000000..62cb70f081 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing alignment-baseline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property"> +<meta name="assert" content="alignment-baseline supports only the grammar 'baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// alignment-baseline 'auto' was valid in SVG 1.1 +// https://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty +test_invalid_value("alignment-baseline", "auto"); + +test_invalid_value("alignment-baseline", "none"); +test_invalid_value("alignment-baseline", "baseline text-bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-valid.html b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-valid.html new file mode 100644 index 0000000000..3e895d7733 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing alignment-baseline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property"> +<meta name="assert" content="alignment-baseline supports the full grammar 'baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("alignment-baseline", "baseline"); +test_valid_value("alignment-baseline", "text-bottom"); +test_valid_value("alignment-baseline", "alphabetic"); +test_valid_value("alignment-baseline", "ideographic"); +test_valid_value("alignment-baseline", "middle"); +test_valid_value("alignment-baseline", "central"); +test_valid_value("alignment-baseline", "mathematical"); +test_valid_value("alignment-baseline", "text-top"); +test_valid_value("alignment-baseline", "bottom"); +test_valid_value("alignment-baseline", "center"); +test_valid_value("alignment-baseline", "top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-computed.html b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-computed.html new file mode 100644 index 0000000000..3bef5bae3b --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-computed.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: getComputedStyle().baselineShift</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-shift-property"> +<meta name="assert" content="baseline-shift computed value is the specified keyword or a computed length-percentage value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("baseline-shift", "-10px"); +test_computed_value("baseline-shift", "20%"); +test_computed_value("baseline-shift", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("baseline-shift", "sub"); +test_computed_value("baseline-shift", "super"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-invalid.html b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-invalid.html new file mode 100644 index 0000000000..1bc395c737 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing baseline-shift with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-shift-property"> +<meta name="assert" content="baseline-shift supports only the grammar 'length-percentage | sub | super'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Valid in SVG 1.1. Accepted by Blink and WebKit. +// https://github.com/w3c/csswg-drafts/issues/3975 +test_invalid_value("baseline-shift", "5"); + +test_invalid_value("baseline-shift", "-10px 20%"); +test_invalid_value("baseline-shift", "calc(2em + 3ex), 0"); +test_invalid_value("baseline-shift", "sub super"); +test_invalid_value("baseline-shift", "20px sub"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-valid.html b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-valid.html new file mode 100644 index 0000000000..8054ebbb39 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/baseline-shift-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing baseline-shift with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-shift-property"> +<meta name="assert" content="baseline-shift supports the full grammar 'length-percentage | sub | super'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("baseline-shift", "-10px"); +test_valid_value("baseline-shift", "20%"); +test_valid_value("baseline-shift", "calc(2em + 3ex)"); +test_valid_value("baseline-shift", "0", "0px"); +test_valid_value("baseline-shift", "sub"); +test_valid_value("baseline-shift", "super"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-computed.html b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-computed.html new file mode 100644 index 0000000000..e844dd71f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: getComputedStyle().dominantBaseline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property"> +<meta name="assert" content="dominant-baseline computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("dominant-baseline", "auto"); +test_computed_value("dominant-baseline", "text-bottom"); +test_computed_value("dominant-baseline", "alphabetic"); +test_computed_value("dominant-baseline", "ideographic"); +test_computed_value("dominant-baseline", "middle"); +test_computed_value("dominant-baseline", "central"); +test_computed_value("dominant-baseline", "mathematical"); +test_computed_value("dominant-baseline", "hanging"); +test_computed_value("dominant-baseline", "text-top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-invalid.html b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-invalid.html new file mode 100644 index 0000000000..2c4b76e026 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing dominant-baseline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property"> +<meta name="assert" content="dominant-baseline supports only the grammar 'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("dominant-baseline", "normal"); +test_invalid_value("dominant-baseline", "none"); +test_invalid_value("dominant-baseline", "alphabetic, ideographic"); +test_invalid_value("dominant-baseline", "middle central"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-valid.html b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-valid.html new file mode 100644 index 0000000000..1a6c7a400c --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing dominant-baseline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#dominant-baseline-property"> +<meta name="assert" content="dominant-baseline supports the full grammar 'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("dominant-baseline", "auto"); +test_valid_value("dominant-baseline", "text-bottom"); +test_valid_value("dominant-baseline", "alphabetic"); +test_valid_value("dominant-baseline", "ideographic"); +test_valid_value("dominant-baseline", "middle"); +test_valid_value("dominant-baseline", "central"); +test_valid_value("dominant-baseline", "mathematical"); +test_valid_value("dominant-baseline", "hanging"); +test_valid_value("dominant-baseline", "text-top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/line-height-computed.html b/testing/web-platform/tests/css/css-inline/parsing/line-height-computed.html new file mode 100644 index 0000000000..dff6fc6702 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/line-height-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: getComputedStyle().lineHeight</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#line-height-property"> +<meta name="assert" content="line-height computed value is normal or a length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #container { + font-size: 40px; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +test_computed_value("line-height", "normal"); + +test_computed_value("line-height", "0", "0px"); +test_computed_value("line-height", "2", "80px"); +test_computed_value("line-height", "0px"); +test_computed_value("line-height", "10px"); +test_computed_value("line-height", "0%", "0px"); +test_computed_value("line-height", "200%", "80px"); +test_computed_value("line-height", "calc(200% + 10px)", "90px"); + +test_computed_value('line-height', 'calc(10px - 0.5em)', '0px'); +test_computed_value('line-height', 'calc(10px + 0.5em)', '30px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/line-height-invalid.html b/testing/web-platform/tests/css/css-inline/parsing/line-height-invalid.html new file mode 100644 index 0000000000..e7d4ae6246 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/line-height-invalid.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing line-height with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#line-height-property"> +<meta name="assert" content="line-height supports only the grammar 'normal | <number> | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("line-height", "auto"); + +test_invalid_value("line-height", "-2"); +test_invalid_value("line-height", "-10px"); +test_invalid_value("line-height", "-200%"); + +test_invalid_value("line-height", "2 10px"); +test_invalid_value("line-height", "200% 3"); +test_invalid_value("line-height", "auto 10px"); +test_invalid_value("line-height", "3 auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/line-height-valid.html b/testing/web-platform/tests/css/css-inline/parsing/line-height-valid.html new file mode 100644 index 0000000000..663e2638d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/line-height-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing line-height with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#line-height-property"> +<meta name="assert" content="line-height supports the full grammar 'normal | <number> | <length-percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("line-height", "normal"); + +test_valid_value("line-height", "0"); +test_valid_value("line-height", "2"); +test_valid_value("line-height", "0px"); +test_valid_value("line-height", "10px"); +test_valid_value("line-height", "0%"); +test_valid_value("line-height", "200%"); +test_valid_value("line-height", "calc(200% + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/vertical-align-computed.html b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-computed.html new file mode 100644 index 0000000000..2422508472 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: getComputedStyle().verticalAlign</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align"> +<meta name="assert" content="vertical-align computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("vertical-align", "baseline"); +test_computed_value("vertical-align", "sub"); +test_computed_value("vertical-align", "super"); +test_computed_value("vertical-align", "top"); +test_computed_value("vertical-align", "text-top"); +test_computed_value("vertical-align", "middle"); +test_computed_value("vertical-align", "bottom"); +test_computed_value("vertical-align", "text-bottom"); +test_computed_value("vertical-align", "-10px"); +test_computed_value("vertical-align", "20%"); +test_computed_value("vertical-align", "calc(20% + 10px)"); +test_computed_value("vertical-align", "calc(10px - 0.5em)", "-10px"); + +// TODO: Test against the CSS Inline Layout grammar when browsers support it. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/vertical-align-invalid.html b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-invalid.html new file mode 100644 index 0000000000..0565eb4a68 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing vertical-align with valid values</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align"> +<meta name="assert" content="vertical-align only supports the spec grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("vertical-align", "none"); + +// Two baseline-source values +test_invalid_value("vertical-align", "first last"); +test_invalid_value("vertical-align", "first, last"); + +// Two baseline-shift values +test_invalid_value("vertical-align", "sub super"); +test_invalid_value("vertical-align", "super 10px"); +test_invalid_value("vertical-align", "20% sub"); + +// Two alignment-baseline values +test_invalid_value("vertical-align", "baseline middle"); +test_invalid_value("vertical-align", "text-top, bottom"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/parsing/vertical-align-valid.html b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-valid.html new file mode 100644 index 0000000000..d51c759dcc --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/parsing/vertical-align-valid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Inline Layout: parsing vertical-align with valid values</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align"> +<link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align"> +<meta name="assert" content="vertical-align supports the CSS 2 grammar 'baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("vertical-align", "baseline"); +test_valid_value("vertical-align", "sub"); +test_valid_value("vertical-align", "super"); +test_valid_value("vertical-align", "top"); +test_valid_value("vertical-align", "text-top"); +test_valid_value("vertical-align", "middle"); +test_valid_value("vertical-align", "bottom"); +test_valid_value("vertical-align", "text-bottom"); +test_valid_value("vertical-align", "-10px"); +test_valid_value("vertical-align", "20%"); +test_valid_value("vertical-align", "0", "0px"); +test_valid_value("vertical-align", "calc(20% - 10px)"); + +// TODO: Test against the CSS Inline Layout grammar when browsers support it. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-inline/too-big-line-height-crash.html b/testing/web-platform/tests/css/css-inline/too-big-line-height-crash.html new file mode 100644 index 0000000000..43782c6a01 --- /dev/null +++ b/testing/web-platform/tests/css/css-inline/too-big-line-height-crash.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<style> +FORM { + line-height: 404875491%; +} + +* { + position: fixed; + block-size: 2984941683%; +} +</style> +<script> +addEventListener("DOMContentLoaded", () => { + getSelection().collapse( + document.body.lastChild, + document.body.lastChild.length + ); +}, {once: true}); +</script> +</head> +<form contenteditable> + <li style="marker-mid: url(a.svg) !important; + will-change: contents; + writing-mode: vertical-lr !important; + shape-outside: none"></li> +</form> +</body></html> |