From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 testing/web-platform/tests/css/css-ruby/META.yml   |   5 +
 .../css/css-ruby/abs-in-ruby-base-container.html   |  14 ++
 .../tests/css/css-ruby/abs-in-ruby-base-ref.html   |  11 ++
 .../tests/css/css-ruby/abs-in-ruby-base.html       |  14 ++
 .../tests/css/css-ruby/abs-in-ruby-container.html  |  14 ++
 .../tests/css/css-ruby/block-ruby-001-ref.html     |  48 ++++++
 .../tests/css/css-ruby/block-ruby-001.html         |  50 ++++++
 .../tests/css/css-ruby/block-ruby-002-ref.html     |  43 +++++
 .../tests/css/css-ruby/block-ruby-002.html         |  51 ++++++
 .../tests/css/css-ruby/block-ruby-003-ref.html     |  46 ++++++
 .../tests/css/css-ruby/block-ruby-003.html         |  56 +++++++
 .../tests/css/css-ruby/block-ruby-004-ref.html     |  49 ++++++
 .../tests/css/css-ruby/block-ruby-004.html         |  62 +++++++
 .../tests/css/css-ruby/block-ruby-005-ref.html     |  52 ++++++
 .../tests/css/css-ruby/block-ruby-005.html         |  62 +++++++
 .../tests/css/css-ruby/br-clear-all-000.html       |  52 ++++++
 .../tests/css/css-ruby/br-clear-all-001.html       |  51 ++++++
 .../tests/css/css-ruby/br-clear-all-002.html       |  53 ++++++
 .../css-ruby/empty-ruby-base-container-ref.html    |   5 +
 .../css/css-ruby/empty-ruby-base-container.html    |   7 +
 .../css-ruby/empty-ruby-text-container-abs.html    |  11 ++
 .../css-ruby/empty-ruby-text-container-float.html  |  11 ++
 .../css-ruby/empty-ruby-text-container-ref.html    |   5 +
 .../css/css-ruby/empty-ruby-text-container.html    |   7 +
 .../improperly-contained-annotation-001.html       |  27 +++
 .../tests/css/css-ruby/inheritance.html            |  22 +++
 .../css/css-ruby/intra-base-white-space-001.html   |  35 ++++
 .../css/css-ruby/line-break-around-ruby-001.html   |  36 ++++
 .../tests/css/css-ruby/line-spacing.html           | 153 +++++++++++++++++
 .../css/css-ruby/nested-ruby-pairing-001-ref.html  |  27 +++
 .../css/css-ruby/nested-ruby-pairing-001.html      |  29 ++++
 .../css/css-ruby/parsing/ruby-align-invalid.html   |  21 +++
 .../css/css-ruby/parsing/ruby-align-valid.html     |  20 +++
 .../css/css-ruby/parsing/ruby-merge-invalid.html   |  23 +++
 .../css/css-ruby/parsing/ruby-merge-valid.html     |  19 +++
 .../css-ruby/parsing/ruby-position-invalid.html    |  22 +++
 .../css/css-ruby/parsing/ruby-position-valid.html  |  19 +++
 .../tests/css/css-ruby/rb-display-001.html         |  26 +++
 .../tests/css/css-ruby/rbc-rtc-basic-001.html      |  42 +++++
 .../improperly-contained-annotation-001-ref.html   |  25 +++
 .../reference/intra-base-white-space-001-ref.html  |  28 ++++
 .../css/css-ruby/reference/rb-display-001-ref.html |  17 ++
 .../css-ruby/reference/rbc-rtc-basic-001-ref.html  |  29 ++++
 .../reference/ruby-annotation-pairing-001-ref.html |  36 ++++
 .../tests/css/css-ruby/root-block-ruby.xhtml       |  38 +++++
 .../tests/css/css-ruby/root-ruby-ref.xhtml         |  28 ++++
 .../tests/css/css-ruby/root-ruby.xhtml             |  38 +++++
 .../tests/css/css-ruby/rt-display-001.html         |  27 +++
 .../tests/css/css-ruby/rt-display-blockified.html  |  41 +++++
 .../web-platform/tests/css/css-ruby/ruby-001.xht   |  60 +++++++
 .../tests/css/css-ruby/ruby-align-001-ref.html     |  17 ++
 .../tests/css/css-ruby/ruby-align-001.html         |  26 +++
 .../tests/css/css-ruby/ruby-align-001a.html        |  26 +++
 .../tests/css/css-ruby/ruby-align-002-ref.html     |  28 ++++
 .../tests/css/css-ruby/ruby-align-002.html         |  28 ++++
 .../tests/css/css-ruby/ruby-align-002a.html        |  28 ++++
 .../css/css-ruby/ruby-annotation-pairing-001.html  |  40 +++++
 .../tests/css/css-ruby/ruby-autohide-001-ref.html  |  14 ++
 .../tests/css/css-ruby/ruby-autohide-001.html      |  16 ++
 .../tests/css/css-ruby/ruby-autohide-002-ref.html  |  26 +++
 .../tests/css/css-ruby/ruby-autohide-002.html      |  38 +++++
 .../tests/css/css-ruby/ruby-autohide-003-ref.html  |  17 ++
 .../tests/css/css-ruby/ruby-autohide-003.html      |  19 +++
 .../tests/css/css-ruby/ruby-autohide-004.html      |  15 ++
 .../css/css-ruby/ruby-base-container-abs.html      |  11 ++
 .../css/css-ruby/ruby-base-container-float.html    |  11 ++
 .../css/css-ruby/ruby-base-different-size-ref.html |  28 ++++
 .../css/css-ruby/ruby-base-different-size.html     |  26 +++
 .../tests/css/css-ruby/ruby-bidi-001-ref.html      |  14 ++
 .../tests/css/css-ruby/ruby-bidi-001.html          |  16 ++
 .../tests/css/css-ruby/ruby-bidi-002-ref.html      |  35 ++++
 .../tests/css/css-ruby/ruby-bidi-002.html          |  49 ++++++
 .../tests/css/css-ruby/ruby-bidi-003-ref.html      |   6 +
 .../tests/css/css-ruby/ruby-bidi-003.html          |   8 +
 .../tests/css/css-ruby/ruby-bidi-004-ref.html      |  22 +++
 .../tests/css/css-ruby/ruby-bidi-004.html          |  26 +++
 .../css/css-ruby/ruby-box-generation-001-ref.html  |  41 +++++
 .../css/css-ruby/ruby-box-generation-001.html      |  56 +++++++
 .../css/css-ruby/ruby-box-generation-002-ref.html  |  47 ++++++
 .../css/css-ruby/ruby-box-generation-002.html      |  56 +++++++
 .../css/css-ruby/ruby-box-generation-003-ref.html  |  43 +++++
 .../css/css-ruby/ruby-box-generation-003.html      |  56 +++++++
 .../css/css-ruby/ruby-box-generation-004-ref.html  |  47 ++++++
 .../css/css-ruby/ruby-box-generation-004.html      |  56 +++++++
 .../css/css-ruby/ruby-box-generation-005-ref.html  |  45 +++++
 .../css/css-ruby/ruby-box-generation-005.html      |  41 +++++
 .../tests/css/css-ruby/ruby-box-model-001-ref.html |  81 +++++++++
 .../tests/css/css-ruby/ruby-box-model-001.html     |  94 +++++++++++
 .../css-ruby/ruby-dynamic-insertion-001-ref.html   |  20 +++
 .../css/css-ruby/ruby-dynamic-insertion-001.html   |  30 ++++
 .../css-ruby/ruby-dynamic-insertion-002-ref.html   |  20 +++
 .../css/css-ruby/ruby-dynamic-insertion-002.html   |  31 ++++
 .../css-ruby/ruby-dynamic-insertion-003-ref.html   |  13 ++
 .../css/css-ruby/ruby-dynamic-insertion-003.html   |  21 +++
 .../css-ruby/ruby-dynamic-insertion-004-ref.html   |  15 ++
 .../css/css-ruby/ruby-dynamic-insertion-004.html   |  22 +++
 .../css-ruby/ruby-dynamic-insertion-005-ref.html   |  13 ++
 .../css/css-ruby/ruby-dynamic-insertion-005.html   |  22 +++
 .../css/css-ruby/ruby-dynamic-removal-001-ref.html |  19 +++
 .../css/css-ruby/ruby-dynamic-removal-001.html     |  34 ++++
 .../css/css-ruby/ruby-dynamic-removal-002-ref.html |  13 ++
 .../css/css-ruby/ruby-dynamic-removal-002.html     |  21 +++
 .../css/css-ruby/ruby-dynamic-removal-003-ref.html |  20 +++
 .../css/css-ruby/ruby-dynamic-removal-003.html     |  33 ++++
 .../css/css-ruby/ruby-float-handling-001-ref.html  |  19 +++
 .../css/css-ruby/ruby-float-handling-001.html      |  21 +++
 .../css/css-ruby/ruby-inlinize-blocks-001-ref.html |  23 +++
 .../css/css-ruby/ruby-inlinize-blocks-001.html     |  25 +++
 .../css/css-ruby/ruby-inlinize-blocks-002-ref.html |  42 +++++
 .../css/css-ruby/ruby-inlinize-blocks-002.html     |  44 +++++
 .../css/css-ruby/ruby-inlinize-blocks-003-ref.html |  25 +++
 .../css/css-ruby/ruby-inlinize-blocks-003.html     |  26 +++
 .../css/css-ruby/ruby-inlinize-blocks-004-ref.html |  23 +++
 .../css/css-ruby/ruby-inlinize-blocks-004.html     |  25 +++
 .../css/css-ruby/ruby-inlinize-blocks-005-ref.html |  30 ++++
 .../css/css-ruby/ruby-inlinize-blocks-005.html     |  32 ++++
 .../ruby-intra-level-whitespace-001-ref.html       |  18 ++
 .../css-ruby/ruby-intra-level-whitespace-001.html  |  20 +++
 .../ruby-intra-level-whitespace-002-ref.html       |  24 +++
 .../css-ruby/ruby-intra-level-whitespace-002.html  |  31 ++++
 .../ruby-intra-level-whitespace-003-ref.html       |  10 ++
 .../css-ruby/ruby-intra-level-whitespace-003.html  |  32 ++++
 .../css/css-ruby/ruby-intrinsic-isize-001-ref.html |  48 ++++++
 .../css/css-ruby/ruby-intrinsic-isize-001.html     |  47 ++++++
 .../css/css-ruby/ruby-intrinsic-isize-002-ref.html |  28 ++++
 .../css/css-ruby/ruby-intrinsic-isize-002.html     |  30 ++++
 .../css/css-ruby/ruby-intrinsic-isize-003-ref.html |  54 ++++++
 .../css/css-ruby/ruby-intrinsic-isize-003.html     |  53 ++++++
 .../css/css-ruby/ruby-justification-001-ref.html   |  12 ++
 .../tests/css/css-ruby/ruby-justification-001.html |  15 ++
 .../css/css-ruby/ruby-justification-002-ref.html   |  17 ++
 .../tests/css/css-ruby/ruby-justification-002.html |  23 +++
 .../css-ruby/ruby-lang-specific-style-001-ref.html |  12 ++
 .../css/css-ruby/ruby-lang-specific-style-001.html |  14 ++
 .../css-ruby/ruby-layout-internal-boxes-ref.html   | 179 ++++++++++++++++++++
 .../css/css-ruby/ruby-layout-internal-boxes.html   | 181 +++++++++++++++++++++
 .../ruby-line-break-suppression-001-ref.html       |  11 ++
 .../css-ruby/ruby-line-break-suppression-001.html  |  13 ++
 .../ruby-line-break-suppression-002-ref.html       |  13 ++
 .../css-ruby/ruby-line-break-suppression-002.html  |  15 ++
 .../ruby-line-break-suppression-003-ref.html       |  16 ++
 .../css-ruby/ruby-line-break-suppression-003.html  |  21 +++
 .../ruby-line-break-suppression-004-ref.html       |   7 +
 .../css-ruby/ruby-line-break-suppression-004.html  |   9 +
 .../ruby-line-break-suppression-005-ref.html       |   7 +
 .../css-ruby/ruby-line-break-suppression-005.html  |   9 +
 .../css/css-ruby/ruby-line-breaking-001-ref.html   |  14 ++
 .../tests/css/css-ruby/ruby-line-breaking-001.html |  19 +++
 .../css/css-ruby/ruby-line-breaking-002-ref.html   |  11 ++
 .../tests/css/css-ruby/ruby-line-breaking-002.html |  13 ++
 .../css/css-ruby/ruby-line-breaking-003-ref.html   |  18 ++
 .../tests/css/css-ruby/ruby-line-breaking-003.html |  28 ++++
 .../tests/css/css-ruby/ruby-no-transform-ref.html  |  10 ++
 .../tests/css/css-ruby/ruby-no-transform.html      |  17 ++
 .../css/css-ruby/ruby-position-alternate.html      |  75 +++++++++
 .../tests/css/css-ruby/ruby-position.html          |  47 ++++++
 .../tests/css/css-ruby/ruby-reflow-001-noruby.html |  18 ++
 .../css/css-ruby/ruby-reflow-001-opaqueruby.html   |  22 +++
 .../css-ruby/ruby-reflow-001-transparentruby.html  |  23 +++
 .../tests/css/css-ruby/ruby-span-001-ref.html      |   7 +
 .../tests/css/css-ruby/ruby-span-001.html          |   9 +
 .../tests/css/css-ruby/ruby-text-collapse-ref.html |  21 +++
 .../tests/css/css-ruby/ruby-text-collapse.html     |  23 +++
 .../ruby-text-combine-upright-001-ref.html         |  21 +++
 .../css-ruby/ruby-text-combine-upright-001a.html   |  23 +++
 .../css-ruby/ruby-text-combine-upright-001b.html   |  23 +++
 .../ruby-text-combine-upright-002-ref.html         |  21 +++
 .../css-ruby/ruby-text-combine-upright-002a.html   |  23 +++
 .../css-ruby/ruby-text-combine-upright-002b.html   |  23 +++
 .../css/css-ruby/ruby-whitespace-001-ref.html      |  33 ++++
 .../tests/css/css-ruby/ruby-whitespace-001.html    |  33 ++++
 .../css/css-ruby/ruby-whitespace-002-ref.html      |  15 ++
 .../tests/css/css-ruby/ruby-whitespace-002.html    |  16 ++
 .../css/css-ruby/ruby-with-floats-001-ref.html     |   4 +
 .../tests/css/css-ruby/ruby-with-floats-001.html   |   7 +
 .../css/css-ruby/ruby-with-floats-002-ref.html     |   5 +
 .../tests/css/css-ruby/ruby-with-floats-002.html   |   8 +
 .../css/css-ruby/ruby-with-floats-003-ref.html     |   5 +
 .../tests/css/css-ruby/ruby-with-floats-003.html   |   8 +
 .../tests/css/css-ruby/support/ruby-common.css     |  18 ++
 .../css/css-ruby/support/ruby-dynamic-insertion.js |  42 +++++
 .../css/css-ruby/support/ruby-dynamic-removal.js   |  14 ++
 182 files changed, 5288 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-ruby/META.yml
 create mode 100644 testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/block-ruby-005.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/br-clear-all-000.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/br-clear-all-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/br-clear-all-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/line-spacing.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/rb-display-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml
 create mode 100644 testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml
 create mode 100644 testing/web-platform/tests/css/css-ruby/root-ruby.xhtml
 create mode 100644 testing/web-platform/tests/css/css-ruby/rt-display-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/rt-display-blockified.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-001.xht
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-001a.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-align-002a.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-justification-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-justification-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-no-transform.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-position.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-span-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html
 create mode 100644 testing/web-platform/tests/css/css-ruby/support/ruby-common.css
 create mode 100644 testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js
 create mode 100644 testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js

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

diff --git a/testing/web-platform/tests/css/css-ruby/META.yml b/testing/web-platform/tests/css/css-ruby/META.yml
new file mode 100644
index 0000000000..b0098caea1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/META.yml
@@ -0,0 +1,5 @@
+spec: https://drafts.csswg.org/css-ruby/
+suggested_reviewers:
+  - kojiishi
+  - fantasai
+  - upsuper
diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html
new file mode 100644
index 0000000000..0a4ad8a24c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-container.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Absolutely-positioned element in ruby base container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context">
+<link rel="match" href="abs-in-ruby-base-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  .rel { position: relative; }
+  .abs { position: absolute; left: 0; top: -1em; }
+</style>
+<body style="font: 50px/3 Ahem">
+X<ruby><rbc class="rel"><rb><span class="abs">X</span></rb></rbc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html
new file mode 100644
index 0000000000..0c7f57b1d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  .rel { position: relative; }
+  .abs { position: absolute; left: 0; top: -1em; }
+</style>
+<body style="font: 50px/3 Ahem">
+X<span class="rel"><span class="abs">X</span></span>
diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html
new file mode 100644
index 0000000000..bff3a3b748
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-base.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Absolutely-positioned element in ruby base</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context">
+<link rel="match" href="abs-in-ruby-base-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  .rel { position: relative; }
+  .abs { position: absolute; left: 0; top: -1em; }
+</style>
+<body style="font: 50px/3 Ahem">
+X<ruby><rbc><rb class="rel"><span class="abs">X</span></rb></rbc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html
new file mode 100644
index 0000000000..41be48c47a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/abs-in-ruby-container.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Absolutely-positioned element in ruby container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context">
+<link rel="match" href="abs-in-ruby-base-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  .rel { position: relative; }
+  .abs { position: absolute; left: 0; top: -1em; }
+</style>
+<body style="font: 50px/3 Ahem">
+X<ruby class="rel"><rbc><rb><span class="abs">X</span></rb></rbc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html
new file mode 100644
index 0000000000..076a2f01cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Reference: basic 'block ruby' layout.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+@font-face
+{
+  font-family: "mplus-1p-regular";
+  src: url("/fonts/mplus-1p-regular.woff") format("woff");
+}
+
+html
+{
+  font-family: "mplus-1p-regular";
+}
+
+.b { background: lightblue; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+.columns {
+  columns: 3 auto;
+  column-rule: 1px;
+  background: lightgrey;
+  height: 2em;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+.w { white-space: nowrap; width:2.5em; margin: 1em 0em; }
+</style>
+A<div class="b"><ruby>べ<rt>る</rt></ruby></div>B
+A<div class="mbp b"><ruby>べ<rt>る</rt></ruby></div>B
+<div class="columns">A<div class="mbp b"><ruby>べ<rt>る</rt> べ<rt>る</rt>  べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby></div>B</div>
+<div style="width:2.5em; border:1px solid;">
+    <div class="w b"><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></div>
+    <div class="w b"><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-001.html b/testing/web-platform/tests/css/css-ruby/block-ruby-001.html
new file mode 100644
index 0000000000..0602116aac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: basic 'block ruby' layout.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="block-ruby-001-ref.html">
+<style>
+@font-face
+{
+  font-family: "mplus-1p-regular";
+  src: url("/fonts/mplus-1p-regular.woff") format("woff");
+}
+
+html
+{
+  font-family: "mplus-1p-regular";
+}
+
+ruby { display: block ruby; background: lightblue; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+.columns {
+  columns: 3 auto;
+  column-rule: 1px;
+  background: lightgrey;
+  height: 2em;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+</style>
+A<ruby>べ<rt>る</rt></ruby>B
+A<ruby class="mbp">べ<rt>る</rt></ruby>B
+<div class="columns">A<ruby class=mbp>べ<rt>る</rt> べ<rt>る</rt>  べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby>B</div>
+<div style="width:2.5em; border:1px solid;">
+    <ruby style="margin: 1em 0em;"><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby>
+    <ruby style="margin: 1em 0em;"><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html
new file mode 100644
index 0000000000..a4d26153da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>Reference: blockification/inlinification of 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+div,span { background: lightblue; }
+ruby { display: ruby; }
+rbb { display: ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+<grid>A<div><ruby>べ<rt>る</rt></ruby></div>B</grid>
+<grid>A<div class=mbp><ruby>べ<rt>る</rt></ruby></div>B</grid>
+<grid>A
+    <div><ruby>べ<rt>る</rt></ruby></div>
+    <div><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div>
+B
+</grid>
+<span><ruby>べ<rt><rbb>る</rbb></rt></ruby></span>
+<span><ruby>べ<rbc><rbb>る</rbb></rbc></ruby></span>
+<span><ruby>べ<rtc><rbb>る</rbb></rtc></ruby></span>
+<span><ruby>べ<rbb>る</rbb></ruby></span>
+
+<pre>block ruby, block ruby, block ruby, block ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, </pre>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-002.html b/testing/web-platform/tests/css/css-ruby/block-ruby-002.html
new file mode 100644
index 0000000000..73fbc3015b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: blockification/inlinification of 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-002-ref.html">
+<style>
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+<grid>A<ruby>べ<rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>べ<rt>る</rt></ruby>B</grid>
+<grid>A
+    <ruby>べ<rt>る</rt></ruby>
+    <ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby>
+B
+</grid>
+<ruby>べ<rt><rbb>る</rbb></rt></ruby>
+<ruby>べ<rbc><rbb>る</rbb></rbc></ruby>
+<ruby>べ<rtc><rbb>る</rbb></rtc></ruby>
+<ruby>べ<rbb>る</rbb></ruby>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html
new file mode 100644
index 0000000000..05eb7dbb99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  font:10px/1 monospace;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+
+<ruby class=mbp>X<rt>る</rt></ruby>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby>X<rt>る</rt></ruby><ruby>X<rbc></rbc></ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby>X<rbc><rt>る</rt></rbc></ruby>B</grid>
+<ruby>X<rt><rbb>Xる</rbb></rt></ruby>
+<ruby>X<rbc><rbb>Xる</rbb></rbc></ruby>
+<ruby>X<rtc><rbb>Xる</rbb></rtc></ruby>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp>X<rt>る</rt></rbb>
+<rbb class=mbp>X<rb>X</rb></rbb>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-003.html b/testing/web-platform/tests/css/css-ruby/block-ruby-003.html
new file mode 100644
index 0000000000..26b33a1f6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: Text node insertion in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-003-ref.html">
+<style>
+html,body {
+  font:10px/1 monospace;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+</style>
+
+<ruby class=mbp><rt>る</rt></ruby>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby><rt>る</rt></ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc><rt>る</rt></rbc></ruby>B</grid>
+<ruby><rt><rbb>る</rbb></rt></ruby>
+<ruby><rbc><rbb>る</rbb></rbc></ruby>
+<ruby><rtc><rbb>る</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp><rt>る</rt></rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let s = "X";
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ e.insertBefore(document.createTextNode(s),e.firstChild); e.offsetHeight;});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html
new file mode 100644
index 0000000000..be7e89658d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  font:10px/1 monospace;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+<rt>る</rt>
+<ruby class=mbp>X<rt>る</rt></ruby>
+<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
+<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
+<grid>A<ruby>X<rt>る</rt></ruby><ruby><rbc></rbc><rt>る</rt></ruby>B</grid>
+<grid>A<ruby><rt>る</rt></ruby><ruby><rbc>X</rbc><rt>る</rt></ruby>B</grid>
+<ruby><rt><rbb>X<rt>る</rt></rbb></rt><rt>る</rt></ruby>
+<ruby><rbc><rbb>X<rt>る</rt></rbb></rbc><rt>る</rt></ruby>
+<ruby><rtc><rbb>X<rt>る</rt></rbb></rtc><rt>る</rt></ruby>
+<rbb class=mbp><rt>る</rt></rbb>
+<rbb class=mbp>X<rt>る</rt></rbb>
+<rbb class=mbp><rb>X</rb><rt>る</rt></rbb>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-004.html b/testing/web-platform/tests/css/css-ruby/block-ruby-004.html
new file mode 100644
index 0000000000..33ab4207b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-004.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja">
+<meta charset="utf-8">
+<title>CSS Ruby Test: RT append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-004-ref.html">
+<style>
+html,body {
+  font:10px/1 monospace;
+}
+
+ruby { display: ruby; background: lightblue; }
+rbb { display: block ruby; background: lightblue; }
+
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+
+<rt>る</rt>
+<ruby class=mbp>X</ruby>
+<grid>A<ruby class=mbp></ruby>B</grid>
+<grid>A<ruby class=mbp>X</ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
+<ruby><rt><rbb>X</rbb></rt></ruby>
+<ruby><rbc><rbb>X</rbb></rbc></ruby>
+<ruby><rtc><rbb>X</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let rt = document.querySelector('rt');
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ let n = rt.cloneNode(true); e.appendChild(n); e.offsetHeight;});
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html b/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html
new file mode 100644
index 0000000000..06c6eccd9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html>
+<meta charset="utf-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+body {
+  font:10px/1 monospace;
+}
+
+rbb, ruby { background:lightblue; }
+ruby { display: ruby; }
+rbb { display: block ruby; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+x { display:block; width:3em; overflow:hidden; background:lightblue; }
+</style>
+
+<div>zzzzzzzzzzzz</div>
+<ruby class=mbp>X<div>zzzzzzzzzzzz</div></ruby>
+<grid>A<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x><rbb>X<div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc></rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<grid>A<x><rbb><div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc>X</rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
+<ruby><rt><ruby>X<div>zzzzzzzzzzzz</div></ruby></rt><div>zzzzzzzzzzzz</div></ruby>
+<ruby><rbc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rbc><div>zzzzzzzzzzzz</div></ruby>
+<ruby><rtc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rtc><div>zzzzzzzzzzzz</div></ruby>
+<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb><rt>X</rt><div>zzzzzzzzzzzz</div></rbb></x>
+<x class=mbp><rbb><rb>X</rb><div>zzzzzzzzzzzz</div></rbb></x>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/block-ruby-005.html b/testing/web-platform/tests/css/css-ruby/block-ruby-005.html
new file mode 100644
index 0000000000..cf09e76833
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/block-ruby-005.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html>
+<meta charset="utf-8">
+<title>CSS Ruby Test: DIV append in 'display:ruby/block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+<link rel="match" href="block-ruby-005-ref.html">
+<style>
+body {
+  font:10px/1 monospace;
+}
+
+rbb, ruby { background:lightblue; overflow:hidden; width:3em; }
+ruby { display: ruby; }
+rbb { display: block ruby; }
+grid { display: grid; }
+.mbp {
+  margin: 1px 3px 5px 7px;
+  padding: 3px 5px 7px 1px;
+  border-width: 3px 1px 7px 5px;
+  border-style: solid;
+}
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+  font-size: 200%;
+}
+rtc {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+  ruby-position: under;
+}
+</style>
+
+<div>zzzzzzzzzzzz</div>
+<ruby class=mbp>X</ruby>
+<grid>A<ruby class=mbp></ruby>B</grid>
+<grid>A<ruby class=mbp>X</ruby>B</grid>
+<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
+<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
+<ruby><rt><rbb>X</rbb></rt></ruby>
+<ruby><rbc><rbb>X</rbb></rbc></ruby>
+<ruby><rtc><rbb>X</rbb></rtc></ruby>
+<rbb class=mbp></rbb>
+<rbb class=mbp>X</rbb>
+<rbb class=mbp><rt>X</rt></rbb>
+<rbb class=mbp><rb>X</rb></rbb>
+
+<script>
+document.body.getClientRects();
+let div = document.querySelector('div');
+let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
+ruby.forEach(function(e){ let n = div.cloneNode(true); e.appendChild(n); e.offsetHeight;});
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html
new file mode 100644
index 0000000000..91c5a0b63b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-000.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos">
+<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes">
+<style>
+  #float {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: cyan;
+  }
+  #container {
+    padding-bottom: 50px;
+    line-height: 20px;
+    background: yellow;
+  }
+  ruby {
+    ruby-position: under;
+  }
+  ruby > div {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: hotpink;
+  }
+  rt > div {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background: blue;
+  }
+</style>
+<p>The yellow box should encompass its contents and also the cyan float, due to
+  clearance. The yellow box has bottom padding, and the blue ruby annotation box
+  is allowed to overflow into the padding area. In this case the blue box isn't
+  tall enough to even get past the float, though.</p>
+<div id="float"></div>
+<div id="container" data-expected-height="150">
+  <ruby>
+    <div></div>
+    <rt>
+      <div></div>
+    </rt>
+  </ruby>
+  <br clear="all">
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html
new file mode 100644
index 0000000000..7c71eab4dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos">
+<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes">
+<style>
+  #float {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: cyan;
+  }
+  #container {
+    padding-bottom: 50px;
+    line-height: 20px;
+    background: yellow;
+  }
+  ruby {
+    ruby-position: under;
+  }
+  ruby > div {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: hotpink;
+  }
+  rt > div {
+    display: inline-block;
+    width: 50px;
+    height: 100px;
+    background: blue;
+  }
+</style>
+<p>The yellow box should encompass its contents and also the cyan float, due to
+  clearance. The yellow box has bottom padding, and the blue ruby annotation box
+  is allowed to overflow into the padding area.</p>
+<div id="float"></div>
+<div id="container" data-expected-height="150">
+  <ruby>
+    <div></div>
+    <rt>
+      <div></div>
+    </rt>
+  </ruby>
+  <br clear="all">
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html b/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html
new file mode 100644
index 0000000000..487fd33b5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/br-clear-all-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-ruby-1/#rubypos">
+<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes">
+<style>
+  #float {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: cyan;
+  }
+  #container {
+    padding-bottom: 50px;
+    line-height: 20px;
+    background: yellow;
+  }
+  ruby {
+    ruby-position: under;
+  }
+  ruby > div {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: hotpink;
+  }
+  rt > div {
+    display: inline-block;
+    width: 50px;
+    height: 150px;
+    background: blue;
+  }
+</style>
+<p>The yellow box should encompass its contents and also the cyan float, due to
+  clearance. The yellow box has bottom padding, and the blue ruby annotation box
+  is allowed to overflow into the padding area. In this case the blue box is so
+  tall it will use the entire padding area, and also stretch the yellow box
+  somewhat.</p>
+<div id="float"></div>
+<div id="container" data-expected-height="170">
+  <ruby>
+    <div></div>
+    <rt>
+      <div></div>
+    </rt>
+  </ruby>
+  <br clear="all">
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html
new file mode 100644
index 0000000000..e6119468c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference File</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<div style="font-size: 64px; line-height: 3">a<ruby><rb>&nbsp;</rb><rt>b</rt></ruby>c</div>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html
new file mode 100644
index 0000000000..4d86e07985
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-base-container.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Empty ruby base container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-base-container-ref.html">
+<div style="font-size: 64px; line-height: 3">a<ruby><rt>b</rt></ruby>c</div>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html
new file mode 100644
index 0000000000..025859ea74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-abs.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Empty ruby text container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-text-container-ref.html">
+<style>
+a { position: absolute; }
+</style>
+<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><a>&nbsp;</a></rtc><rt>c</rt></ruby>d</div>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html
new file mode 100644
index 0000000000..88bcf42736
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-float.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Empty ruby text container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-text-container-ref.html">
+<style>
+a { float: right; }
+</style>
+<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><a>&nbsp;</a></rtc><rt>c</rt></ruby>d</div>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html
new file mode 100644
index 0000000000..9b513c9ada
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Empty ruby text container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc><rt></rt></rtc><rt>c</rt></ruby>d</div>
diff --git a/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html
new file mode 100644
index 0000000000..972013c662
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/empty-ruby-text-container.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Empty ruby text container</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-text-container-ref.html">
+<div style="font-size: 64px; line-height: 5">a<ruby><rb>b</rb><rtc></rtc><rt>c</rt></ruby>d</div>
diff --git a/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html b/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html
new file mode 100644
index 0000000000..3790ba0bd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/improperly-contained-annotation-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Ruby Test: Improperly-contained ruby annotation</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#box-fixup">
+  <link rel="match" href="reference/improperly-contained-annotation-001-ref.html">
+
+  <meta content="This test checks that an improperly-contained ruby annotation is wrapped in an anonymous ruby container.">
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 40px;
+    }
+
+  rbc
+    {
+      display: ruby-base-container;
+    }
+  </style>
+
+  <ruby><rbc>B<rt>A</rt></rbc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/inheritance.html b/testing/web-platform/tests/css/css-ruby/inheritance.html
new file mode 100644
index 0000000000..0128ea1ee8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/inheritance.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Ruby Layout properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#property-index">
+<meta name="assert" content="Properties inherit 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_inherited('ruby-align', 'space-around', 'center');
+assert_inherited('ruby-position', 'alternate', 'under');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html b/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html
new file mode 100644
index 0000000000..86468376c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/intra-base-white-space-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Ruby Test: intra-base white space (complex)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#white-space">
+  <link rel="match" href="reference/intra-base-white-space-001-ref.html">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that a single intra-base white space must be used when doing unit box pairing as long as it does not begin a ruby base container box or it does not end a ruby base container box. In this test, a leading white space inside of a ruby base unit box (the 'c' one) and a trailing white space inside of a ruby base unit box (the 'd' one) are collapsible white spaces across adjacent ruby base boxes according to white space processing rules.">
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 60px;
+    }
+  </style>
+
+  <ruby>
+
+    b<rb> </rb><rb> c</rb><rb>d </rb><rb> </rb><rb>e</rb>
+
+    <rt>a</rt><rt></rt><rt>a</rt><rt>a</rt><rt></rt><rt>a</rt>
+
+  </ruby>
+
+  <!--
+
+  |[ a ]|[  ]|[ a ]|  [ a ]  |[]|[ a ]|
+  |[ b ]|[ws]|[ c ]|[ d ][ws]|[]|[ e ]|
+
+  -->
diff --git a/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html b/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html
new file mode 100644
index 0000000000..c631f201e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/line-break-around-ruby-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Ruby Test: Test line breaking before and after &lt;ruby&gt; elements.</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<meta name="assert" content="est line breaking before and after &lt;ruby&gt; elements">
+<meta name="flags" content="dom">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#container > div {
+    line-height:2;
+    margin-bottom:1em;
+}
+</style>
+<div id="log"></div>
+<div id="container">
+    <div title="OP+ID" style="width:2em;">あ（かき</div>
+    <div title="ID+CL" style="width:2em;">あい）か</div>
+    <div title="span+CL" style="width:2em;">あ<span>す</span>）か</div>
+    <div title="OP+ruby" style="width:2em;">あ（<ruby>べ<rt>る</rt></ruby>か</div>
+    <div title="ruby+CL" style="width:2em;">あ<ruby>べ<rt>る</rt></ruby>）か</div>
+    <div title="OP+ruby+CL" style="width:3em;">あ（<ruby>べ<rt>る</rt></ruby>）か</div>
+</div>
+<script>
+runTests();
+function runTests() {
+    var lineHeight = parseFloat(getComputedStyle(container.firstElementChild).lineHeight);
+    Array.prototype.forEach.call(container.children, function (element) {
+        test(function () {
+            var lineCount = element.offsetHeight / lineHeight;
+            assert_approx_equals(lineCount, 3, 0.1);
+        }, element.title);
+    });
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/line-spacing.html b/testing/web-platform/tests/css/css-ruby/line-spacing.html
new file mode 100644
index 0000000000..9d3c6f23e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/line-spacing.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-ruby/#line-height">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 16px/1 Ahem;
+}
+
+body > div {
+  border: 1px solid lime;
+}
+
+.over_emp {
+  -webkit-text-emphasis: 'x';
+  -webkit-text-emphasis-position: over left;
+  text-emphasis: 'x';
+  text-emphasis-position: over left;
+}
+
+.under_emp {
+  -webkit-text-emphasis: 'x';
+  -webkit-text-emphasis-position: under left;
+  text-emphasis: 'x';
+  text-emphasis-position: under left;
+}
+</style>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function renderRuby(source) {
+  document.body.insertAdjacentHTML('afterbegin', source);
+  const firstChild = document.body.firstChild;
+  const container = firstChild.tagName == 'RUBY' ? null : firstChild;
+  const ruby = firstChild.tagName == 'RUBY' ? firstChild : firstChild.querySelector('ruby');
+  return {container: container, ruby: ruby, rt: ruby.querySelector('rt')}
+}
+
+function renderRubyAndGetBoxes(source) {
+  const {container, ruby, rt} = renderRuby(source);
+  return {
+      container: container ? container.getBoundingClientRect() : null,
+      ruby: ruby ? ruby.getBoundingClientRect() : null,
+      rt: rt ? rt.getBoundingClientRect() : null
+  };
+}
+
+test(() => {
+  const {container, ruby, rt} = renderRubyAndGetBoxes(
+      '<div><ruby>base<rt>annotation</rt></ruby></div>');
+  assert_true(container.top <= rt.top);
+  assert_true(rt.top < ruby.top);
+}, 'Over ruby doesn\'t overflow the block');
+
+test(() => {
+  const {container, ruby, rt} = renderRubyAndGetBoxes(
+      '<div>before <span style="vertical-align:32px;">' +
+      '<ruby>base<rt>annotation</rt></ruby>' +
+       '</span> after</div>');
+  assert_true(container.top <= rt.top);
+  assert_true(rt.top < ruby.top);
+}, 'Over ruby + vertical-align doesn\'t overflow the block');
+
+test(() => {
+  const {container, ruby, rt} = renderRubyAndGetBoxes(
+      '<div><ruby style="ruby-position:under">base<rt>annotation</rt></ruby></div>');
+  assert_true(container.bottom >= rt.bottom);
+  assert_true(rt.bottom > ruby.bottom);
+}, 'Under ruby doesn\'t overflow the block');
+
+test(() => {
+  const {container, ruby, rt} = renderRubyAndGetBoxes(
+      '<div>before <ruby style="vertical-align:-32px; ruby-position:under">' +
+      'base<rt>annotation</rt></ruby> after</div>');
+  assert_true(container.bottom >= rt.bottom);
+  assert_true(rt.bottom > ruby.bottom);
+}, 'Under ruby + vertical-align doesn\'t overflow the block');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div><ruby style="ruby-position:under">base<rt>annotation</rt></ruby>' +
+      '<div>n</div></div>');
+  const nextBlockBox = container.querySelector('div').getBoundingClientRect();
+  const rtBox = rt.getBoundingClientRect();
+  assert_greater_than_equal(nextBlockBox.top, rtBox.bottom);
+}, 'Under ruby doesn\'t overwrap with the next block');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div><span>before</span><br><ruby>base<rt style="font-size:16px"' +
+      '>annotation</rt></ruby></div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  assert_true(ruby.getBoundingClientRect().top - firstLine.bottom > 1);
+}, 'Expand inter-lines spacing');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div style="line-height:1.5;">' +
+      '<span>First line</span><br>' +
+      '<span>Second line</span><br>' +
+      '<ruby>base<rt style="font-size:50%">' +
+      'annotation</rt></ruby></div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect();
+  const rubyLine = ruby.getBoundingClientRect();
+  assert_approx_equals(secondLine.top - firstLine.top, rubyLine.top - secondLine.top, 1);
+}, 'Consume half-leading of the previous line');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div style="line-height:1.5;">' +
+      '<span>First line</span><br>' +
+      '<span class="under_emp">Second line</span><br>' +
+      '<ruby>base<rt style="font-size:50%">' +
+      'annotation</rt></ruby></div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  const secondLine = container.querySelectorAll('span')[1].getBoundingClientRect();
+  const rubyLine = ruby.getBoundingClientRect();
+  const RUBY_EMPHASIS_SIZE = 8;
+  assert_greater_than_equal(rubyLine.top - secondLine.top,
+                            secondLine.top - firstLine.top + RUBY_EMPHASIS_SIZE);
+}, 'Don\'t Consume half-leading of the previous line with text-emphasis');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div style="line-height:1.5;">' +
+      '<span>First line</span><br>' +
+      '<ruby style="ruby-position:under">base<rt style="font-size:50%">' +
+      'annotation</rt></ruby><br>' +
+      '<span>Third line</span></div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  const rubyLine = ruby.getBoundingClientRect();
+  const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect();
+  assert_approx_equals(rubyLine.top - firstLine.top, thirdLine.top - rubyLine.top, 1);
+}, 'Consume half-leading of the next line');
+
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div style="line-height:1.5;">' +
+      '<span>First line</span><br>' +
+      '<ruby style="ruby-position:under">base<rt style="font-size:50%">' +
+      'annotation</rt></ruby><br>' +
+      '<span class="over_emp">Third line</span>' +
+      '</div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  const rubyLine = ruby.getBoundingClientRect();
+  const thirdLine = container.querySelectorAll('span')[1].getBoundingClientRect();
+  const RUBY_EMPHASIS_SIZE = 8;
+  assert_greater_than_equal(thirdLine.top - rubyLine.top,
+                            rubyLine.top - firstLine.top + RUBY_EMPHASIS_SIZE);
+}, 'Don\'t Consume half-leading of the next line with text-emphasis');
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html
new file mode 100644
index 0000000000..8c47023287
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Basic nested ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <style>
+    div {
+      display: inline-block;
+      padding: 20px;
+      border: 1px solid black;
+    }
+    ruby {
+      ruby-position: over;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if content in the two blocks are identical:</p>
+  <div id="test">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+  <div id="ref">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html
new file mode 100644
index 0000000000..d502dbca9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/nested-ruby-pairing-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Basic nested ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#nested-pairing">
+  <link rel="match" href="nested-ruby-pairing-001-ref.html">
+  <style>
+    div {
+      display: inline-block;
+      padding: 20px;
+      border: 1px solid black;
+    }
+    ruby {
+      ruby-position: over;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if content in the two blocks are identical:</p>
+  <div id="test">
+    <ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角
+  </div>
+  <div id="ref">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html
new file mode 100644
index 0000000000..fcb8511d9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-align with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<meta name="assert" content="ruby-align supports only the grammar 'start | center | space-between | space-around'.">
+<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("ruby-align", "auto");
+test_invalid_value("ruby-align", "left");
+test_invalid_value("ruby-align", "10px");
+
+test_invalid_value("ruby-align", "center start");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html
new file mode 100644
index 0000000000..23093b2b23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-align-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-align with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<meta name="assert" content="ruby-align supports the full grammar 'start | center | space-between | space-around'.">
+<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("ruby-align", "start");
+test_valid_value("ruby-align", "center");
+test_valid_value("ruby-align", "space-between");
+test_valid_value("ruby-align", "space-around");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html
new file mode 100644
index 0000000000..b618bcb5da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-merge with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<meta name="assert" content="ruby-merge supports only the grammar 'separate | merge | auto'.">
+<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("ruby-merge", "none");
+test_invalid_value("ruby-merge", "collapse");
+test_invalid_value("ruby-merge", "10px");
+
+test_invalid_value("ruby-merge", "merge separate");
+test_invalid_value("ruby-merge", "merge auto");
+test_invalid_value("ruby-merge", "auto separate");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html
new file mode 100644
index 0000000000..5694e87dff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-merge-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-merge with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<meta name="assert" content="ruby-merge supports the full grammar 'separate | merge | auto'.">
+<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("ruby-align", "separate");
+test_valid_value("ruby-align", "merge");
+test_valid_value("ruby-align", "auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html
new file mode 100644
index 0000000000..907c7deee3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-position with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
+<meta name="assert" content="ruby-position supports only the grammar 'over | under | inter-character'.">
+<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("ruby-position", "auto");
+test_invalid_value("ruby-position", "center");
+test_invalid_value("ruby-position", "above");
+test_invalid_value("ruby-position", "10px 20px");
+
+test_invalid_value("ruby-position", "over under");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html
new file mode 100644
index 0000000000..2a21748613
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/parsing/ruby-position-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Ruby Layout: parsing ruby-position with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position">
+<meta name="assert" content="ruby-position supports the full grammar 'over | under | inter-character'.">
+<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("ruby-position", "over");
+test_valid_value("ruby-position", "under");
+test_valid_value("ruby-position", "inter-character");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/rb-display-001.html b/testing/web-platform/tests/css/css-ruby/rb-display-001.html
new file mode 100644
index 0000000000..5149eb34a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/rb-display-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Ruby Test: element with 'display: ruby-base' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing">
+  <link rel="match" href="reference/rb-display-001-ref.html">
+
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 60px;
+    }
+
+  span.rb
+    {
+      display: ruby-base;
+    }
+  </style>
+
+  <ruby><span class="rb">bas</span><span class="rb">bas</span><rt>T</rt><rt>T</rt></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html b/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html
new file mode 100644
index 0000000000..758490a553
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/rbc-rtc-basic-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+ <html lang="ja">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Ruby Test: rbc and rtc elements (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="match" href="reference/rbc-rtc-basic-001-ref.html">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#box-fixup">
+
+
+  <style>
+  body
+    {
+      font-size: 60px;
+    }
+
+  ruby
+    {
+      background: lightblue;
+    }
+
+  span#rbc
+    {
+      display: ruby-base-container;
+    }
+
+  rtc
+    {
+      display: ruby-text-container;
+    }
+  </style>
+
+  <ruby><span id="rbc"><rb>あい</rb></span><rt>べ<rt>る</ruby>
+
+  <ruby>でい<rtc>する</ruby>
+
+  <ruby><rb>私<rb>に<rtc>誰</ruby>
+
+ </html>
diff --git a/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html
new file mode 100644
index 0000000000..72a55541bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/reference/improperly-contained-annotation-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 40px;
+    }
+  </style>
+
+  <ruby><rbc>B<ruby>&#8203;<rt>A</rt></ruby></rbc></ruby>
+
+  <!--
+
+  &#8203; or &#x200B; is the entity reference for zero-wide space.
+
+  MathML uses the entity name &ZeroWidthSpace; for this character.
+
+  -->
diff --git a/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html
new file mode 100644
index 0000000000..4615b53ea7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/reference/intra-base-white-space-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 60px;
+    }
+  </style>
+
+  <ruby>
+
+    <rb>b</rb><rt>a</rt><rb>&nbsp;</rb><rt></rt><rb>c</rb><rt>a</rt><rb>d&nbsp;</rb><rt>a</rt><rb>e</rb><rt>a</rt>
+
+  </ruby>
+
+  <!--
+
+  |[ a ]|[  ]|[ a ]|  [ a ]  |[ a ]|
+  |[ b ]|[ws]|[ c ]|[ d ][ws]|[ e ]|
+
+  -->
diff --git a/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html
new file mode 100644
index 0000000000..f8ed4022bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/reference/rb-display-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 60px;
+    }
+  </style>
+
+  <ruby>bas<rt>T</rt>bas<rt>T</rt></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html
new file mode 100644
index 0000000000..2860c848b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/reference/rbc-rtc-basic-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+ <html lang="ja">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  body
+    {
+      font-size: 60px;
+    }
+
+  ruby
+    {
+      background: lightblue;
+    }
+  </style>
+
+  <ruby>あい<rt>べ</rt>&nbsp;<rt>る</rt></ruby>
+
+  <ruby>で<rt>す</rt>い<rt>る</rt></ruby>
+
+  <ruby>私に<rt>誰</rt></ruby>
+
+ </html>
diff --git a/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html b/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html
new file mode 100644
index 0000000000..2a8f9a836f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/reference/ruby-annotation-pairing-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference File</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="stylesheet" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 60px;
+      line-height: 1;
+    }
+
+  div.annotation
+    {
+      font-size: 30px;
+      margin-top: 60px;
+      text-indent: 15px;
+    }
+  </style>
+
+  <div class="annotation">A</div>
+
+  <div>W Z</div>
+
+  <div class="annotation">A</div>
+
+  <div>W Z</div>
+
+  <div class="annotation">A</div>
+
+  <div>W Z</div>
diff --git a/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml b/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml
new file mode 100644
index 0000000000..51ac507c3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-block-ruby.xhtml
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>CSS Ruby Test: :root element with 'display:block ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
+<link rel="match" href="root-ruby-ref.xhtml"/>
+<style>
+:root { display: block ruby; }
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml b/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml
new file mode 100644
index 0000000000..9edd7e3601
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-ruby-ref.xhtml
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>Reference: :root element with 'display:ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<style>
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+<ruby>べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre>block ruby, </pre>
+</ruby></html>
diff --git a/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml b/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml
new file mode 100644
index 0000000000..4b78690dd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/root-ruby.xhtml
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+  -->
+<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
+<meta charset="utf-8"/>
+<title>CSS Ruby Test: :root element with 'display:ruby'.</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
+<link rel="match" href="root-ruby-ref.xhtml"/>
+<style>
+:root { display: ruby; }
+rbc {
+  display: ruby-base-container;
+}
+rtc {
+  display: ruby-text-container;
+}
+</style>
+べ
+<rtc>
+  <rt>る</rt>
+</rtc>
+<rbc>
+  <rb>A</rb>
+  <rb>B</rb>
+</rbc>
+
+<pre></pre>
+<script>
+let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
+let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
+document.querySelector('pre').appendChild(document.createTextNode(result));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/rt-display-001.html b/testing/web-platform/tests/css/css-ruby/rt-display-001.html
new file mode 100644
index 0000000000..a83ce243b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/rt-display-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Ruby Test: element with 'display: ruby-text' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#ruby-display">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing">
+  <link rel="match" href="reference/rb-display-001-ref.html">
+
+
+  <style>
+  ruby
+    {
+      background-color: lightblue;
+      font-size: 60px;
+    }
+
+  span.rt
+    {
+      display: ruby-text;
+      font-size: 50%;
+    }
+  </style>
+
+  <ruby><rb>bas</rb><rb>bas</rb><span class="rt">T</span><span class="rt">T</span></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/rt-display-blockified.html b/testing/web-platform/tests/css/css-ruby/rt-display-blockified.html
new file mode 100644
index 0000000000..b2b7989fdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/rt-display-blockified.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Blockifying 'display: ruby-text' loses ruby-text functionality</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#block-ruby">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+ruby {
+  font-size: 60px;
+  line-height: 1;
+}
+
+rt.abspos {
+  position: absolute;
+  font-size: inherit;
+  line-height: 1;
+}
+
+rt.float {
+  float: left;
+  font-size: inherit;
+  line-height: 1;
+}
+</style>
+
+<p><ruby><span id="base">base1</span> <rt class="abspos">abspos</rt>base2 <rt class="float">float</rt></ruby></p>
+
+<script>
+test(() => {
+  const base = document.querySelector('#base').getBoundingClientRect();
+  const rt = document.querySelector('.abspos').getBoundingClientRect();
+  assert_greater_than_equal(rt.y, base.y);
+}, 'position:absolute should not work as ruby-text');
+
+test(() => {
+  const base = document.querySelector('#base').getBoundingClientRect();
+  const rt = document.querySelector('.float').getBoundingClientRect();
+  assert_greater_than_equal(rt.y, base.y);
+}, 'float:left should not work as ruby-text');
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-001.xht b/testing/web-platform/tests/css/css-ruby/ruby-001.xht
new file mode 100644
index 0000000000..80f49f0dbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-001.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>Ruby: Ping Test</title>
+  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
+  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ruby/001.html"/>
+  <link rel="help" href="http://www.w3.org/TR/css3-ruby/"/>
+    <style type="text/css">
+   p { color: navy; }
+   .a ruby { display: ruby-base; display: inline; display: ruby-base; }
+   .a rbc { display: ruby-base-container; display: inline; display: ruby-base-container; }
+   .a rb { display: ruby-base; display: inline; display: ruby-base; }
+   .a rtc.before { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: before; }
+   .a rtc.after  { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: after; }
+   .a rt { display: ruby-text; display: inline; display: ruby-text; ruby-span: 3; }
+   .b ruby { display: inline; }
+   .b rbc { display: inline; }
+   .b rb { display: inline; }
+   .b rtc { display: inline; }
+   .b rt { display: inline; }
+  </style>
+ </head>
+ <body>
+  <p>There should be exactly four lines of text below.</p>
+  <p>
+   <ruby class="a">
+     <rbc>
+       <rb> 2. This is </rb>
+       <rb> the second </rb>
+       <rb> line. </rb>
+     </rbc>
+     <rtc class="before">
+       <rt> 1. This is </rt>
+       <rt> the first </rt>
+       <rt> line. </rt>
+     </rtc>
+     <rtc class="after">
+       <rt> 3. This is the third line. </rt>
+     </rtc>
+   </ruby>
+  </p>
+  <p>
+   <ruby class="b">
+     <rbc>
+       <rb> 4. This </rb>
+       <rb> is </rb>
+       <rb> the </rb>
+     </rbc>
+     <rtc class="before">
+       <rt> fourth </rt>
+       <rt> and </rt>
+       <rt> final </rt>
+     </rtc>
+     <rtc class="after">
+       <rt> line. </rt>
+     </rtc>
+   </ruby>
+  </p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html
new file mode 100644
index 0000000000..eb368b3ae6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  div { width: 160px; box-sizing: border-box; }
+</style>
+<body style="font: 16px/3 Ahem">
+<div>X X X</div>
+<div style="text-align: center">X X X</div>
+<div style="text-align-last: justify">X X X</div>
+<!-- 8px = (width: 160px - 5 * font-size: 16px) /
+            (1 + justification opportunities: 4) / 2 -->
+<div style="text-align-last: justify; padding: 0 8px">X X X</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001.html
new file mode 100644
index 0000000000..13c96f53f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<link rel="match" href="ruby-align-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby { line-height: 0; }
+  rt > div { width: 160px; }
+</style>
+<body style="font: 16px/3 Ahem">
+<ruby style="ruby-align: start">
+  <rb>X X X<rt><div></div></rt>
+</ruby><br>
+<ruby style="ruby-align: center">
+  <rb>X X X<rt><div></div></rt>
+</ruby><br>
+<ruby style="ruby-align: space-between">
+  <rb>X X X<rt><div></div></rt>
+</ruby><br>
+<ruby style="ruby-align: space-around">
+  <rb>X X X<rt><div></div></rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html b/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html
new file mode 100644
index 0000000000..6e652f1726
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-001a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<link rel="match" href="ruby-align-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby { line-height: 0; }
+  rt > div { width: 160px; }
+</style>
+<body style="font: 16px/3 Ahem">
+<ruby>
+  <rb style="ruby-align: start">X X X<rt><div></div></rt>
+</ruby><br>
+<ruby>
+  <rb style="ruby-align: center">X X X<rt><div></div></rt>
+</ruby><br>
+<ruby>
+  <rb style="ruby-align: space-between">X X X<rt><div></div></rt>
+</ruby><br>
+<ruby>
+  <rb style="ruby-align: space-around">X X X<rt><div></div></rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html
new file mode 100644
index 0000000000..e4dd3c8bbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby { line-height: 0; }
+  rt { font-size: 100%; }
+  rb { font-size: 0; }
+  rt > div { width: 160px; box-sizing: border-box; }
+</style>
+<body style="font: 16px/3 Ahem">
+<ruby>
+  <rb></rb><rt><div>X X X</div></rt>
+</ruby><br>
+<ruby>
+  <rb></rb><rt><div style="text-align: center">X X X</div></rt>
+</ruby><br>
+<ruby>
+  <rb></rb><rt><div style="text-align-last: justify">X X X</div></rt>
+</ruby><br>
+<!-- 8px = (width: 160px - 5 * font-size: 16px) /
+            (1 + justification opportunities: 4) / 2 -->
+<ruby>
+  <rb></rb><rt><div style="text-align-last: justify; padding: 0 8px">X X X</div></rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002.html
new file mode 100644
index 0000000000..ec40be5e10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<link rel="match" href="ruby-align-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby { line-height: 0; }
+  rt { font-size: 100%; }
+  rb { font-size: 0; }
+  rb > div { width: 160px; }
+</style>
+<body style="font: 16px/3 Ahem">
+<ruby style="ruby-align: start">
+  <rb><div></div><rt>X X X</rt>
+</ruby><br>
+<ruby style="ruby-align: center">
+  <rb><div></div><rt>X X X</rt>
+</ruby><br>
+<ruby style="ruby-align: space-between">
+  <rb><div></div><rt>X X X</rt>
+</ruby><br>
+<ruby style="ruby-align: space-around">
+  <rb><div></div><rt>X X X</rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html b/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html
new file mode 100644
index 0000000000..dfb7ae37ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-align-002a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-align</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+<link rel="match" href="ruby-align-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby { line-height: 0; }
+  rt { font-size: 100%; }
+  rb { font-size: 0; }
+  rb > div { width: 160px; }
+</style>
+<body style="font: 16px/3 Ahem">
+<ruby>
+  <rb><div></div><rt style="ruby-align: start">X X X</rt>
+</ruby><br>
+<ruby>
+  <rb><div></div><rt style="ruby-align: center">X X X</rt>
+</ruby><br>
+<ruby>
+  <rb><div></div><rt style="ruby-align: space-between">X X X</rt>
+</ruby><br>
+<ruby>
+  <rb><div></div><rt style="ruby-align: space-around">X X X</rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html b/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html
new file mode 100644
index 0000000000..453ba96ebd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-annotation-pairing-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Ruby Test: single ruby annotation pairing</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-ruby-1/#base-annotation-pairing">
+  <link rel="match" href="reference/ruby-annotation-pairing-001-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that a single ruby annotation must be paired with the corresponding first ruby base of its segment.">
+
+  <!--
+  Chromium 90.0.4430.212 and Chromium 93.0.4559.0 fail this test.
+  -->
+
+  <style>
+  div, p
+    {
+      font-family: Ahem;
+      font-size: 60px;
+      line-height: 1;
+    }
+
+  div#annotation
+    {
+      font-size: 30px;
+      text-indent: 15px;
+    }
+  </style>
+
+  <p><ruby><rb>W</rb> <rb>Z</rb> <rt>A</rt></ruby></p>
+
+  <div id="annotation" title="reference">A</div>
+
+  <div id="base" title="reference">W Z</div>
+
+  <p><ruby><rb>W</rb> <span>Z</span> <rt>A</rt></ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html
new file mode 100644
index 0000000000..43945ce1b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html
new file mode 100644
index 0000000000..61bc6706ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-001-ref.html">
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html
new file mode 100644
index 0000000000..afa0f3cd24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+</head>
+<body>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>ri</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>ri</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html
new file mode 100644
index 0000000000..3d5131cdd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-002-ref.html">
+  <script>
+    window.onload = function() {
+      // Force a reflow before changes.
+      document.body.clientWidth;
+      var elems = document.querySelectorAll('[data-content]');
+      for (var i = 0; i < elems.length; i++) {
+        elems[i].textContent = elems[i].dataset.content;
+      }
+    };
+  </script>
+</head>
+<body>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt data-content="ri">り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb data-content="ri">り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt data-content="り">ri</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb data-content="り">ri</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html
new file mode 100644
index 0000000000..468b17d4ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <style>
+    body { line-height: 5em; }
+  </style>
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html
new file mode 100644
index 0000000000..2279e7540e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-003-ref.html">
+  <style>
+    body { line-height: 5em; }
+  </style>
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt style="line-height: 100em;">り</rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html b/testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html
new file mode 100644
index 0000000000..4499cf3e16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-autohide-004.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-001-ref.html">
+</head>
+<body>
+  <ruby>
+    振<rt>ふ</rt>り<rt>り</rt>仮<rt>が</rt>名<rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html b/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html
new file mode 100644
index 0000000000..35baeda23e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-base-container-abs.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Ruby Test: ruby base container with abs. pos. child</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-base-container-ref.html">
+<style>
+a { position: absolute; }
+</style>
+<div style="font-size: 64px; line-height: 3">a<ruby><a>&nbsp;</a><rt>b</rt></ruby>c</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html b/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html
new file mode 100644
index 0000000000..18ef9bb4ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-base-container-float.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Ruby Test: ruby base container with floating child</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="empty-ruby-base-container-ref.html">
+<style>
+a { float: right; }
+</style>
+<div style="font-size: 64px; line-height: 3">a<ruby><a>&nbsp;</a><rt>b</rt></ruby>c</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html
new file mode 100644
index 0000000000..70f47eaa8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>CSS Ruby Reference</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 16px/1 Ahem;
+  padding: 32px 0;
+}
+p {
+  margin: 0;
+  border: 5px solid blue;
+}
+ruby {
+  ruby-align: center;
+  font-size: 32px;
+}
+rt {
+  font-size: 8px;
+}
+.b {
+  font-size: 16px;
+}
+</style>
+<p><ruby><rb>X<rb class="b">X<rt>x<rt>x</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html
new file mode 100644
index 0000000000..f71b5644c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-base-different-size.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>CSS Ruby Test: sizing and positioning of ruby containers when size of ruby bases and the base container differ</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="match" href="ruby-base-different-size-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 16px/1 Ahem;
+  padding: 32px 0;
+}
+p {
+  margin: 0;
+  border: 5px solid blue;
+}
+ruby {
+  ruby-align: center;
+}
+.a {
+  font-size: 32px;
+}
+</style>
+<p><ruby><rb class="a">X<rb>X<rt>x<rt>x</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html
new file mode 100644
index 0000000000..c714921d32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Position of ruby annotation in RTL text</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+  body { color: transparent; }
+  rb { background: green; }
+  rtc { background: red; }
+  rt { background: cyan; }
+</style>
+<body style="text-align: right">
+  <ruby><rb>base<rtc><rt>text</ruby>
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html
new file mode 100644
index 0000000000..ba18071150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Position of ruby annotation in RTL text</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi">
+<link rel="match" href="ruby-bidi-001-ref.html">
+<style>
+  body { color: transparent; }
+  rb { background: green; }
+  rtc { background: red; }
+  rt { background: cyan; }
+</style>
+<body dir="rtl">
+  <ruby><rb>base<rtc><rt>text</ruby>
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html
new file mode 100644
index 0000000000..874284de99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Bidi reordering of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style> rb { margin: 0 5px; } </style>
+<p>
+  <ruby>
+    <rb>base1</rb><rb>base2</rb>
+    <rt>text1</rt><rt>text2</rt>
+    <rb>base4</rb><rb>base3</rb>
+    <rt>text4</rt><rt>text3</rt>
+  </ruby>
+  <ruby>
+    <rb>base7</rb><rb>base8</rb>
+    <rt>text7</rt><rt>text8</rt>
+    <rb>base6</rb><rb>base5</rb>
+    <rt>text6</rt><rt>text5</rt>
+  </ruby>
+</p>
+<p style="text-align: right">
+  <ruby>
+    <rb>base5</rb><rb>base6</rb>
+    <rt>text5</rt><rt>text6</rt>
+    <rb>base8</rb><rb>base7</rb>
+    <rt>text8</rt><rt>text7</rt>
+  </ruby>
+  <ruby>
+    <rb>base3</rb><rb>base4</rb>
+    <rt>text3</rt><rt>text4</rt>
+    <rb>base2</rb><rb>base1</rb>
+    <rt>text2</rt><rt>text1</rt>
+  </ruby>
+</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html
new file mode 100644
index 0000000000..d6692a333a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Bidi reordering of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi">
+<link rel="match" href="ruby-bidi-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style> rb { margin: 0 5px; } </style>
+<p>
+  <ruby>
+    <rb>base1</rb><rb>base2</rb>
+    <rtc dir="rtl">
+      <rt>text1</rt><rt>text2</rt>
+    </rtc>
+    <rbc dir="rtl">
+      <rb>base3</rb><rb>base4</rb>
+    </rbc>
+    <rt>text3</rt><rt>text4</rt>
+  </ruby>
+  <ruby dir="rtl">
+    <rb>base5</rb><rb>base6</rb>
+    <rt>text5</rt><rt>text6</rt>
+    <rbc dir="ltr">
+      <rb>base7</rb><rb>base8</rb>
+    </rbc>
+    <rt>text7</rt><rt>text8</rt>
+  </ruby>
+</p>
+<p dir="rtl">
+  <ruby>
+    <rb>base1</rb><rb>base2</rb>
+    <rtc dir="ltr">
+      <rt>text1</rt><rt>text2</rt>
+    </rtc>
+    <rbc dir="ltr">
+      <rb>base3</rb><rb>base4</rb>
+    </rbc>
+    <rt>text3</rt><rt>text4</rt>
+  </ruby>
+  <ruby dir="ltr">
+    <rb>base5</rb><rb>base6</rb>
+    <rt>text5</rt><rt>text6</rt>
+    <rbc dir="rtl">
+      <rb>base7</rb><rb>base8</rb>
+    </rbc>
+    <rt>text7</rt><rt>text8</rt>
+  </ruby>
+</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html
new file mode 100644
index 0000000000..ec00293d86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Bidirectional text inside ruby content box</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<body dir="rtl" style="font-size: 64px">
+<ruby><div>אב12ג</div><rt><div>אabבג</div></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html
new file mode 100644
index 0000000000..2510408ec2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-003.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Bidirectional text inside ruby content box</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi">
+<link rel="match" href="ruby-bidi-003-ref.html">
+<body dir="rtl" style="font-size: 64px">
+<ruby>אב12ג<rt>אabבג</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html
new file mode 100644
index 0000000000..58ebff482c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Ruby reference</title>
+<style>
+div { font-size: 50px; }
+rb, rt, span { unicode-bidi: isolate; }
+</style>
+<p>All three examples should look the same:</p>
+
+<div>
+ <p>
+  <ruby dir=rtl>&#x6F1; &#x6F2; &#x6F3;<rt>1 2 3</rt></ruby>
+ </p>
+
+ <p>
+  <ruby dir=rtl>&#x6F1; &#x6F2; &#x6F3;<rt>1 2 3</rt></ruby>
+ </p>
+
+ <p>
+  <ruby dir=rtl>&#x6F1; &#x6F2; &#x6F3;<rt>1 2 3</rt></ruby>
+ </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html
new file mode 100644
index 0000000000..9cfe65059d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-bidi-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Ruby test: dir=rtl on rb and rt elements</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi">
+<link rel="match" href="ruby-bidi-004-ref.html">
+<style>
+div { font-size: 50px; }
+rb, rt, span { unicode-bidi: isolate; }
+</style>
+<p>All three examples should look the same:</p>
+
+<div>
+ <p>
+  <ruby dir=rtl>&#x6F1; &#x6F2; &#x6F3;<rt>1 2 3</rt></ruby>
+ </p>
+
+ <p>
+  <ruby><span dir=rtl>&#x6F1; &#x6F2; &#x6F3;</span><rt dir=rtl>1 2 3</rt></ruby>
+ </p>
+
+ <p>
+  <ruby><rb dir=rtl>&#x6F1; &#x6F2; &#x6F3;</rb><rt dir=rtl>1 2 3</rt></ruby>
+ </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html
new file mode 100644
index 0000000000..8d836fe23c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body class="large">
+
+  <p>|<ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc
+      ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>e</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>i</rb><rb><span> <span>j</span>
+      </span></rb></rbc><rtc pseudo><rt>k</rt></rtc><rbc><rb><span> <span>l</span>
+      </span></rb></rbc><rbc><rb>m</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc
+      ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc
+      ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>u</rb></rbc><rbc><rb><span> <span>v</span>
+      <span>w</span> </span></rb></rbc><rtc><rt>x</rt></rtc><rbc><rb><span>
+      <span>y</span> </span></rb><rb>z</rb></rbc></ruby>|</p>
+
+  <p>|<span> </span><ruby><rbc><rb>a</rb><rb><span> </span></rb><rb>b</rb></rbc
+      ><rtc pseudo><rt>c</rt><rt pseudo><span> </span></rt><rt>d</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>e</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>g</rb></rbc><rtc><rt>h</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>i</rb></rbc></ruby><span> <span>j</span>
+      </span><ruby><rbc></rbc><rtc pseudo><rt>k</rt></rtc></ruby><span> <span>l</span>
+      </span><ruby><rbc><rb>m</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>n</rb></rbc
+      ><rtc><rt>o</rt></rtc><rtc><rt>p</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>q</rb></rbc><rtc pseudo><rt>r</rt></rtc
+      ><rtc><rt>s</rt></rtc><rtc pseudo><rt>t</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>u</rb></rbc></ruby><span> <span>v</span>
+      <span>w</span> </span><ruby><rbc></rbc><rtc><rt>x</rt></rtc></ruby><span>
+      <span>y</span> </span><ruby><rbc><rb>z</rb></rbc></ruby><span> </span>|</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html
new file mode 100644
index 0000000000..ac58d4d43a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="stylesheet" href="support/ruby-common.css">
+<link rel="match" href="ruby-box-generation-001-ref.html">
+<body class="large">
+
+  <!--
+    The tests are written in this way:
+    there are five different elements may appear in a ruby container: rb, rt,
+    rbc, rtc, and inline content.
+
+    In each test file, there are two parts: all elements are wrapped inside a
+    <ruby> in one part, they are directly contained by a <p> in the other part.
+
+    In each part, all permutations of pairs of two adjacent elements are
+    presented, so there are 5*5+1=26 elements.
+
+    The five test files share the same structure, but with different element
+    type order.
+  -->
+
+  <p>|<ruby>
+      <rb>a</rb> <rb>b</rb>
+      <rt>c</rt> <rt>d</rt>
+      <rb>e</rb> <rbc><rb>f</rb></rbc>
+      <rb>g</rb> <rtc><rt>h</rt></rtc>
+      <rb>i</rb> <span>j</span>
+      <rt>k</rt> <span>l</span>
+      <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc>
+      <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc>
+      <rbc><rb>q</rb></rbc> <rt>r</rt>
+      <rtc><rt>s</rt></rtc> <rt>t</rt>
+      <rbc><rb>u</rb></rbc> <span>v</span>
+      <span>w</span> <rtc><rt>x</rt></rtc>
+      <span>y</span> <rb>z</rb>
+  </ruby>|</p>
+
+  <p>| <rb>a</rb> <rb>b</rb>
+       <rt>c</rt> <rt>d</rt>
+       <rb>e</rb> <rbc><rb>f</rb></rbc>
+       <rb>g</rb> <rtc><rt>h</rt></rtc>
+       <rb>i</rb> <span>j</span>
+       <rt>k</rt> <span>l</span>
+       <rbc><rb>m</rb></rbc> <rbc><rb>n</rb></rbc>
+       <rtc><rt>o</rt></rtc> <rtc><rt>p</rt></rtc>
+       <rbc><rb>q</rb></rbc> <rt>r</rt>
+       <rtc><rt>s</rt></rtc> <rt>t</rt>
+       <rbc><rb>u</rb></rbc> <span>v</span>
+       <span>w</span> <rtc><rt>x</rt></rtc>
+       <span>y</span> <rb>z</rb> |</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html
new file mode 100644
index 0000000000..730ab787d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body class="large">
+
+  <p>|<ruby><rbc></rbc
+      ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>c</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc
+      ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc
+      ><rtc pseudo><rt>g</rt></rtc><rbc><rb><span> h
+      </span></rb></rbc><rtc pseudo><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>j</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>k</rb></rbc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>l</rb></rbc
+      ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc><rbc><rb><span>
+      o p
+      </span></rb></rbc><rtc><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>r</rb></rbc><rbc><rb><span>
+      s </span></rb></rbc><rbc><rb>t</rb></rbc
+      ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span>
+      </span></rb><rb>w</rb><rb><span> x
+      </span></rb><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby>|</p>
+
+  <p>|<span> </span><ruby><rbc></rbc
+      ><rtc pseudo><rt>a</rt><rt pseudo><span> </span></rt><rt>b</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>c</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>d</rb></rbc
+      ><rtc pseudo><rt>e</rt></rtc><rtc><rt>f</rt></rtc
+      ><rtc pseudo><rt>g</rt></rtc></ruby><span> h
+      </span><ruby><rbc></rbc><rtc pseudo><rt>i</rt></rtc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>j</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>k</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>l</rb></rbc
+      ><rtc><rt>m</rt></rtc><rtc><rt>n</rt></rtc></ruby><span>
+      o p
+      </span><ruby><rbc></rbc><rtc><rt>q</rt></rtc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>r</rb></rbc></ruby><span>
+      s </span><ruby><rbc><rb>t</rb></rbc
+      ><rtc><rt>u</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb><rb><span>
+      </span></rb><rb>w</rb></rbc></ruby><span> x
+      </span><ruby><rbc><rb>y</rb></rbc><rtc pseudo><rt>z</rt></rtc></ruby><span> </span>|</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html
new file mode 100644
index 0000000000..e09ecf1eb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-002.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="stylesheet" href="support/ruby-common.css">
+<link rel="match" href="ruby-box-generation-002-ref.html">
+<body class="large">
+
+  <!--
+    The tests are written in this way:
+    there are five different elements may appear in a ruby container: rb, rt,
+    rbc, rtc, and inline content.
+
+    In each test file, there are two parts: all elements are wrapped inside a
+    <ruby> in one part, they are directly contained by a <p> in the other part.
+
+    In each part, all permutations of pairs of two adjacent elements are
+    presented, so there are 5*5+1=26 elements.
+
+    The five test files share the same structure, but with different element
+    type order.
+  -->
+
+  <p>|<ruby>
+      <rt>a</rt> <rt>b</rt>
+      <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc>
+      <rt>e</rt> <rtc><rt>f</rt></rtc>
+      <rt>g</rt> <span>h</span>
+      <rt>i</rt> <rb>j</rb>
+      <rbc><rb>k</rb></rbc> <rb>l</rb>
+      <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc>
+      <span>o</span> <span>p</span>
+      <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc>
+      <span>s</span> <rbc><rb>t</rb></rbc>
+      <rtc><rt>u</rt></rtc> <rb>v</rb>
+      <rb>w</rb> <span>x</span>
+      <rb>y</rb> <rt>z</rt>
+  </ruby>|</p>
+
+  <p>| <rt>a</rt> <rt>b</rt>
+       <rbc><rb>c</rb></rbc> <rbc><rb>d</rb></rbc>
+       <rt>e</rt> <rtc><rt>f</rt></rtc>
+       <rt>g</rt> <span>h</span>
+       <rt>i</rt> <rb>j</rb>
+       <rbc><rb>k</rb></rbc> <rb>l</rb>
+       <rtc><rt>m</rt></rtc> <rtc><rt>n</rt></rtc>
+       <span>o</span> <span>p</span>
+       <rtc><rt>q</rt></rtc> <rbc><rb>r</rb></rbc>
+       <span>s</span> <rbc><rb>t</rb></rbc>
+       <rtc><rt>u</rt></rtc> <rb>v</rb>
+       <rb>w</rb> <span>x</span>
+       <rb>y</rb> <rt>z</rt> |</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html
new file mode 100644
index 0000000000..e4c92a498b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body class="large">
+
+  <p>|<ruby><rbc><rb>a</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc
+      ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>e</rb></rbc><rbc><rb><span> <span>f</span>
+      </span></rb></rbc><rbc><rb>g</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc
+      ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc><rbc><rb><span>
+      <span>m</span> <span>n</span>
+      </span></rb><rb>o</rb><rb><span> </span></rb><rb>p</rb><rb><span>
+      <span>q</span> </span></rb></rbc><rtc><rt>r</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc><rbc><rb><span>
+      <span>u</span> </span></rb></rbc><rtc pseudo><rt>v</rt><rt pseudo><span>
+      </span></rt><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+      ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc
+      ></ruby>|</p>
+
+  <p>|<span> </span><ruby><rbc><rb>a</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>b</rb></rbc
+      ><rtc><rt>c</rt></rtc><rtc><rt>d</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>e</rb></rbc></ruby><span> <span>f</span>
+      </span><ruby><rbc><rb>g</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>i</rb></rbc><rtc pseudo><rt>j</rt></rtc
+      ><rtc><rt>k</rt></rtc><rtc pseudo><rt>l</rt></rtc></ruby><span>
+      <span>m</span> <span>n</span>
+      </span><ruby><rbc><rb>o</rb><rb><span> </span></rb><rb>p</rb></rbc></ruby><span>
+      <span>q</span> </span><ruby><rbc></rbc><rtc><rt>r</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>s</rb></rbc><rtc><rt>t</rt></rtc></ruby><span>
+      <span>u</span> </span><ruby><rbc></rbc><rtc pseudo><rt>v</rt><rt pseudo><span>
+      </span><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+      ><rtc pseudo><rt>y</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>z</rb></rbc></ruby
+      ><span> </span>|</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html
new file mode 100644
index 0000000000..6b975afdfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="stylesheet" href="support/ruby-common.css">
+<link rel="match" href="ruby-box-generation-003-ref.html">
+<body class="large">
+
+  <!--
+    The tests are written in this way:
+    there are five different elements may appear in a ruby container: rb, rt,
+    rbc, rtc, and inline content.
+
+    In each test file, there are two parts: all elements are wrapped inside a
+    <ruby> in one part, they are directly contained by a <p> in the other part.
+
+    In each part, all permutations of pairs of two adjacent elements are
+    presented, so there are 5*5+1=26 elements.
+
+    The five test files share the same structure, but with different element
+    type order.
+  -->
+
+  <p>|<ruby>
+      <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc>
+      <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc>
+      <rbc><rb>e</rb></rbc> <span>f</span>
+      <rbc><rb>g</rb></rbc> <rb>h</rb>
+      <rbc><rb>i</rb></rbc> <rt>j</rt>
+      <rtc><rt>k</rt></rtc> <rt>l</rt>
+      <span>m</span> <span>n</span>
+      <rb>o</rb> <rb>p</rb>
+      <span>q</span> <rtc><rt>r</rt></rtc>
+      <rb>s</rb> <rtc><rt>t</rt></rtc>
+      <span>u</span> <rt>v</rt>
+      <rt>w</rt> <rb>x</rb>
+      <rt>y</rt> <rbc><rb>z</rb></rbc>
+  </ruby>|</p>
+
+  <p>| <rbc><rb>a</rb></rbc> <rbc><rb>b</rb></rbc>
+       <rtc><rt>c</rt></rtc> <rtc><rt>d</rt></rtc>
+       <rbc><rb>e</rb></rbc> <span>f</span>
+       <rbc><rb>g</rb></rbc> <rb>h</rb>
+       <rbc><rb>i</rb></rbc> <rt>j</rt>
+       <rtc><rt>k</rt></rtc> <rt>l</rt>
+       <span>m</span> <span>n</span>
+       <rb>o</rb> <rb>p</rb>
+       <span>q</span> <rtc><rt>r</rt></rtc>
+       <rb>s</rb> <rtc><rt>t</rt></rtc>
+       <span>u</span> <rt>v</rt>
+       <rt>w</rt> <rb>x</rb>
+       <rt>y</rt> <rbc><rb>z</rb></rbc> |</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html
new file mode 100644
index 0000000000..7a27622cac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body class="large">
+
+  <p>|<ruby><rbc></rbc
+      ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc><rbc><rb><span>
+      <span>c</span> <span>d</span>
+      </span></rb></rbc><rtc><rt>e</rt></rtc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc
+      ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc
+      ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>j</rb></rbc><rbc><rb><span>
+      <span>k</span> </span></rb></rbc><rbc><rb>l</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc
+      ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>q</rb><rb><span> <span>r</span>
+      </span></rb></rbc><rtc pseudo><rt>s</rt></rtc><rbc><rb><span> <span>t</span>
+      </span></rb></rbc><rbc><rb>u</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>v</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc
+      ></ruby>|</p>
+
+  <p>|<span> </span><ruby><rbc></rbc
+      ><rtc><rt>a</rt></rtc><rtc><rt>b</rt></rtc></ruby><span>
+      <span>c</span> <span>d</span>
+      </span><ruby><rbc></rbc><rtc><rt>e</rt></rtc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>f</rb></rbc
+      ><rtc><rt>g</rt></rtc><rtc pseudo><rt>h</rt></rtc
+      ><rtc><rt>i</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>j</rb></rbc></ruby><span>
+      <span>k</span> </span><ruby><rbc><rb>l</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>m</rb><rb><span> </span></rb><rb>n</rb></rbc
+      ><rtc pseudo><rt>o</rt><rt pseudo><span> </span></rt><rt>p</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>q</rb></rbc></ruby><span> <span>r</span>
+      </span><ruby><rbc></rbc><rtc pseudo><rt>s</rt></rtc></ruby><span> <span>t</span>
+      </span><ruby><rbc><rb>u</rb></rbc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>v</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>w</rb></rbc><rtc pseudo><rt>x</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>y</rb></rbc><rtc><rt>z</rt></rtc></ruby
+      ><span> </span>|</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html
new file mode 100644
index 0000000000..0f6ed72d71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-004.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="stylesheet" href="support/ruby-common.css">
+<link rel="match" href="ruby-box-generation-004-ref.html">
+<body class="large">
+
+  <!--
+    The tests are written in this way:
+    there are five different elements may appear in a ruby container: rb, rt,
+    rbc, rtc, and inline content.
+
+    In each test file, there are two parts: all elements are wrapped inside a
+    <ruby> in one part, they are directly contained by a <p> in the other part.
+
+    In each part, all permutations of pairs of two adjacent elements are
+    presented, so there are 5*5+1=26 elements.
+
+    The five test files share the same structure, but with different element
+    type order.
+  -->
+
+  <p>|<ruby>
+      <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc>
+      <span>c</span> <span>d</span>
+      <rtc><rt>e</rt></rtc> <rb>f</rb>
+      <rtc><rt>g</rt></rtc> <rt>h</rt>
+      <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc>
+      <span>k</span> <rbc><rb>l</rb></rbc>
+      <rb>m</rb> <rb>n</rb>
+      <rt>o</rt> <rt>p</rt>
+      <rb>q</rb> <span>r</span>
+      <rt>s</rt> <span>t</span>
+      <rb>u</rb> <rbc><rb>v</rb></rbc>
+      <rbc><rb>w</rb></rbc> <rt>x</rt>
+      <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc>
+  </ruby>|</p>
+
+  <p>| <rtc><rt>a</rt></rtc> <rtc><rt>b</rt></rtc>
+       <span>c</span> <span>d</span>
+       <rtc><rt>e</rt></rtc> <rb>f</rb>
+       <rtc><rt>g</rt></rtc> <rt>h</rt>
+       <rtc><rt>i</rt></rtc> <rbc><rb>j</rb></rbc>
+       <span>k</span> <rbc><rb>l</rb></rbc>
+       <rb>m</rb> <rb>n</rb>
+       <rt>o</rt> <rt>p</rt>
+       <rb>q</rb> <span>r</span>
+       <rt>s</rt> <span>t</span>
+       <rb>u</rb> <rbc><rb>v</rb></rbc>
+       <rbc><rb>w</rb></rbc> <rt>x</rt>
+       <rbc><rb>y</rb></rbc> <rtc><rt>z</rt></rtc> |</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html
new file mode 100644
index 0000000000..55ba7b2c73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body class="large">
+
+  <p>|<ruby><rbc><rb><span><span>a</span> <span>b</span>
+      </span></rb><rb>c</rb><rb><span> </span></rb><rb>d</rb><rb><span>
+      <span>e</span> </span></rb></rbc><rtc pseudo><rt>f</rt></rtc><rbc><rb><span>
+      <span>g</span> </span></rb></rbc><rbc><rb>h</rb></rbc><rbc><rb><span>
+      <span>i</span> </span></rb></rbc><rtc><rt>j</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc
+      ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>o</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc
+      ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>r</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>t</rb></rbc
+      ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc
+      ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+      ><rtc><rt>y</rt></rtc><rbc><rb><span> <span>z</span></span></rb></rbc
+      ></ruby>|</p>
+
+  <p>|<span> <span>a</span> <span>b</span>
+      </span><ruby
+      ><rbc><rb>c</rb><rb><span> </span></rb><rb>d</rb></rbc></ruby><span>
+      <span>e</span> </span><ruby><rbc></rbc><rtc pseudo><rt>f</rt></rtc></ruby><span>
+      <span>g</span> </span><ruby><rbc><rb>h</rb></rbc></ruby><span>
+      <span>i</span> </span><ruby><rbc></rbc><rtc><rt>j</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>k</rb></rbc><rtc><rt>l</rt></rtc
+      ><rtc pseudo><rt>m</rt><rt pseudo><span> </span></rt><rt>n</rt></rtc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>o</rb></rbc
+      ><rbc><rb><span> </span></rb></rbc><rbc><rb>p</rb></rbc
+      ><rtc pseudo><rt>q</rt></rtc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>r</rb></rbc><rbc><rb><span>
+      </span></rb></rbc><rbc><rb>s</rb></rbc><rbc><rb><span> </span></rb></rbc
+      ><rbc><rb>t</rb></rbc
+      ><rtc pseudo><rt>u</rt></rtc><rtc><rt>v</rt></rtc
+      ><rtc><rt>w</rt></rtc><rbc><rb><span> </span></rb></rbc><rbc><rb>x</rb></rbc
+      ><rtc><rt>y</rt></rtc></ruby><span> <span>z</span> </span>|</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html
new file mode 100644
index 0000000000..c86b697bf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-generation-005.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for pseudo ruby box generation</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="stylesheet" href="support/ruby-common.css">
+<link rel="match" href="ruby-box-generation-005-ref.html">
+<body class="large">
+
+  <p>|<ruby>
+      <span>a</span> <span>b</span>
+      <rb>c</rb> <rb>d</rb>
+      <span>e</span> <rt>f</rt>
+      <span>g</span> <rbc><rb>h</rb></rbc>
+      <span>i</span> <rtc><rt>j</rt></rtc>
+      <rb>k</rb> <rtc><rt>l</rt></rtc>
+      <rt>m</rt> <rt>n</rt>
+      <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc>
+      <rt>q</rt> <rb>r</rb>
+      <rbc><rb>s</rb></rbc> <rb>t</rb>
+      <rt>u</rt> <rtc><rt>v</rt></rtc>
+      <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc>
+      <rtc><rt>y</rt></rtc> <span>z</span>
+  </ruby>|</p>
+
+  <p>| <span>a</span> <span>b</span>
+       <rb>c</rb> <rb>d</rb>
+       <span>e</span> <rt>f</rt>
+       <span>g</span> <rbc><rb>h</rb></rbc>
+       <span>i</span> <rtc><rt>j</rt></rtc>
+       <rb>k</rb> <rtc><rt>l</rt></rtc>
+       <rt>m</rt> <rt>n</rt>
+       <rbc><rb>o</rb></rbc> <rbc><rb>p</rb></rbc>
+       <rt>q</rt> <rb>r</rb>
+       <rbc><rb>s</rb></rbc> <rb>t</rb>
+       <rt>u</rt> <rtc><rt>v</rt></rtc>
+       <rtc><rt>w</rt></rtc> <rbc><rb>x</rb></rbc>
+       <rtc><rt>y</rt></rtc> <span>z</span> |</p>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html
new file mode 100644
index 0000000000..8ddca2fc5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001-ref.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test reference</title>
+
+<style>
+.r { display: ruby; }
+.rbc { display: ruby-base-container; }
+.rb { display: ruby-base; }
+.rtc { display: ruby-text-container; }
+.rt { display: ruby-text; }
+
+.r { font: 50px/1 monospace; }
+
+.rb { background: pink; }
+.rt { background: orange; }
+</style>
+
+<p>Test passes if, in each of the base/annotations pairs below, there is no gap between the pink box of the base and the orange box of the annotation.</p>
+
+<span class=r>
+    <span class="rbc pv">
+        <span class=rb>b1</span>
+    </span>
+    <span class="rtc pv">
+        <span class=rt>a1</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc ph">
+        <span class=rb>b2</span>
+    </span>
+    <span class="rtc ph">
+        <span class=rt>a2</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc bv">
+        <span class=rb>b3</span>
+    </span>
+    <span class="rtc bv">
+        <span class=rt>a3</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc bh">
+        <span class=rb>b4</span>
+    </span>
+    <span class="rtc bh">
+        <span class=rt>a4</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc mv">
+        <span class=rb>b5</span>
+    </span>
+    <span class="rtc mv">
+        <span class=rt>a5</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc mh">
+        <span class=rb>b6</span>
+    </span>
+    <span class="rtc mh">
+        <span class=rt>a6</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc ph pv mh mv bh bv">
+        <span class=rb>b7</span>
+    </span>
+    <span class="rtc ph pv mh mv bh bv">
+        <span class=rt>a7</span>
+    </span>
+</span>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html
new file mode 100644
index 0000000000..1fa2befaf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-box-model-001.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Ruby test: no m/b/p/ effect on base/annotation containers</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-style">
+<link rel="match" href="ruby-box-model-001-ref.html">
+<meta name=assert content="the content box of base (resp annotation) container boxes should be tightly rapping around their content, and stacked up without gap. Margins/Borders/Padding on the base (resp annotation) container boxes do not apply.">
+
+<style>
+.r { display: ruby; }
+.rbc { display: ruby-base-container; }
+.rb { display: ruby-base; }
+.rtc { display: ruby-text-container; }
+.rt { display: ruby-text; }
+
+.pv { padding-top: 100px; padding-bottom: 100px; }
+.ph { padding-left: 100px; padding-right: 100px; }
+.bv, .bh { border-style: solid; border-color: transparent; }
+.bv  { border-top-width: 100px; border-bottom-width: 100px; }
+.bh { border-left-width: 100px; border-right-width: 100px; }
+.mv { margin-top: 100px; margin-bottom: 100px; }
+.mh { margin-left: 100px; margin-right: 100px; }
+
+.r { font: 50px/1 monospace; }
+
+.rb { background: pink; }
+.rt { background: orange; }
+</style>
+
+<p>Test passes if, in each of the base/annotations pairs below, there is no gap between the pink box of the base and the orange box of the annotation.</p>
+
+<span class=r>
+    <span class="rbc pv">
+        <span class=rb>b1</span>
+    </span>
+    <span class="rtc pv">
+        <span class=rt>a1</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc ph">
+        <span class=rb>b2</span>
+    </span>
+    <span class="rtc ph">
+        <span class=rt>a2</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc bv">
+        <span class=rb>b3</span>
+    </span>
+    <span class="rtc bv">
+        <span class=rt>a3</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc bh">
+        <span class=rb>b4</span>
+    </span>
+    <span class="rtc bh">
+        <span class=rt>a4</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc mv">
+        <span class=rb>b5</span>
+    </span>
+    <span class="rtc mv">
+        <span class=rt>a5</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc mh">
+        <span class=rb>b6</span>
+    </span>
+    <span class="rtc mh">
+        <span class=rt>a6</span>
+    </span>
+</span>
+
+<span class=r>
+    <span class="rbc ph pv mh mv bh bv">
+        <span class=rb>b7</span>
+    </span>
+    <span class="rtc ph pv mh mv bh bv">
+        <span class=rt>a7</span>
+    </span>
+</span>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html
new file mode 100644
index 0000000000..0a09924c65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+
+<p>One space should exist between 'a' and 'b':</p>
+
+<p>a<rbc><rb></rb> <rb></rb></rbc>b</p>
+<p>a<ruby><rb></rb> <rb></rb></ruby>b</p>
+<p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p>
+<p>a<rtc><rt></rt> <rt></rt></rtc>b</p>
+<p>a<ruby><rt></rt> <rt></rt></ruby>b</p>
+
+<p>a<rbc><rb></rb> <rb></rb></rbc>b</p>
+<p>a<ruby><rb></rb> <rb></rb></ruby>b</p>
+<p>a<ruby><rbc></rbc> <rbc></rbc></ruby>b</p>
+<p>a<rtc><rt></rt> <rt></rt></rtc>b</p>
+<p>a<ruby><rt></rt> <rt></rt></ruby>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html
new file mode 100644
index 0000000000..be1c5ce500
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-insertion-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-insertion.js"></script>
+<p>One space should exist between 'a' and 'b':</p>
+
+<!-- leading white space -->
+<!--     => inter-base white space -->
+<p>a<rbc data-insert="start" data-tag="rb"> <rb></rb></rbc>b</p>
+<p>a<ruby data-insert="start" data-tag="rb"> <rb></rb></ruby>b</p>
+<!--     => inter-segment white space -->
+<p>a<ruby data-insert="start" data-tag="rbc"> <rbc></rbc></ruby>b</p>
+<!--     => inter-annotation white space -->
+<p>a<rtc data-insert="start" data-tag="rt"> <rt></rt></rtc>b</p>
+<p>a<ruby data-insert="start" data-tag="rt"> <rt></rt></ruby>b</p>
+
+<!-- trailing white space -->
+<!--     => inter-base white space -->
+<p>a<rbc data-insert="end" data-tag="rb"><rb></rb> </rbc>b</p>
+<p>a<ruby data-insert="end" data-tag="rb"><rb></rb> </ruby>b</p>
+<!--     => inter-segment white space -->
+<p>a<ruby data-insert="end" data-tag="rbc"><rbc></rbc> </ruby>b</p>
+<!--     => inter-annotation white space -->
+<p>a<rtc data-insert="end" data-tag="rt"><rt></rt> </rtc>b</p>
+<p>a<ruby data-insert="end" data-tag="rt"><rt></rt> </ruby>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html
new file mode 100644
index 0000000000..cd85db944e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+
+<p>One space should exist between 'a' and 'b':</p>
+
+<p>a<rb></rb><span></span> <rt></rt>b</p>
+<p>a<rb></rb> <span></span><rt></rt>b</p>
+<p>a<rb></rb> <rb></rb><rt></rt>b</p>
+<p>a<rt></rt><rb></rb> <rb></rb>b</p>
+<p>a<rbc></rbc> <rbc></rbc><rt></rt>b</p>
+<p>a<rb></rb><rt></rt> <rt></rt>b</p>
+<p>a<rt></rt> <rt></rt><rb></rb>b</p>
+
+<p>a<rb></rb> <rb></rb>b</p>
+<p>a<rbc></rbc> <rbc></rbc>b</p>
+<p>a<rt></rt> <rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html
new file mode 100644
index 0000000000..c2a12a0419
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-insertion-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-insertion.js"></script>
+<p>One space should exist between 'a' and 'b':</p>
+
+<!-- inter-level white space -->
+<!--     => normal white space -->
+<p>a<rb data-insert="after" data-tag="span"></rb> <rt></rt>b</p>
+<p>a<rb></rb> <rt data-insert="before" data-tag="span"></rt>b</p>
+<!--     => inter-base white space -->
+<p>a<rb></rb> <rt data-insert="before" data-tag="rb"></rt>b</p>
+<p>a<rt data-insert="after" data-tag="rb"></rt> <rb></rb>b</p>
+<!--     => inter-segment white space -->
+<p>a<rbc></rbc> <rt data-insert="before" data-tag="rbc"></rt>b</p>
+<!--     => inter-annotation white space -->
+<p>a<rb data-insert="after" data-tag="rt"></rb> <rt></rt>b</p>
+<p>a<rt></rt> <rb data-insert="before" data-tag="rt"></rb>b</p>
+
+<!-- insert white space -->
+<!--     inter-base white space -->
+<p>a<rb data-insert="after" data-text=" "></rb><rb></rb>b</p>
+<!--     inter-segment white space -->
+<p>a<rbc data-insert="after" data-text=" "></rbc><rbc></rbc>b</p>
+<!--     inter-annotation white space -->
+<p>a<rt data-insert="after" data-text=" "></rt><rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html
new file mode 100644
index 0000000000..ef71525479
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>No space should exist between 'a' and 'b':</p>
+
+<p><span>a</span><rb></rb> <rt></rt>b</p>
+<p>a<rb></rb> <rt></rt><span>b</span></p>
+<p>a<rb></rb> <rt></rt><rb></rb>b</p>
+<p>a<rbc></rbc> <rt></rt><rb></rb>b</p>
+<p>a<rt></rt><rb></rb> <rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html
new file mode 100644
index 0000000000..68984b5568
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-insertion-003-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-insertion.js"></script>
+<p>No space should exist between 'a' and 'b':</p>
+
+<!-- inter-level white space -->
+<!--     <= normal white space -->
+<p><span data-insert="after" data-tag="rb">a</span> <rt></rt>b</p>
+<p>a<rb></rb> <span data-insert="before" data-tag="rt">b</span></p>
+<!--     <= inter-base white space -->
+<p>a<rb></rb> <rb data-insert="before" data-tag="rt"></rb>b</p>
+<!--     <= inter-segment white space -->
+<p>a<rbc></rbc> <rb data-insert="before" data-tag="rt"></rb>b</p>
+<!--     <= inter-annotation white space -->
+<p>a<rt data-insert="after" data-tag="rb"></rt> <rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html
new file mode 100644
index 0000000000..9c8120ee3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>No space should exist between 'a' and 'b':</p>
+
+<p>a<ruby> <rb></rb></ruby>b</p>
+<p>a<rbc> <rb></rb></rbc>b</p>
+<p>a<rtc> <rt></rt></rtc>b</p>
+<p>a<ruby><rb></rb> </ruby>b</p>
+<p>a<rbc><rb></rb> </rbc>b</p>
+<p>a<rtc><rt></rt> </rtc>b</p>
+<p>a<rb></rb> <rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html
new file mode 100644
index 0000000000..9b3c36e3ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-004.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-insertion-004-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-insertion.js"></script>
+<p>No space should exist between 'a' and 'b':</p>
+
+<!-- insert white space -->
+<!--     leading white space -->
+<p>a<ruby data-insert="start" data-text=" "><rb></rb></ruby>b</p>
+<p>a<rbc data-insert="start" data-text=" "><rb></rb></rbc>b</p>
+<p>a<rtc data-insert="start" data-text=" "><rt></rt></rtc>b</p>
+<!--     trailing white space -->
+<p>a<ruby data-insert="end" data-text=" "><rb></rb></ruby>b</p>
+<p>a<rbc data-insert="end" data-text=" "><rb></rb></rbc>b</p>
+<p>a<rtc data-insert="end" data-text=" "><rt></rt></rtc>b</p>
+<!--     inter-level white space -->
+<p>a<rb data-insert="after" data-text=" "></rb><rt></rt>b</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
new file mode 100644
index 0000000000..03e5cabe55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+<p><rb></rb><span></span><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<p><rb></rb><rt></rt><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<p><rb>a</rb><rt>x</rt><rb>b</rb><rt>y</rt></p>
+<p><rbc><span>a</span><rb></rb>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
+<p><rb>a</rb><rb></rb><rb>b</rb><rtc><span>x</span><rt></rt>y</rtc></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
new file mode 100644
index 0000000000..a684d665c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic insertion of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-insertion-005-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-insertion.js"></script>
+<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+<!-- split -->
+<!--     pseudo ruby -->
+<p><rb data-insert="after" data-tag="span"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<!--     pseudo ruby base container -->
+<p><rb data-insert="after" data-tag="rt"></rb><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<!--     pseudo ruby text container -->
+<p><rb>a</rb><rt data-insert="after" data-tag="rb" data-text="b">x</rt><rt>y</rt></p>
+<!--     pseudo ruby base -->
+<p><rbc><span data-insert="after" data-tag="rb">a</span>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
+<!--     pseudo ruby text -->
+<p><rb>a</rb><rb></rb><rb>b</rb><rtc><span data-insert="after" data-tag="rt">x</span>y</rtc></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html
new file mode 100644
index 0000000000..23beda2898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>No space should exist between 'a' and 'b':</p>
+
+<p>a<ruby> <rb></rb></ruby>b</p>
+<p>a<ruby><rb></rb> </ruby>b</p>
+<p>a<ruby><rb></rb> <rt></rt></ruby>b</p>
+
+<p>a<ruby> <rbc></rbc></ruby>b</p>
+<p>a<ruby><rbc></rbc> </ruby>b</p>
+<p>a<rbc></rbc> <rtc></rtc>b</p>
+
+<p><rb>a</rb><rb>b</rb><rtc> <rt>x</rt></rtc></p>
+<p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> </rtc></p>
+<p><rb>a</rb><rb>b</rb> <rt>x</rt></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html
new file mode 100644
index 0000000000..090ea43c79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-removal-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-removal.js"></script>
+<p>No space should exist between 'a' and 'b':</p>
+
+<!-- inter-base white space -->
+<!--     => leading white space -->
+<p>a<ruby><rb class="remove"></rb> <rb></rb></ruby>b</p>
+<!--     => trailing white space -->
+<p>a<ruby><rb></rb> <rb class="remove"></rb></ruby>b</p>
+<!--     => inter-level white space -->
+<p>a<ruby><rb></rb> <rb class="remove"></rb><rt></rt></ruby>b</p>
+
+<!-- inter-segment white space -->
+<!--     => leading white space -->
+<p>a<ruby><rbc class="remove"></rbc> <rbc></rbc></ruby>b</p>
+<!--     => trailing white space -->
+<p>a<ruby><rbc></rbc> <rbc class="remove"></rbc></ruby>b</p>
+<!--     => inter-level white space -->
+<p>a<rbc></rbc> <rbc class="remove"></rbc><rtc></rtc>b</p>
+
+<!-- inter-annotation white space -->
+<!--     => leading white space -->
+<p><rb>a</rb><rb>b</rb><rtc><rt class="remove"></rt> <rt>x</rt></rtc></p>
+<!--     => trailing white space -->
+<p><rb>a</rb><rb>b</rb><rtc><rt>x</rt> <rt class="remove"></rt></rtc></p>
+<!--     => inter-level white space -->
+<p><rb>a</rb><rb>b</rb><rt class="remove"></rt> <rt>x</rt></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html
new file mode 100644
index 0000000000..f9d2fd7240
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>One space should exist between 'a' and 'b':</p>
+
+<p>a <rt></rt>b</p>
+<p>a<rb></rb> b</p>
+<p>a<rb></rb> <rb></rb>b</p>
+<p>a<rbc></rbc> <rbc></rbc>b</p>
+<p><rb>a</rb> <rb>b</rb><rt>x</rt> <rt>y</rt></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html
new file mode 100644
index 0000000000..76846e547b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-removal-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-removal.js"></script>
+<p>One space should exist between 'a' and 'b':</p>
+
+<!-- inter-level white space -->
+<!--     => normal white space -->
+<p>a<rb class="remove"></rb> <rt></rt>b</p>
+<p>a<rb></rb> <rt class="remove"></rt>b</p>
+<!--     => inter-base white space -->
+<p>a<rb></rb> <rt class="remove"></rt><rb></rb>b</p>
+<!--     => inter-segment white space -->
+<p>a<rbc></rbc> <rtc class="remove"></rtc><rbc></rbc>b</p>
+<!--     => inter-annotation white space -->
+<p><rb>a</rb> <rb>b</rb><rt>x</rt><rb class="remove"></rb> <rt>y</rt></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
new file mode 100644
index 0000000000..0067c014f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rt>y</rt></p>
+
+<p>'ab' should be paried with 'xy':</p>
+
+<p><rbc>ab</rbc><rt>xy</rt></p>
+<p><rb>ab</rb><rtc style="letter-spacing: 1px">xy</rtc></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
new file mode 100644
index 0000000000..d35b2b968d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for dynamic removal of ruby frames</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-dynamic-removal-003-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<script src="support/ruby-dynamic-removal.js"></script>
+<p>'a' and 'b' should be paired with 'x' and 'y' respectively:</p>
+
+<!-- merge -->
+<!--     pseudo ruby -->
+<p><rb>a</rb><span class="remove"></span><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<!--     pseudo ruby base container -->
+<p><rb>a</rb><rt class="remove"></rt><rb>b</rb><rt>x</rt><rt>y</rt></p>
+<!--     pseudo ruby text container -->
+<p><rb>a</rb><rb>b</rb><rt>x</rt><rb class="remove"></rb><rt>y</rt></p>
+
+<!-- white space removal -->
+<!--     inter-base white space -->
+<p><rb class="remove-after">a</rb> <rb>b</rb><rt>x</rt><rt>y</rt></p>
+<!--     inter-annotation white space -->
+<p><rb>a</rb><rb>b</rb><rt class="remove-after">x</rt> <rt>y</rt></p>
+
+<p>'ab' should be paried with 'xy':</p>
+
+<!-- merge -->
+<!--     pseudo ruby base -->
+<p><rbc>a<rb class="remove"></rb>b</rbc><rt>xy</rt></p>
+<!--     pseudo ruby text -->
+<!-- letter-spacing is added here to avoid fuzzy on Windows. See bug 1111891 -->
+<p><rb>ab</rb><rtc style="letter-spacing: 1px">x<rt class="remove"></rt>y</rtc></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html
new file mode 100644
index 0000000000..245a366172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for float handling in ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby div {
+    width: 10px; height: 10px;
+    background-color: grey;
+    margin: 2px;
+  }
+  .left { float: left; }
+  .right { float: right; }
+</style>
+<div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+<div><ruby><rb><div class="left"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+<div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
+<div><ruby><rb><div class="right"></div>HELLO WORLD</rb><rt>hello world</rt></ruby></div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html
new file mode 100644
index 0000000000..5cb56e88ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-float-handling-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for float handling in ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#formatting-context">
+<link rel="match" href="ruby-float-handling-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  ruby div {
+    width: 10px; height: 10px;
+    background-color: grey;
+    margin: 2px;
+  }
+  .left { float: left; }
+  .right { float: right; }
+</style>
+<div><ruby><rb>HELLO WORLD</rb><rt><div class="left"></div>hello world</rt></ruby></div>
+<div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="left"></div> world</rt></ruby></div>
+<div><ruby><rb>HELLO WORLD</rb><rt><div class="right"></div>hello world</rt></ruby></div>
+<div><ruby><rb>HELLO WORLD</rb><rt>hello<div class="right"></div> world</rt></ruby></div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html
new file mode 100644
index 0000000000..770f264682
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    .inline {
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="inline">b</div>c</ruby></div>
+  <div><rb>a<div class="inline">b</div>c</rb></div>
+  <div><rt>a<div class="inline">b</div>c</rt></div>
+  <div><rbc>a<div class="inline">b</div>c</rbc></div>
+  <div><rtc>a<div class="inline">b</div>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html
new file mode 100644
index 0000000000..93569e549b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-001-ref.html">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    .inline {
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="inline">b</div>c</ruby></div>
+  <div><rb>a<div class="inline">b</div>c</rb></div>
+  <div><rt>a<div class="inline">b</div>c</rt></div>
+  <div><rbc>a<div class="inline">b</div>c</rbc></div>
+  <div><rtc>a<div class="inline">b</div>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html
new file mode 100644
index 0000000000..41533ee76b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <style>
+    body {
+      /* Use a sans-serif font to avoid fuzzy pixels where e.g. the
+         letter "a" bottom-right serif might overlap the table border: */
+      font: 16px sans-serif;
+    }
+    .block, table, .flex {
+      background-color: yellow;
+      width: 100px; height: 30px;
+      border: 1px solid blue;
+    }
+    .block { display: inline-block; }
+    table { display: inline-table; border-collapse: collapse; }
+    td { border: 3px solid red; }
+    .flex { display: inline-flex; }
+    .flex-item { flex: auto; }
+  </style>
+</head>
+<body>
+  <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div>
+  <div>
+    <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb>
+    <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt>
+  </div>
+  <div>
+    <rb>a<div class="flex">
+      <div class="flex-item">b1</div>
+      <div class="flex-item">b2</div>
+    </div>c</rb>
+    <rt>x<div class="flex">
+      <div class="flex-item">y1</div>
+      <div class="flex-item">y2</div>
+    </div>z</rt>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html
new file mode 100644
index 0000000000..4616d50146
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-002-ref.html">
+  <style>
+    body {
+      /* Use a sans-serif font to avoid fuzzy pixels where e.g. the
+         letter "a" bottom-right serif might overlap the table border: */
+      font: 16px sans-serif;
+    }
+    .block, table, .flex {
+      background-color: yellow;
+      width: 100px; height: 30px;
+      border: 1px solid blue;
+    }
+    .block { display: block; }
+    table { border-collapse: collapse; }
+    td { border: 3px solid red; }
+    .flex { display: flex; }
+    .flex-item { flex: auto; }
+  </style>
+</head>
+<body>
+  <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div>
+  <div>
+    <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb>
+    <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt>
+  </div>
+  <div>
+    <rb>a<div class="flex">
+      <div class="flex-item">b1</div>
+      <div class="flex-item">b2</div>
+    </div>c</rb>
+    <rt>x<div class="flex">
+      <div class="flex-item">y1</div>
+      <div class="flex-item">y2</div>
+    </div>z</rt>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html
new file mode 100644
index 0000000000..c8041eb5c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    div { border-collapse: collapse; }
+    .table { display: inline-table; }
+    .cell {
+      display: table-cell;
+      background-color: yellow;
+      border: 3px solid blue;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</ruby></div>
+  <div><rb>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rb></div>
+  <div><rt>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rt></div>
+  <div><rbc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rbc></div>
+  <div><rtc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html
new file mode 100644
index 0000000000..4d1a85f9d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-003-ref.html">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    body { border-collapse: collapse; }
+    .cell {
+      display: table-cell;
+      background-color: yellow;
+      border: 3px solid blue;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="cell">b1</div><div class="cell">b2</div>c</ruby></div>
+  <div><rb>a<div class="cell">b1</div><div class="cell">b2</div>c</rb></div>
+  <div><rt>a<div class="cell">b1</div><div class="cell">b2</div>c</rt></div>
+  <div><rbc>a<div class="cell">b1</div><div class="cell">b2</div>c</rbc></div>
+  <div><rtc>a<div class="cell">b1</div><div class="cell">b2</div>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html
new file mode 100644
index 0000000000..e1042d14c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    .inline {
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div>
+  <div><rb>a<span><div class="inline">b</div></span>c</rb></div>
+  <div><rt>a<span><div class="inline">b</div></span>c</rt></div>
+  <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div>
+  <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html
new file mode 100644
index 0000000000..7d34371219
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-004-ref.html">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    .inline {
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div>
+  <div><rb>a<span><div class="inline">b</div></span>c</rb></div>
+  <div><rt>a<span><div class="inline">b</div></span>c</rt></div>
+  <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div>
+  <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html
new file mode 100644
index 0000000000..4b2d66e2e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    ruby::before, rb::before, rt::before, rbc::before, rtc::before {
+      content: "a";
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+    ruby::after, rb::after, rt::after, rbc::after, rtc::after {
+      content: "c";
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>b</ruby></div>
+  <div><rb>b</rb></div>
+  <div><rt>b</rt></div>
+  <div><rbc>b</rbc></div>
+  <div><rtc>b</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html
new file mode 100644
index 0000000000..595c704ab2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-inlinize-blocks-005.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-005-ref.html">
+  <link rel="stylesheet" href="support/ruby-common.css">
+  <style>
+    ruby::before, rb::before, rt::before, rbc::before, rtc::before {
+      content: "a";
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+    ruby::after, rb::after, rt::after, rbc::after, rtc::after {
+      content: "c";
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>b</ruby></div>
+  <div><rb>b</rb></div>
+  <div><rt>b</rt></div>
+  <div><rbc>b</rbc></div>
+  <div><rtc>b</rtc></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html
new file mode 100644
index 0000000000..1d9fbb344f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p><ruby>
+  <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb>
+  <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt>
+</ruby></p>
+<p><ruby>
+  <rb>a</rb><rb pseudo><span> </span></rb><rb>b</rb>
+  <rt>x</rt><rt></rt><rt>y</rt>
+</ruby></p>
+<p><ruby>
+  <rb>a</rb><rb pseudo></rb><rb>b</rb>
+  <rt>x</rt><rt pseudo><span> </span></rt><rt>y</rt>
+</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html
new file mode 100644
index 0000000000..4fceda1fb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing">
+<link rel="match" href="ruby-intra-level-whitespace-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<p><ruby>
+  <rb>a</rb> <rb>b</rb>
+  <rt>x</rt> <rt>y</rt>
+</ruby></p>
+<p><ruby>
+  <rb>a</rb> <rb>b</rb>
+  <rt>x</rt><rt>y</rt>
+</ruby></p>
+<p><ruby>
+  <rb>a</rb><rb>b</rb>
+  <rt>x</rt> <rt>y</rt>
+</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html
new file mode 100644
index 0000000000..c5949dbeb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { font-family: monospace; }
+  .container { border: 1px solid blue; margin: 20px; }
+</style>
+<style id="style"></style>
+<span id="ref1">12345</span> <span id="ref2">12345 67890</span>
+<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div>
+<div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+<script type="text/javascript">
+  var ref2 = document.getElementById('ref2');
+  var style = document.getElementById('style');
+  var width2 = ref2.getBoundingClientRect().width + 'px';
+  // This is the same as the script in the corresponding
+  // testcase, except that here we skip the intermediate
+  // size and jump straight to the final size.
+  style.textContent = '.container { width: ' + width2 + '; }';
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html
new file mode 100644
index 0000000000..67aab53bfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing">
+<link rel="match" href="ruby-intra-level-whitespace-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { font-family: monospace; }
+  .container { border: 1px solid blue; margin: 20px; }
+</style>
+<style id="style"></style>
+<span id="ref1">12345</span> <span id="ref2">12345 67890</span>
+<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt><rt>54321</rt></ruby></div>
+<div class="container"><ruby><rb>12345</rb><rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+<div class="container"><ruby><rb>12345</rb> <rb>67890</rb><rt>09876</rt> <rt>54321</rt></ruby></div>
+<script type="text/javascript">
+  var ref1 = document.getElementById('ref1');
+  var ref2 = document.getElementById('ref2');
+  var style = document.getElementById('style');
+  var width1 = ref1.getBoundingClientRect().width + 'px';
+  var width2 = ref2.getBoundingClientRect().width + 'px';
+  // It changes the width of the containers to test incremental
+  // layout with intra-level whitespace columns being pushed and
+  // pulled up across a line-break.
+  style.textContent = '.container { width: ' + width1 + '; }';
+  document.body.offsetHeight;  // force reflow
+  style.textContent = '.container { width: ' + width2 + '; }';
+  document.body.offsetHeight;  // force reflow
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html
new file mode 100644
index 0000000000..d1df82371c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+|<ruby>
+  <rbc><rb>before</rb><rb>base</rb><rb> </rb></rbc>
+  <rtc><rt> </rt><rt>text</rt><rt>after</rt></rtc>
+</ruby>|
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html
new file mode 100644
index 0000000000..716f2e3f0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intra-level-whitespace-003.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Intra-level whitespace pairing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing">
+<link rel="match" href="ruby-intra-level-whitespace-003-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  rbc::before {
+    display: ruby-base;
+    content: "before";
+  }
+  rbc::after {
+    display: ruby-base;
+    content: " ";
+  }
+  rtc::before {
+    display: ruby-text;
+    content: " ";
+  }
+  rtc::after {
+    display: ruby-text;
+    content: "after";
+  }
+</style>
+<!-- This test ensures that we don't treat all-whitespace
+      ::before/::after content as intra-level whitespace -->
+|<ruby>
+  <rbc><rb>base</rb></rbc>
+  <rtc><rt>text</rt></rtc>
+</ruby>|
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html
new file mode 100644
index 0000000000..9d2889f811
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+  div {
+    display: inline-block;
+    border: 1px solid black;
+    font-kerning: none; /* disable kerning, because in the reference file
+                            it might occur across <span> boundaries */
+  }
+  span {
+    white-space: nowrap;
+  }
+</style>
+<div style="width: min-content">
+  <span>ABC</span><span>DEF</span>
+</div>
+<div style="width: max-content">
+  <span>ABC</span><span>DEF</span>
+</div>
+<br>
+
+<div style="width: min-content">
+  XYZ<span>ABC</span><span>DEF</span>XYZ
+</div>
+<div style="width: max-content">
+  XYZ<span>ABC</span><span>DEF</span>XYZ
+</div>
+<br>
+
+<div style="width: min-content">
+  <span>あい</span><span>うえ</span>
+</div>
+<div style="width: max-content">
+  <span>あい</span><span>うえ</span>
+</div>
+<br>
+
+<div style="width: min-content">
+  お<span>あい</span><span>うえ</span>お
+</div>
+<div style="width: max-content">
+  お<span>あい</span><span>うえ</span>お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html
new file mode 100644
index 0000000000..84f48e2fc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks">
+<link rel="match" href="ruby-intrinsic-isize-001-ref.html">
+<style>
+  div {
+    display: inline-block;
+    border: 1px solid black;
+    font-kerning: none; /* disable kerning, because in the reference file
+                            it might occur across <span> boundaries */
+  }
+</style>
+<div style="width: min-content">
+  <ruby><rb>ABC<rb>DEF</ruby>
+</div>
+<div style="width: max-content">
+  <ruby><rb>ABC<rb>DEF</ruby>
+</div>
+<br>
+
+<div style="width: min-content">
+  XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+</div>
+<div style="width: max-content">
+  XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+</div>
+<br>
+
+<div style="width: min-content">
+  <ruby><rb>あい<rb>うえ</ruby>
+</div>
+<div style="width: max-content">
+  <ruby><rb>あい<rb>うえ</ruby>
+</div>
+<br>
+
+<div style="width: min-content">
+  お<ruby><rb>あい<rb>うえ</ruby>お
+</div>
+<div style="width: max-content">
+  お<ruby><rb>あい<rb>うえ</ruby>お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html
new file mode 100644
index 0000000000..d71de26a25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+  div {
+    display: inline-block;
+    border: 1px solid black;
+  }
+</style>
+<p>No line break should happen in any block, and the content should just fit in the block.</p>
+
+<div>
+  ABC DEF
+</div>
+<div>
+  XYZ ABCDEF XYZ
+</div>
+
+<div>
+  あい うえ
+</div>
+<div>
+  お あいうえ お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html
new file mode 100644
index 0000000000..741d41bec5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks">
+<link rel="match" href="ruby-intrinsic-isize-002-ref.html">
+<style>
+  div {
+    display: inline-block;
+    border: 1px solid black;
+  }
+</style>
+<p>No line break should happen in any block, and the content should just fit in the block.</p>
+
+<div>
+  <ruby><rb>ABC</rb> <rb>DEF</rb></ruby>
+</div>
+<div>
+  XYZ <ruby><rb>ABC</rb><rb>DEF</rb></ruby> XYZ
+</div>
+
+<div>
+  <ruby><rb>あい</rb> <rb>うえ</rb></ruby>
+</div>
+<div>
+  お <ruby><rb>あい</rb><rb>うえ</rb></ruby> お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html
new file mode 100644
index 0000000000..01523b4a85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="utf-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<style>
+  .ruby {
+    border-left: 5px solid blue;
+    border-right: 10px solid blue;
+    padding: 0 20px 0 10px;
+    margin: 0 10px 0 20px;
+  }
+  div {
+    display: inline-block;
+    border: 1px solid black;
+    font-kerning: none; /* disable kerning, because in the reference file
+                            it might occur across <span> boundaries */
+  }
+  .ruby > span {
+    white-space: nowrap;
+  }
+</style>
+
+<div style="width: min-content">
+  <span class="ruby"><span>ABC</span><span>DEF</span></span>
+</div>
+<div style="width: max-content">
+  <span class="ruby"><span>ABC</span><span>DEF</span></span>
+</div>
+<br>
+
+<div style="width: min-content">
+  XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ
+</div>
+<div style="width: max-content">
+  XYZ<span class="ruby"><span>ABC</span><span>DEF</span></span>XYZ
+</div>
+<br>
+
+<div style="width: min-content">
+  <span class="ruby"><span>あい</span><span>うえ</span></span>
+</div>
+<div style="width: max-content">
+  <span class="ruby"><span>あい</span><span>うえ</span></span>
+</div>
+<br>
+
+<div style="width: min-content">
+  お<span class="ruby"><span>あい</span><span>うえ</span></span>お
+</div>
+<div style="width: max-content">
+  お<span class="ruby"><span>あい</span><span>うえ</span></span>お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html
new file mode 100644
index 0000000000..c67033f69a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-intrinsic-isize-003.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="utf-8">
+<title>Intrinsic ISize calculation of ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#line-breaks">
+<link rel="match" href="ruby-intrinsic-isize-003-ref.html">
+<style>
+  ruby {
+    border-left: 5px solid blue;
+    border-right: 10px solid blue;
+    padding: 0 20px 0 10px;
+    margin: 0 10px 0 20px;
+  }
+  div {
+    display: inline-block;
+    border: 1px solid black;
+    font-kerning: none; /* disable kerning, because in the reference file
+                            it might occur across <span> boundaries */
+  }
+</style>
+
+<div style="width: min-content">
+  <ruby><rb>ABC<rb>DEF</ruby>
+</div>
+<div style="width: max-content">
+  <ruby><rb>ABC<rb>DEF</ruby>
+</div>
+<br>
+
+<div style="width: min-content">
+  XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+</div>
+<div style="width: max-content">
+  XYZ<ruby><rb>ABC<rb>DEF</ruby>XYZ
+</div>
+<br>
+
+<div style="width: min-content">
+  <ruby><rb>あい<rb>うえ</ruby>
+</div>
+<div style="width: max-content">
+  <ruby><rb>あい<rb>うえ</ruby>
+</div>
+<br>
+
+<div style="width: min-content">
+  お<ruby><rb>あい<rb>うえ</ruby>お
+</div>
+<div style="width: max-content">
+  お<ruby><rb>あい<rb>うえ</ruby>お
+</div>
+<br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html
new file mode 100644
index 0000000000..eaec889713
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Justification with ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { line-height: 3; }
+</style>
+<div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby>
+  <rb>a</rb><rb>b</rb>
+</ruby></div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html
new file mode 100644
index 0000000000..edef72874b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Justification with ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#base-annotation-pairing">
+<link rel="match" href="ruby-justification-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { line-height: 3; }
+</style>
+<div style="width: 200px; height: 100px; text-align-last: justify; overflow: auto;"><ruby>
+  <rb>a</rb><rb>b</rb>
+  <rtc><div style="width: 100px;"></div></rtc>
+</ruby></div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html
new file mode 100644
index 0000000000..c61dae5c62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-002-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Justification with ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  div {
+    ruby-position: under;
+    width: 300px; height: 100px;
+    text-align-last: justify;
+    overflow: auto;
+    text-decoration: underline;
+  }
+</style>
+<div><rb>仮</rb><rb>名</rb><rt>が</rt><rt>な</rt></div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html b/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html
new file mode 100644
index 0000000000..979987c028
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-justification-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Justification with ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#base-annotation-pairing">
+<link rel="match" href="ruby-justification-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  div {
+    ruby-position: under;
+    width: 300px; height: 100px;
+    text-align-last: justify;
+    overflow: auto;
+    text-decoration: underline;
+  }
+</style>
+<div>
+  <rb>仮</rb><rb>名</rb>
+  <rt>が</rt><rt>な</rt>
+  <!-- -->
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html
new file mode 100644
index 0000000000..c0655a5310
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for lang-specific default stylesheet for ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body style="font: 200%/normal Ahem !important">
+<p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p>
+<p><ruby><rb>base x x<rt style="ruby-align: space-around; font-size: 50%">text x x</ruby></p>
+<p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 50%">text x x</ruby></p>
+<p><ruby><rb>base x x<rt style="ruby-align: center; font-size: 30%">text x x</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html
new file mode 100644
index 0000000000..3206514f0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-lang-specific-style-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for lang-specific default stylesheet for ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#default-stylesheet">
+<link rel="match" href="ruby-lang-specific-style-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<body style="font: 200%/normal Ahem !important">
+<p lang="en"><ruby><rb>base x x<rt>text x x</ruby></p>
+<p lang="ja"><ruby><rb>base x x<rt>text x x</ruby></p>
+<p lang="zh-CN"><ruby><rb>base x x<rt>text x x</ruby></p>
+<p lang="zh-TW"><ruby><rb>base x x<rt>text x x</ruby></p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html
new file mode 100644
index 0000000000..7c89ee60e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes-ref.html
@@ -0,0 +1,179 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Ruby Reference: ruby content w. layout-internal 'display' values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+input {
+  width: 20px;
+  -webkit-appearance: none;
+  border: 1px solid black;
+  background: white;
+}
+
+.thg { display: table-header-group; }
+.trg { display: table-row-group; }
+.tfg { display: table-footer-group; }
+.tr  { display: table-row; }
+.tc  { display: table-cell; }
+.tcg { display: table-column-group; }
+.tco { display: table-column; }
+.tca { display: table-caption; }
+.t   { display: table; }
+
+.rb  { display: ruby-base; }
+.rt  { display: ruby-text; }
+.rbc { display: ruby-base-container; }
+.rtc { display: ruby-text-container; }
+
+.x { background: red}
+    </style>
+</head>
+<body>
+
+<ruby><rb><span>a<span><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="thg"><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="thg">b</div><input class="thg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="thg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="trg"><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="trg">b</div><input class="trg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="trg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tfg"><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tfg">b</div><input class="tfg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tfg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tr"><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tr">b</div><input class="tr"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tr">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tc"><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tc">b</div><input class="tc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tc">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tcg"><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tcg">b</div><input class="tcg"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tcg">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tco"><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tco">b</div><input class="tco"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tco">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="tca"><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tca">b</div><input class="tca"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="tca">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="t"><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="t">b</div><input class="t"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="t">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rb"><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rb">b</div><input class="rb"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rb">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rt"><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rt">b</div><input class="rt"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rt">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rbc"><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rbc">b</div><input class="rbc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rbc">b</div></span>c</span></rb></ruby>
+
+<ruby><rb><span>a<span><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><input class="rtc"><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rtc">b</div><input class="rtc"></span>b</span></rb></ruby>
+<ruby><rb><span>a<span><div class="rtc">b</div></span>c</span></rb></ruby>
+
+<br><hr>
+
+<!--  -->
+
+<ruby><rb><span><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><input class="thg"><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><div class="thg">b</div><input class="thg"></span>b</rb></ruby>
+<ruby><rb><span><div class="thg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><input class="trg"><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><div class="trg">b</div><input class="trg"></span>b</rb></ruby>
+<ruby><rb><span><div class="trg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><input class="tfg"><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tfg">b</div><input class="tfg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tfg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><input class="tr"><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><div class="tr">b</div><input class="tr"></span>b</rb></ruby>
+<ruby><rb><span><div class="tr">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><input class="tc"><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><div class="tc">b</div><input class="tc"></span>b</rb></ruby>
+<ruby><rb><span><div class="tc">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><input class="tcg"><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tcg">b</div><input class="tcg"></span>b</rb></ruby>
+<ruby><rb><span><div class="tcg">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><input class="tco"><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><div class="tco">b</div><input class="tco"></span>b</rb></ruby>
+<ruby><rb><span><div class="tco">b</div></span>c</rb></ruby>
+
+<!-- bug NNNNNN
+<ruby><rb><span><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><input class="tca"><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><div class="tca">b</div><input class="tca"></span>b</rb></ruby>
+<ruby><rb><span><div class="tca">b</div></span>c</rb></ruby>
+-->
+
+<ruby><rb><span><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><input class="t"><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><div class="t">b</div><input class="t"></span>b</rb></ruby>
+<ruby><rb><span><div class="t">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><input class="rb"><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><div class="rb">b</div><input class="rb"></span>b</rb></ruby>
+<ruby><rb><span><div class="rb">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><input class="rt"><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><div class="rt">b</div><input class="rt"></span>b</rb></ruby>
+<ruby><rb><span><div class="rt">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><input class="rbc"><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rbc">b</div><input class="rbc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rbc">b</div></span>c</rb></ruby>
+
+<ruby><rb><span><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><input class="rtc"><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rtc">b</div><input class="rtc"></span>b</rb></ruby>
+<ruby><rb><span><div class="rtc">b</div></span>c</rb></ruby>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html
new file mode 100644
index 0000000000..cfd271233e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-layout-internal-boxes.html
@@ -0,0 +1,181 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Ruby Test: ruby content w. layout-internal 'display' values</title>
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+  <link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="match" href="ruby-layout-internal-boxes-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
+}
+
+input {
+  width: 20px;
+  -webkit-appearance: none;
+  border: 1px solid black;
+  background: white;
+}
+
+.thg { display: table-header-group; }
+.trg { display: table-row-group; }
+.tfg { display: table-footer-group; }
+.tr  { display: table-row; }
+.tc  { display: table-cell; }
+.tcg { display: table-column-group; }
+.tco { display: table-column; }
+.tca { display: table-caption; }
+.t   { display: table; }
+
+.rb  { display: ruby-base; }
+.rt  { display: ruby-text; }
+.rbc { display: ruby-base-container; }
+.rtc { display: ruby-text-container; }
+
+    </style>
+</head>
+<body>
+
+<ruby><rb><span>a<input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="thg"><input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="thg">b</div><input class="thg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="thg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="trg"><input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="trg">b</div><input class="trg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="trg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tfg"><input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tfg">b</div><input class="tfg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tfg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tr"><input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tr">b</div><input class="tr">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tr">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tc"><input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tc">b</div><input class="tc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tc">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tcg"><input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tcg">b</div><input class="tcg">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tcg">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tco"><input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tco">b</div><input class="tco">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tco">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<input class="tca"><input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tca">b</div><input class="tca">b</span></rb></ruby>
+<ruby><rb><span>a<div class="tca">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<input class="t"><input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<div class="t">b</div><input class="t">b</span></rb></ruby>
+<ruby><rb><span>a<div class="t">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rb"><input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rb">b</div><input class="rb">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rb">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rt"><input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rt">b</div><input class="rt">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rt">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rbc"><input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rbc">b</div><input class="rbc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rbc">b</div>c</span></rb></ruby>
+
+<ruby><rb><span>a<input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<input class="rtc"><input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rtc">b</div><input class="rtc">b</span></rb></ruby>
+<ruby><rb><span>a<div class="rtc">b</div>c</span></rb></ruby>
+
+<br><hr>
+
+<!-- same as above but without the SPAN wrapper -->
+
+<ruby><rb><input class="thg">b</rb></ruby>
+<ruby><rb><input class="thg"><input class="thg">b</rb></ruby>
+<ruby><rb><div class="thg">b</div><input class="thg">b</rb></ruby>
+<ruby><rb><div class="thg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="trg">b</rb></ruby>
+<ruby><rb><input class="trg"><input class="trg">b</rb></ruby>
+<ruby><rb><div class="trg">b</div><input class="trg">b</rb></ruby>
+<ruby><rb><div class="trg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tfg">b</rb></ruby>
+<ruby><rb><input class="tfg"><input class="tfg">b</rb></ruby>
+<ruby><rb><div class="tfg">b</div><input class="tfg">b</rb></ruby>
+<ruby><rb><div class="tfg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tr">b</rb></ruby>
+<ruby><rb><input class="tr"><input class="tr">b</rb></ruby>
+<ruby><rb><div class="tr">b</div><input class="tr">b</rb></ruby>
+<ruby><rb><div class="tr">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tc">b</rb></ruby>
+<ruby><rb><input class="tc"><input class="tc">b</rb></ruby>
+<ruby><rb><div class="tc">b</div><input class="tc">b</rb></ruby>
+<ruby><rb><div class="tc">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tcg">b</rb></ruby>
+<ruby><rb><input class="tcg"><input class="tcg">b</rb></ruby>
+<ruby><rb><div class="tcg">b</div><input class="tcg">b</rb></ruby>
+<ruby><rb><div class="tcg">b</div>c</rb></ruby>
+
+<ruby><rb><input class="tco">b</rb></ruby>
+<ruby><rb><input class="tco"><input class="tco">b</rb></ruby>
+<ruby><rb><div class="tco">b</div><input class="tco">b</rb></ruby>
+<ruby><rb><div class="tco">b</div>c</rb></ruby>
+
+<!-- FIXME after https://bugzilla.mozilla.org/show_bug.cgi?id=1510299
+<ruby><rb><input class="tca">b</rb></ruby>
+<ruby><rb><input class="tca"><input class="tca">b</rb></ruby>
+<ruby><rb><div class="tca">b</div><input class="tca">b</rb></ruby>
+<ruby><rb><div class="tca">b</div>c</rb></ruby>
+-->
+
+<ruby><rb><input class="t">b</rb></ruby>
+<ruby><rb><input class="t"><input class="t">b</rb></ruby>
+<ruby><rb><div class="t">b</div><input class="t">b</rb></ruby>
+<ruby><rb><div class="t">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rb">b</rb></ruby>
+<ruby><rb><input class="rb"><input class="rb">b</rb></ruby>
+<ruby><rb><div class="rb">b</div><input class="rb">b</rb></ruby>
+<ruby><rb><div class="rb">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rt">b</rb></ruby>
+<ruby><rb><input class="rt"><input class="rt">b</rb></ruby>
+<ruby><rb><div class="rt">b</div><input class="rt">b</rb></ruby>
+<ruby><rb><div class="rt">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rbc">b</rb></ruby>
+<ruby><rb><input class="rbc"><input class="rbc">b</rb></ruby>
+<ruby><rb><div class="rbc">b</div><input class="rbc">b</rb></ruby>
+<ruby><rb><div class="rbc">b</div>c</rb></ruby>
+
+<ruby><rb><input class="rtc">b</rb></ruby>
+<ruby><rb><input class="rtc"><input class="rtc">b</rb></ruby>
+<ruby><rb><div class="rtc">b</div><input class="rtc">b</rb></ruby>
+<ruby><rb><div class="rtc">b</div>c</rb></ruby>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html
new file mode 100644
index 0000000000..1cd43b8001
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby>ab</ruby><br>
+<rbc>ab</rbc><br>
+<rtc>ab</rtc><br>
+<rb>ab</rb><br>
+<rt>ab</rt>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html
new file mode 100644
index 0000000000..11d4d40d43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-line-break-suppression-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby>a<br>b</ruby><br>
+<rbc>a<br>b</rbc><br>
+<rtc>a<br>b</rtc><br>
+<rb>a<br>b</rb><br>
+<rt>a<br>b</rt>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html
new file mode 100644
index 0000000000..8281ea1d74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<div style="width: 1em; border: 1px solid">
+  <ruby>aaaaaaaaaabbbbbbbbbb</ruby><br>
+  <rbc>aaaaaaaaaabbbbbbbbbb</rbc><br>
+  <rtc>aaaaaaaaaabbbbbbbbbb</rtc><br>
+  <rb>aaaaaaaaaabbbbbbbbbb</rb><br>
+  <rt>aaaaaaaaaabbbbbbbbbb</rt><br>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html
new file mode 100644
index 0000000000..394b9c27e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-line-break-suppression-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<div style="width: 1em; border: 1px solid">
+  <ruby>aaaaaaaaaa<div></div>bbbbbbbbbb</ruby><br>
+  <rbc>aaaaaaaaaa<div></div>bbbbbbbbbb</rbc><br>
+  <rtc>aaaaaaaaaa<div></div>bbbbbbbbbb</rtc><br>
+  <rb>aaaaaaaaaa<div></div>bbbbbbbbbb</rb><br>
+  <rt>aaaaaaaaaa<div></div>bbbbbbbbbb</rt><br>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html
new file mode 100644
index 0000000000..f8b1e168e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby><span>a
+b</span></ruby><br>
+<rbc><span>a
+b</span></rbc><br>
+<rtc><span>a
+b</span></rtc><br>
+<rb><span>a
+b</span></rb><br>
+<rt><span>a
+b</span></rt><br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html
new file mode 100644
index 0000000000..dadfd562a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Test for ruby line break suppression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-line-break-suppression-003-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  span { white-space: pre; }
+</style>
+<ruby><span>a
+b</span></ruby><br>
+<rbc><span>a
+b</span></rbc><br>
+<rtc><span>a
+b</span></rtc><br>
+<rb><span>a
+b</span></rb><br>
+<rt><span>a
+b</span></rt><br>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html
new file mode 100644
index 0000000000..5aa5582957
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Line break suppression on whitespaces wrapped but not contained in ruby boxes</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<span style="white-space: pre"><rb>a</rb><rb>
+</rb><rb>b</rb></span>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html
new file mode 100644
index 0000000000..0314237f07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-004.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Line break suppression on whitespaces wrapped but not contained in ruby boxes</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-line-break-suppression-004-ref.html">
+<span style="white-space: pre"><rb>a</rb>
+<rb>b</rb></span>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html
new file mode 100644
index 0000000000..c40780e37d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Line break suppression with soft hyphen</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<body style="width: 1px">
+x<ruby>a</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html
new file mode 100644
index 0000000000..10d6690b3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-break-suppression-005.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Line break suppression with soft hyphen</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
+<link rel="match" href="ruby-line-break-suppression-005-ref.html">
+<body style="width: 1px">
+x<ruby>a&shy;</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html
new file mode 100644
index 0000000000..1f3031c59a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Meet the specification for line breaking between ruby bases</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { line-height: 3; font-kerning: none; }
+  span { white-space: nowrap; }
+</style>
+<div style="width: .5em; border: 1px solid silver;">
+  <span>「</span><span>な</span><span>に</span><span>、</span><span>誰</span><span>？</span><span>」</span><span>「</span><span>私</span><span>です</span><span>」</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html
new file mode 100644
index 0000000000..b6b4d861e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Meet the specification for line breaking between ruby bases</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between">
+<link rel="match" href="ruby-line-breaking-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  body { line-height: 3; font-kerning: none; }
+</style>
+<div style="width: .5em; border: 1px solid silver;">
+  <ruby>
+    <rb>「<rb>な<rb>に<rb>、<rb>誰<rb>？<rb>」<rb>「<rb>私<rb>です<rb>」</rb>
+    <!-- Check if ruby text containers are skipped from the text run -->
+    <rtc><rt>
+  </ruby>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html
new file mode 100644
index 0000000000..08510f7fb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Line breaking between ruby and preceeding open bracket</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<div style="width: 5em; border: 1px solid silver;">
+  の「<span style="font-family: Ahem; padding: 0 10rem;">X</span>」
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html
new file mode 100644
index 0000000000..dddf41f930
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-002.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Line breaking between ruby and preceeding open bracket</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between">
+<link rel="match" href="ruby-line-breaking-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/ruby-common.css">
+<div style="width: 5em; border: 1px solid silver;">
+  の「<ruby style="font-family: Ahem;">X<rt style="font-size: 0;"><div style="width: 21rem"></div></ruby>」
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html
new file mode 100644
index 0000000000..4f3cecb27c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Dynamic break point change in ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  #test {
+    border: 1px solid;
+    text-align: center;
+    width: 2.5em;
+  }
+</style>
+<div id="test">
+  <p>一二三四五六七八</p>
+  <p>一二三四五六七八</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html
new file mode 100644
index 0000000000..27348d0cf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-line-breaking-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>Dynamic break point change in ruby</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#break-between">
+<link rel="match" href="ruby-line-breaking-003-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+  #test {
+    border: 1px solid;
+    text-align: center;
+  }
+</style>
+<div id="test">
+  <p><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></p>
+  <p><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></p>
+</div>
+<script>
+  let div = document.getElementById("test");
+  document.body.offsetHeight;
+  test.style.width = "2.5em";
+  document.body.offsetHeight;
+  test.style.width = "4.5em";
+  document.body.offsetHeight;
+  test.style.width = "2.5em";
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html
new file mode 100644
index 0000000000..56afd9366f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-no-transform-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby should not support transform</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby>
+  <rbc><rb>a</rb><rb>b</rb></rbc>
+  <rtc><rt>A</rt><rt>B</rt></rtc>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html b/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html
new file mode 100644
index 0000000000..1cdd4f3bbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-no-transform.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby should not support transform</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
+<link rel="match" href="ruby-no-transform-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+ruby, rbc, rb, rtc, rt {
+  transform: translateX(50px);
+}
+</style>
+<ruby>
+  <rbc><rb>a</rb><rb>b</rb></rbc>
+  <rtc><rt>A</rt><rt>B</rt></rtc>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html b/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html
new file mode 100644
index 0000000000..e2e10d9be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-position-alternate.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-ruby/#rubypos">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<p>
+  <ruby id="a1">
+    base
+    <rtc><rt>annotation1</rt></rtc>
+    <rtc><rt>annotation2</rt></rtc>
+    <rtc><rt>annotation3</rt></rtc>
+  </ruby>
+</p>
+
+<script>
+for (const value of ['', 'alternate', 'alternate over', 'over alternate']) {
+  test(() => {
+    const a1 = document.querySelector('#a1');
+    a1.style.rubyPosition = value;
+    const [rt1, rt2, rt3] = a1.querySelectorAll('rt');
+    assert_rt_is_over(rt1, a1);
+    assert_rt_is_under(rt2, a1);
+    assert_rt_is_over(rt3, a1);
+    a1.style.rubyPosition = '';
+  }, `ruby-position "${value}" alternate from over`);
+}
+
+for (const value of ['alternate under', 'under alternate']) {
+  test(() => {
+    const a1 = document.querySelector('#a1');
+    a1.style.rubyPosition = value;
+    const [rt1, rt2, rt3] = a1.querySelectorAll('rt');
+    assert_rt_is_under(rt1, a1);
+    assert_rt_is_over(rt2, a1);
+    assert_rt_is_under(rt3, a1);
+    a1.style.rubyPosition = '';
+  }, `ruby-position "${value}" alternate from under`);
+}
+
+test(() => {
+  const a1 = document.querySelector('#a1');
+  const [rtc1, rtc2] = a1.querySelectorAll('rtc');
+  const [rt1, rt2, rt3] = a1.querySelectorAll('rt');
+
+  rtc1.style.rubyPosition = 'under';
+  assert_rt_is_under(rt1, a1);
+  assert_rt_is_over(rt2, a1);
+  assert_rt_is_under(rt3, a1);
+
+  rtc1.style.rubyPosition = 'over';
+  assert_rt_is_over(rt1, a1);
+  assert_rt_is_under(rt2, a1);
+  assert_rt_is_over(rt3, a1);
+
+  rtc1.style.rubyPosition = 'alternate';
+  rtc2.style.rubyPosition = 'under';
+  assert_rt_is_over(rt1, a1);
+  assert_rt_is_under(rt2, a1);
+  assert_rt_is_over(rt3, a1);
+
+  rtc1.style.rubyPosition = '';
+  rtc2.style.rubyPosition = '';
+}, 'ruby-position alternate from previous ruby text container');
+
+function assert_rt_is_over(rt, ruby) {
+  assert_true(rt.getBoundingClientRect().top < ruby.getBoundingClientRect().top);
+}
+
+function assert_rt_is_under(rt, ruby) {
+  assert_true(rt.getBoundingClientRect().bottom > ruby.getBoundingClientRect().bottom);
+}
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-position.html b/testing/web-platform/tests/css/css-ruby/ruby-position.html
new file mode 100644
index 0000000000..014c524044
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-position.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-ruby/#rubypos">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<p><ruby id="o1" style="ruby-position: over">base<rt>annotation</rt></ruby></p>
+<p><ruby id="o2" style="ruby-position: over">base<rt style="ruby-position: under">annotation</rt></ruby></p>
+<p><ruby id="o3" style="ruby-position: under">base<rtc style="ruby-position: over"><rt style="ruby-position: under">annotation</rt></rtc></ruby></p>
+
+<p><ruby id="u1" style="ruby-position: under">base<rt>annotation</rt></ruby></p>
+<p><ruby id="u2" style="ruby-position: under">base<rt style="ruby-position: over">annotation</rt></ruby></p>
+<p><ruby id="u3" style="ruby-position: over">base<rtc style="ruby-position: under"><rt style="ruby-position: over">annotation</rt></rtc></ruby></p>
+
+<script>
+test(() => {
+  const o1 = document.querySelector('#o1');
+  assert_true(o1.querySelector('rt').getBoundingClientRect().top <= o1.getBoundingClientRect().top);
+}, 'ruby-position:over on <ruby> works');
+
+test(() => {
+  const o2 = document.querySelector('#o2');
+  assert_true(o2.querySelector('rt').getBoundingClientRect().top <= o2.getBoundingClientRect().top);
+}, 'ruby-position:under on <rt> should not work');
+
+test(() => {
+  const o3 = document.querySelector('#o3');
+  assert_true(o3.querySelector('rt').getBoundingClientRect().top <= o3.getBoundingClientRect().top);
+}, 'ruby-position:over on <rtc> works');
+
+test(() => {
+  const u1 = document.querySelector('#u1');
+  assert_true(u1.querySelector('rt').getBoundingClientRect().bottom >= u1.getBoundingClientRect().bottom);
+}, 'ruby-position:under on <ruby> works');
+
+test(() => {
+  const u2 = document.querySelector('#u2');
+  assert_true(u2.querySelector('rt').getBoundingClientRect().bottom >= u2.getBoundingClientRect().bottom);
+}, 'ruby-position:over on <rt> should not work');
+
+test(() => {
+  const u3 = document.querySelector('#u3');
+  assert_true(u3.querySelector('rt').getBoundingClientRect().bottom >= u3.getBoundingClientRect().bottom);
+}, 'ruby-position:under on <rtc> works');
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html
new file mode 100644
index 0000000000..eda07deddb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-noruby.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Base Frames Reflowed</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<meta name="assert" content="Test checks that ruby bases are reflowed.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+body { line-height: 3; }
+</style>
+</head>
+<body>
+新幹線
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html
new file mode 100644
index 0000000000..77feb2e6b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-opaqueruby.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Text Frames Visible</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<link rel="mismatch" href="ruby-reflow-001-noruby.html">
+<meta name="assert" content="Test checks that ruby text is rendered.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+body { line-height: 3; }
+</style>
+</head>
+<body>
+<ruby>
+  <rbc><rb>新</rb><rb>幹</rb><rb>線</rb></rbc>
+  <rtc><rt>しん</rt><rt>かん</rt><rt>せん</rt></rtc>
+</ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html
new file mode 100644
index 0000000000..008c5250bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-reflow-001-transparentruby.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+<title>CSS Test: Ruby Base Frames Reflowed</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="http://www.w3.org/TR/2014/WD-css-ruby-1-20140805/">
+<link rel="match" href="ruby-reflow-001-noruby.html">
+<meta name="assert" content="Test checks that ruby bases are reflowed.">
+<meta charset="UTF-8">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+body { line-height: 3; }
+rtc { color: transparent; }
+</style>
+</head>
+<body>
+<ruby>
+  <rbc><rb>新</rb><rb>幹</rb><rb>線</rb></rbc>
+  <rtc><rt>しん</rt><rt>かん</rt><rt>せん</rt></rtc>
+</ruby>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html
new file mode 100644
index 0000000000..3bf873453c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-span-001-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby><rb>The Ruby Base</rb><rtc><rt>span</rt></rtc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-span-001.html b/testing/web-platform/tests/css/css-ruby/ruby-span-001.html
new file mode 100644
index 0000000000..e7b19667aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-span-001.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-pairing">
+<link rel="match" href="ruby-span-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<ruby><rb>The Ruby Base</rb><rtc>span</rtc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html
new file mode 100644
index 0000000000..6cbcc7807f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>CSS Reference: visibility: collapse hides ruby annotations</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<style>
+  body { line-height: 5; }
+  rt { font-size: 80%; }
+</style>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt>ちゅう</rt><rt>き</rt>
+</ruby><br>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt style="opacity: 0">ちゅう</rt><rt>き</rt>
+</ruby><br>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt></rt><rt>き</rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html
new file mode 100644
index 0000000000..5bb01aab02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-collapse.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ja">
+<meta charset="UTF-8">
+<title>CSS Test: visibility: collapse hides ruby annotations</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#hiding">
+<link rel="match" href="ruby-text-collapse-ref.html">
+<style>
+  body { line-height: 5; }
+  rt { font-size: 80%; }
+</style>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt>ちゅう</rt><rt>き</rt>
+</ruby><br>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt style="visibility: hidden">ちゅう</rt><rt>き</rt>
+</ruby><br>
+<ruby>
+  <rb>昆</rb><rb>虫</rb><rb>記</rb>
+  <rt>こん</rt><rt style="visibility: collapse">ちゅう</rt><rt>き</rt>
+</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html
new file mode 100644
index 0000000000..db4f23c886
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Ruby with text-combine-upright in base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb><span style="writing-mode: horizontal-tb">X</span></rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html
new file mode 100644
index 0000000000..bdb87e29b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-001-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb style="text-combine-upright: all">X</rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html
new file mode 100644
index 0000000000..8aed0146b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-001b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright child in base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-001-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb><span style="text-combine-upright: all">X</span></rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html
new file mode 100644
index 0000000000..1bb4386e7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Ruby with text-combine-upright annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt><span style="writing-mode: horizontal-tb">X</span></rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html
new file mode 100644
index 0000000000..6c95c169e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright in annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-002-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt style="text-combine-upright: all">X</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html
new file mode 100644
index 0000000000..ed7dabb026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-text-combine-upright-002b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright child in annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-002-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt><span style="text-combine-upright: all">X</span></rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html
new file mode 100644
index 0000000000..04fa59e6ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby whitespace handling</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+body { line-height: 5em; }
+</style>
+
+<p>
+  <ruby><rbc><rb><span>   </span></rb><rb><span>    </span></rb><rb>Base three</rb></rbc
+    ><rtc><rt><span>   </span></rt><rt><span>   </span></rt><rt>Text three</rt></rtc
+    ><rtc><rt></rt></rtc
+    ><rbc><rb><span>        </span></rb></rbc
+    ><rbc><rb>Segment two</rb></rbc
+    ><rtc><rt></rt></rtc></ruby>
+</p>
+
+<p>
+  <ruby><rbc><rb>Base one</rb><rb><span>  </span></rb><rb>Base three</rb></rbc
+    ><rtc pseudo><rt>Text one</rt><rt pseudo><span>  </span></rt><rt>Text three</rt></rtc></ruby>
+</p>
+
+<p>
+  <ruby><rbc><rb>Segment one</rb></rbc
+    ><rbc><rb><span>  </span></rb></rbc
+    ><rbc><rb><span>  </span></rb><rb><span>    </span></rb><rb>Base three</rb></rbc
+    ><rtc><rt><span>  </span></rt><rt><span>     </span></rt><rt>Text three</rt></rtc
+    ><rbc><rb><span>  </span></rb></rbc
+    ><rbc><rb>Base one</rb><rb><span>   </span></rb><rb>Base three</rb></rbc
+    ><rtc><rt>Text one</rt><rt></rt><rt>Text two/three</rt></rtc></ruby>
+</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html
new file mode 100644
index 0000000000..9072a8e684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby whitespace handling</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#white-space">
+<link rel="match" href="ruby-whitespace-001-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+<style>
+body { line-height: 5em; }
+</style>
+
+<p>
+  <ruby>
+    <rbc>       <rb>   </rb>    <rb>Base three</rb>   </rbc>
+    <rtc>    <rt>   </rt>   <rt>Text three</rt>   </rtc>    <rtc><rt></rt></rtc>
+    <rbc><rb>Segment two</rb></rbc><rtc><rt></rt></rtc>
+  </ruby>
+</p>
+
+<p>
+  <ruby>
+    <rb>Base one</rb>  <rb>Base three</rb>
+    <rt>Text one</rt>  <rt>Text three</rt>
+  </ruby>
+</p>
+
+<p>
+  <rb>Segment one</rb>  <rbc>   <rb>  </rb>    <rb>Base three</rb>  </rbc
+    >   <rtc><rt>  </rt>     <rt>Text three</rt></rtc>
+
+  <rb>Base one</rb>   <rb>Base three</rb>   <rt>Text one</rt><rt>Text two/three</rt>
+</p>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html
new file mode 100644
index 0000000000..2b22891738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby whitespace handling</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" href="support/ruby-common.css">
+
+<!-- Unclear how this should render. See http://lists.w3.org/Archives/Public/www-style/2014Jul/0620.html //-->
+abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+abcd<ruby><rbc><rb><span>BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+abcd<ruby><rbc><rb><span> BASE</span></rb></rbc><rtc pseudo><rt>TEXT</rt></rtc></ruby>
+
+<ruby><rbc></rbc></ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html
new file mode 100644
index 0000000000..98ed789133
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-whitespace-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Ruby whitespace handling</title>
+<link rel="author" title="Sam Bowen" href="mailto:sgbowen8@gmail.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#white-space">
+<link rel="match" href="ruby-whitespace-002-ref.html">
+<link rel="stylesheet" href="support/ruby-common.css">
+
+abcd<rbc> BASE</rbc><rt>TEXT</rt>
+
+abcd<rbc> <span>BASE</span></rbc><rt>TEXT</rt>
+
+abcd<rbc><span> BASE</span></rbc><rt>TEXT</rt>
+
+<rbc> </rbc>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html
new file mode 100644
index 0000000000..c041e3f993
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<div style="float: left; width: 50px; height: 50px; background: green;"></div>
+<div style="display: inline-block;"><ruby>base<rt>annotation</rt></ruby></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html
new file mode 100644
index 0000000000..a49c1b255f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-001.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>A float is positioned correctly with ruby.</title>
+<link rel="match" href="ruby-with-floats-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/">
+<div style="float: left; width: 50px; height: 50px; background: green;"></div>
+<ruby>base<rt>annotation</rt></ruby>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html
new file mode 100644
index 0000000000..aa07f344e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="float: left; width: 50px; height: 20px; background: green;"></div>
+<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div>
+<div style="display: inline-block;"><ruby>base<rt>annotation</rt></ruby></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html
new file mode 100644
index 0000000000..190089d334
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-002.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>A ruby annotation doesn't intersect with any floats.</title>
+<link rel="match" href="ruby-with-floats-002-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/">
+<div style="float: left; width: 50px; height: 20px; background: green;"></div>
+<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div>
+<ruby>base<rt>annotation</rt></ruby>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html
new file mode 100644
index 0000000000..110e16eeec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="float: left; width: 50px; height: 20px; background: green;"></div>
+<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div>
+<div style="display: inline-block;"><ruby style="ruby-position: under;">base<rt>annotation</rt></ruby></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html
new file mode 100644
index 0000000000..4fd7524315
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/ruby-with-floats-003.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>A ruby annotation doesn't intersect with any floats.</title>
+<link rel="match" href="ruby-with-floats-003-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/">
+<div style="float: left; width: 50px; height: 20px; background: green;"></div>
+<div style="float: left; clear: left; width: 100px; height: 50px; background: green;"></div>
+<ruby style="ruby-position: under;">base<rt>annotation</rt></ruby>
+</div>
diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-common.css b/testing/web-platform/tests/css/css-ruby/support/ruby-common.css
new file mode 100644
index 0000000000..cf83123281
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/support/ruby-common.css
@@ -0,0 +1,18 @@
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+[pseudo] {
+  font-size: inherit;
+  line-height: inherit;
+}
+[pseudo] > rt {
+  font-size: 50%;
+}
+[pseudo] > rt[pseudo] {
+  font-size: inherit;
+}
+
+.large {
+  font-size: 200%;
+}
diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js
new file mode 100644
index 0000000000..0bf6cd9697
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-insertion.js
@@ -0,0 +1,42 @@
+window.onload = function() {
+  // Force a reflow before any changes.
+  document.body.clientWidth;
+
+  var elems = document.querySelectorAll('[data-insert]');
+  Array.from(elems).forEach(function(e) {
+    var parent, ref;
+    switch (e.dataset.insert) {
+      case 'start':
+        parent = e;
+        ref = e.firstChild;
+        break;
+
+      case 'end':
+        parent = e;
+        ref = null;
+        break;
+
+      case 'before':
+        parent = e.parentNode;
+        ref = e;
+        break;
+
+      case 'after':
+        parent = e.parentNode;
+        ref = e.nextSibling;
+        break;
+    }
+
+    var elem, textnode;
+    if ('text' in e.dataset) {
+      textnode = document.createTextNode(e.dataset.text);
+    }
+    if ('tag' in e.dataset) {
+      elem = document.createElement(e.dataset.tag);
+      if (textnode) {
+        elem.appendChild(textnode);
+      }
+    }
+    parent.insertBefore(elem ? elem : textnode, ref);
+  });
+};
diff --git a/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js
new file mode 100644
index 0000000000..c703e7601e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ruby/support/ruby-dynamic-removal.js
@@ -0,0 +1,14 @@
+function getElements(className) {
+  return Array.from(document.getElementsByClassName(className));
+}
+window.onload = function() {
+  // Force a reflow before any changes.
+  document.body.clientWidth;
+
+  getElements('remove').forEach(function(e) {
+    e.remove();
+  });
+  getElements('remove-after').forEach(function(e) {
+    e.parentNode.removeChild(e.nextSibling);
+  });
+};
-- 
cgit v1.2.3