From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 testing/web-platform/tests/css/css-inline/META.yml |   5 +
 .../baseline-source/baseline-source-computed.html  |  12 ++
 .../baseline-source/baseline-source-first-001.html | 152 +++++++++++++++
 .../baseline-source/baseline-source-first-002.html | 153 +++++++++++++++
 .../baseline-source/baseline-source-first-003.html | 153 +++++++++++++++
 .../baseline-source/baseline-source-invalid.html   |  14 ++
 .../baseline-source/baseline-source-last-001.html  | 152 +++++++++++++++
 .../baseline-source/baseline-source-last-002.html  | 153 +++++++++++++++
 .../baseline-source/baseline-source-last-003.html  | 153 +++++++++++++++
 .../baseline-source/baseline-source-valid.html     |  11 ++
 .../change-inline-change-abspos-crash.html         |  15 ++
 .../css/css-inline/empty-text-node-001-ref.html    |  46 +++++
 .../tests/css/css-inline/empty-text-node-001.html  |  65 +++++++
 .../css/css-inline/float-becomes-inflow-crash.html |  11 ++
 .../tests/css/css-inline/inheritance.html          |  31 +++
 .../Initial-letter-breaking-ref.html               |  43 +++++
 .../Initial-letter-breaking-rtl-ref.html           |  49 +++++
 .../Initial-letter-breaking-rtl.html               |  49 +++++
 .../Initial-letter-breaking-vlr-ref.html           |  50 +++++
 .../Initial-letter-breaking-vlr.html               |  50 +++++
 .../Initial-letter-breaking-vrl-ref.html           |  50 +++++
 .../Initial-letter-breaking-vrl.html               |  50 +++++
 .../initial-letter/Initial-letter-breaking.html    |  43 +++++
 ...l-letter-block-position-drop-over-ruby-ref.html |  33 ++++
 ...ter-block-position-drop-over-ruby-tall-ref.html |  38 ++++
 ...-letter-block-position-drop-over-ruby-tall.html |  34 ++++
 ...itial-letter-block-position-drop-over-ruby.html |  32 ++++
 ...-letter-block-position-drop-under-ruby-ref.html |  33 ++++
 ...er-block-position-drop-under-ruby-tall-ref.html |  38 ++++
 ...letter-block-position-drop-under-ruby-tall.html |  34 ++++
 ...tial-letter-block-position-drop-under-ruby.html |  32 ++++
 .../initial-letter-block-position-margins-ref.html |  36 ++++
 ...tial-letter-block-position-margins-rtl-ref.html |  37 ++++
 .../initial-letter-block-position-margins-rtl.html |  40 ++++
 ...tial-letter-block-position-margins-vlr-ref.html |  37 ++++
 .../initial-letter-block-position-margins-vlr.html |  40 ++++
 ...tial-letter-block-position-margins-vrl-ref.html |  37 ++++
 .../initial-letter-block-position-margins-vrl.html |  40 ++++
 .../initial-letter-block-position-margins.html     |  39 ++++
 ...-letter-block-position-raise-over-ruby-ref.html |  39 ++++
 ...er-block-position-raise-over-ruby-tall-ref.html |  38 ++++
 ...letter-block-position-raise-over-ruby-tall.html |  34 ++++
 ...tial-letter-block-position-raise-over-ruby.html |  32 ++++
 ...letter-block-position-raise-under-ruby-ref.html |  40 ++++
 ...r-block-position-raise-under-ruby-tall-ref.html |  38 ++++
 ...etter-block-position-raise-under-ruby-tall.html |  34 ++++
 ...ial-letter-block-position-raise-under-ruby.html |  32 ++++
 .../initial-letter/initial-letter-computed.html    |  22 +++
 .../initial-letter-drop-initial-ref.html           |  33 ++++
 .../initial-letter-drop-initial-rtl-ref.html       |  34 ++++
 .../initial-letter-drop-initial-rtl.html           |  33 ++++
 .../initial-letter-drop-initial-vlr-ref.html       |  34 ++++
 .../initial-letter-drop-initial-vlr.html           |  33 ++++
 .../initial-letter-drop-initial-vrl-ref.html       |  34 ++++
 .../initial-letter-drop-initial-vrl.html           |  33 ++++
 .../initial-letter-drop-initial.html               |  32 ++++
 .../initial-letter-float-001-ref.html              |  41 ++++
 .../initial-letter-float-001-rtl-ref.html          |  42 +++++
 .../initial-letter-float-001-rtl.html              |  41 ++++
 .../initial-letter-float-001-vlr-ref.html          |  42 +++++
 .../initial-letter-float-001-vlr.html              |  41 ++++
 .../initial-letter-float-001-vrl-ref.html          |  42 +++++
 .../initial-letter-float-001-vrl.html              |  41 ++++
 .../initial-letter/initial-letter-float-001.html   |  40 ++++
 .../initial-letter-float-002-ref.html              |  54 ++++++
 .../initial-letter/initial-letter-float-002.html   |  40 ++++
 .../initial-letter-float-003-ref.html              |  45 +++++
 .../initial-letter/initial-letter-float-003.html   |  41 ++++
 .../initial-letter-float-004-ref.html              |  43 +++++
 .../initial-letter/initial-letter-float-004.html   |  42 +++++
 .../initial-letter-float-005-ref.html              |  43 +++++
 .../initial-letter/initial-letter-float-005.html   |  41 ++++
 .../initial-letter-indentation-ref.html            |  34 ++++
 .../initial-letter-indentation-rtl-ref.html        |  35 ++++
 .../initial-letter-indentation-rtl.html            |  36 ++++
 .../initial-letter/initial-letter-indentation.html |  35 ++++
 .../initial-letter/initial-letter-invalid.html     |  27 +++
 ...etter-layout-text-decoration-underline-ref.html |  45 +++++
 ...al-letter-layout-text-decoration-underline.html |  40 ++++
 .../initial-letter-raise-initial-ref.html          |  33 ++++
 .../initial-letter-raise-initial-rtl-ref.html      |  34 ++++
 .../initial-letter-raise-initial-rtl.html          |  33 ++++
 .../initial-letter-raise-initial-vlr-ref.html      |  42 +++++
 .../initial-letter-raise-initial-vlr.html          |  33 ++++
 .../initial-letter-raise-initial-vrl-ref.html      |  42 +++++
 .../initial-letter-raise-initial-vrl.html          |  33 ++++
 .../initial-letter-raise-initial.html              |  32 ++++
 ...nitial-letter-raised-sunken-caps-raise-ref.html |  34 ++++
 .../initial-letter-raised-sunken-caps-raise.html   |  33 ++++
 ...itial-letter-raised-sunken-caps-sunken-ref.html |  34 ++++
 .../initial-letter-raised-sunken-caps-sunken.html  |  33 ++++
 ...etter-short-para-initial-letter-clears-ref.html |  32 ++++
 ...al-letter-short-para-initial-letter-clears.html |  31 +++
 ...letter-short-para-initial-letter-wraps-ref.html |  31 +++
 ...ial-letter-short-para-initial-letter-wraps.html |  31 +++
 .../initial-letter-sunk-initial-ref.html           |  33 ++++
 .../initial-letter-sunk-initial-rtl-ref.html       |  34 ++++
 .../initial-letter-sunk-initial-rtl.html           |  33 ++++
 .../initial-letter-sunk-initial-vlr-ref.html       |  47 +++++
 .../initial-letter-sunk-initial-vlr.html           |  33 ++++
 .../initial-letter-sunk-initial-vrl-ref.html       |  47 +++++
 .../initial-letter-sunk-initial-vrl.html           |  33 ++++
 .../initial-letter-sunk-initial.html               |  32 ++++
 .../initial-letter/initial-letter-valid.html       |  19 ++
 .../initial-letter-with-first-line-ref.html        |  34 ++++
 .../initial-letter-with-first-line.html            |  33 ++++
 .../initial-letter-with-tab-ref.html               |  39 ++++
 .../initial-letter-with-tab-rtl-ref.html           |  40 ++++
 .../initial-letter-with-tab-rtl.html               |  36 ++++
 .../initial-letter/initial-letter-with-tab.html    |  35 ++++
 .../tests/css/css-inline/inline-002-crash.html     |   1 +
 .../css/css-inline/inline-crash-chrome-001.html    |  21 +++
 .../tests/css/css-inline/inline-crash.html         | 210 +++++++++++++++++++++
 .../parsing/alignment-baseline-computed.html       |  29 +++
 .../parsing/alignment-baseline-invalid.html        |  22 +++
 .../parsing/alignment-baseline-valid.html          |  27 +++
 .../parsing/baseline-shift-computed.html           |  28 +++
 .../css-inline/parsing/baseline-shift-invalid.html |  24 +++
 .../css-inline/parsing/baseline-shift-valid.html   |  22 +++
 .../parsing/dominant-baseline-computed.html        |  26 +++
 .../parsing/dominant-baseline-invalid.html         |  20 ++
 .../parsing/dominant-baseline-valid.html           |  25 +++
 .../css-inline/parsing/line-height-computed.html   |  36 ++++
 .../css-inline/parsing/line-height-invalid.html    |  26 +++
 .../css/css-inline/parsing/line-height-valid.html  |  25 +++
 .../parsing/vertical-align-computed.html           |  37 ++++
 .../css-inline/parsing/vertical-align-invalid.html |  31 +++
 .../css-inline/parsing/vertical-align-valid.html   |  31 +++
 .../css/css-inline/too-big-line-height-crash.html  |  30 +++
 129 files changed, 5336 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-inline/META.yml
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-001.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-002.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-first-003.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-001.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-002.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-last-003.html
 create mode 100644 testing/web-platform/tests/css/css-inline/baseline-source/baseline-source-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/change-inline-change-abspos-crash.html
 create mode 100644 testing/web-platform/tests/css/css-inline/empty-text-node-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/empty-text-node-001.html
 create mode 100644 testing/web-platform/tests/css/css-inline/float-becomes-inflow-crash.html
 create mode 100644 testing/web-platform/tests/css/css-inline/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/Initial-letter-breaking.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby-tall.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-over-ruby.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby-tall.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-drop-under-ruby.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-margins.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby-tall.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-over-ruby.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby-tall.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-block-position-raise-under-ruby.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-drop-initial.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-001.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-002.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-003.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-004.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-float-005.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-indentation.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-layout-text-decoration-underline.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raise-initial.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-raise.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-raised-sunken-caps-sunken.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-clears.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-short-para-initial-letter-wraps.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial-vrl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-sunk-initial.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-first-line.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab-rtl.html
 create mode 100644 testing/web-platform/tests/css/css-inline/initial-letter/initial-letter-with-tab.html
 create mode 100644 testing/web-platform/tests/css/css-inline/inline-002-crash.html
 create mode 100644 testing/web-platform/tests/css/css-inline/inline-crash-chrome-001.html
 create mode 100644 testing/web-platform/tests/css/css-inline/inline-crash.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/alignment-baseline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/baseline-shift-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/baseline-shift-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/baseline-shift-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/dominant-baseline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/line-height-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/line-height-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/line-height-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/vertical-align-computed.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/vertical-align-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/parsing/vertical-align-valid.html
 create mode 100644 testing/web-platform/tests/css/css-inline/too-big-line-height-crash.html

(limited to 'testing/web-platform/tests/css/css-inline')

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