diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-inline/initial-letter | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-inline/initial-letter')
95 files changed, 3539 insertions, 0 deletions
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> |