From 311590d7a375d34599ea02bc43c190ecdb22a061 Mon Sep 17 00:00:00 2001
From: Louis Chang <lochang@mozilla.com>
Date: Fri, 9 Jun 2017 10:36:20 +0800
Subject: [PATCH] Bug 1362255 Part 2 - Import the tests. r=xidorn

MozReview-Commit-ID: 3oOqMwXtoOx

--HG--
extra : rebase_source : a36397fceac2408b35faa8b8247d7d2d32c6b45d
---
 .../w3c-css/received/css-conditional-3/OWNERS |   2 +
 .../w3c-css/received/css-multicol-1/OWNERS    |   1 +
 .../css-multicol-1/multicol-basic-005.xht     |  24 ++
 .../css-multicol-1/multicol-basic-006.xht     |  23 ++
 .../css-multicol-1/multicol-basic-007.xht     |  24 ++
 .../css-multicol-1/multicol-basic-008.xht     |  23 ++
 .../reference/multicol-basic-005-ref.xht      |  21 +
 .../w3c-css/received/css-namespaces-3/OWNERS  |   3 +
 .../w3c-css/received/css-values-3/OWNERS      |   6 +
 .../received/css-values-3/ch-unit-001.html    |  30 +-
 .../received/css-values-3/ch-unit-002.html    |  39 ++
 .../received/css-values-3/ch-unit-003.html    |  38 ++
 .../received/css-values-3/ch-unit-004.html    |  38 ++
 .../reference/ch-unit-001-ref.html            |  13 +-
 .../reference/ch-unit-002-ref.html            |  15 +
 .../received/css-writing-modes-3/OWNERS       |   8 +
 .../abs-pos-non-replaced-icb-vlr-003.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vlr-005.xht      |   2 -
 .../abs-pos-non-replaced-icb-vlr-007.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vlr-011.xht      |   6 +-
 .../abs-pos-non-replaced-icb-vlr-013.xht      |   2 -
 .../abs-pos-non-replaced-icb-vlr-019.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vlr-021.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vrl-002.xht      |   6 +-
 .../abs-pos-non-replaced-icb-vrl-004.xht      |   2 -
 .../abs-pos-non-replaced-icb-vrl-006.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vrl-010.xht      |   6 +-
 .../abs-pos-non-replaced-icb-vrl-012.xht      |   2 -
 .../abs-pos-non-replaced-icb-vrl-018.xht      |   4 +-
 .../abs-pos-non-replaced-icb-vrl-020.xht      |   4 +-
 .../background-position-vrl-018.xht           |   4 +-
 .../background-position-vrl-020.xht           |   4 +-
 .../background-position-vrl-022.xht           |   4 +-
 .../baseline-inline-non-replaced-002.xht      |   4 +-
 .../baseline-inline-non-replaced-003.xht      |   4 +-
 .../baseline-inline-non-replaced-004.xht      |   4 +-
 .../baseline-inline-non-replaced-005.xht      |   4 +-
 .../border-conflict-element-vlr-003.xht       |   4 +-
 .../border-conflict-element-vlr-005.xht       |   4 +-
 .../border-conflict-element-vlr-007.xht       |   4 +-
 .../border-conflict-element-vlr-009.xht       |   4 +-
 .../border-conflict-element-vlr-011.xht       |   4 +-
 .../border-conflict-element-vlr-013.xht       |   4 +-
 .../border-conflict-element-vrl-002.xht       |   4 +-
 .../border-conflict-element-vrl-004.xht       |   4 +-
 .../border-conflict-element-vrl-006.xht       |   4 +-
 .../border-conflict-element-vrl-008.xht       |   4 +-
 .../border-conflict-element-vrl-010.xht       |   4 +-
 .../border-conflict-element-vrl-012.xht       |   4 +-
 .../caption-side-vlr-003.xht                  |   4 +-
 .../caption-side-vlr-005.xht                  |   4 +-
 .../caption-side-vrl-002.xht                  |   4 +-
 .../caption-side-vrl-004.xht                  |   4 +-
 .../contiguous-floated-table-vlr-003.xht      |   4 +-
 .../contiguous-floated-table-vlr-005.xht      |   4 +-
 .../contiguous-floated-table-vlr-007.xht      |   4 +-
 .../contiguous-floated-table-vlr-009.xht      |   4 +-
 .../contiguous-floated-table-vrl-002.xht      |   4 +-
 .../contiguous-floated-table-vrl-004.xht      |   4 +-
 .../contiguous-floated-table-vrl-006.xht      |   4 +-
 .../contiguous-floated-table-vrl-008.xht      |   4 +-
 .../different-block-flow-dir-001.xht          |   4 +-
 .../different-block-flow-dir-002.xht          |   4 +-
 .../css-writing-modes-3/direction-vlr-005.xht |   4 +-
 .../float-clear-vlr-003.xht                   |   4 +-
 .../float-clear-vlr-005.xht                   |   4 +-
 .../float-clear-vlr-007.xht                   |   4 +-
 .../float-clear-vlr-009.xht                   |   4 +-
 .../float-clear-vrl-002.xht                   |   4 +-
 .../float-clear-vrl-004.xht                   |   4 +-
 .../float-clear-vrl-006.xht                   |   4 +-
 .../float-clear-vrl-008.xht                   |   4 +-
 .../float-contiguous-vlr-011.xht              |   4 +-
 .../float-contiguous-vrl-010.xht              |   4 +-
 .../float-lft-orthog-htb-in-vlr-002-ref.xht   |  55 +++
 .../float-lft-orthog-htb-in-vlr-002.xht       |  55 +++
 .../float-lft-orthog-htb-in-vrl-002-ref.xht   |  55 +++
 .../float-lft-orthog-htb-in-vrl-002.xht       |  55 +++
 .../float-lft-orthog-vlr-in-htb-002-ref.xht   |  50 +++
 .../float-lft-orthog-vlr-in-htb-002.xht       |  50 +++
 .../float-lft-orthog-vrl-in-htb-002-ref.xht   |  50 +++
 .../float-lft-orthog-vrl-in-htb-002.xht       |  50 +++
 .../float-rgt-orthog-htb-in-vlr-003-ref.xht   |  50 +++
 .../float-rgt-orthog-htb-in-vlr-003.xht       |  55 +++
 .../float-rgt-orthog-htb-in-vrl-003-ref.xht   |  50 +++
 .../float-rgt-orthog-htb-in-vrl-003.xht       |  55 +++
 .../float-rgt-orthog-vlr-in-htb-003-ref.xht   |  44 ++
 .../float-rgt-orthog-vlr-in-htb-003.xht       |  50 +++
 .../float-rgt-orthog-vrl-in-htb-003-ref.xht   |  44 ++
 .../float-rgt-orthog-vrl-in-htb-003.xht       |  50 +++
 .../float-shrink-to-fit-vlr-003.xht           |   4 +-
 .../float-shrink-to-fit-vlr-005.xht           |   4 +-
 .../float-shrink-to-fit-vlr-007.xht           |   4 +-
 .../float-shrink-to-fit-vlr-009.xht           |   4 +-
 .../float-shrink-to-fit-vrl-002.xht           |   4 +-
 .../float-shrink-to-fit-vrl-004.xht           |   4 +-
 .../float-shrink-to-fit-vrl-006.xht           |   4 +-
 .../float-shrink-to-fit-vrl-008.xht           |   4 +-
 .../float-shrink-to-fit-vrl-vlr-016.xht       |   4 +-
 .../css-writing-modes-3/float-vlr-003.xht     |   4 +-
 .../css-writing-modes-3/float-vlr-005.xht     |   4 +-
 .../css-writing-modes-3/float-vlr-007.xht     |   4 +-
 .../css-writing-modes-3/float-vlr-009.xht     |   4 +-
 .../css-writing-modes-3/float-vlr-011.xht     |   4 +-
 .../css-writing-modes-3/float-vlr-013.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-002.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-004.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-006.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-008.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-010.xht     |   4 +-
 .../css-writing-modes-3/float-vrl-012.xht     |   4 +-
 ...ight-width-inline-non-replaced-vlr-003.xht |   4 +-
 .../margin-collapse-vlr-003.xht               |   4 +-
 .../margin-collapse-vlr-009.xht               |   4 +-
 .../margin-collapse-vlr-011.xht               |   4 +-
 .../margin-collapse-vlr-015.xht               |   4 +-
 .../margin-collapse-vlr-017.xht               |   4 +-
 .../margin-collapse-vlr-025.xht               |   4 +-
 .../margin-collapse-vlr-031.xht               |   4 +-
 .../margin-collapse-vlr-035.xht               |   4 +-
 .../margin-collapse-vlr-037.xht               |   4 +-
 .../margin-collapse-vrl-002.xht               |   4 +-
 .../margin-collapse-vrl-008.xht               |   4 +-
 .../margin-collapse-vrl-010.xht               |   4 +-
 .../margin-collapse-vrl-014.xht               |   4 +-
 .../margin-collapse-vrl-016.xht               |   4 +-
 .../margin-collapse-vrl-024.xht               |   4 +-
 .../margin-collapse-vrl-030.xht               |   4 +-
 .../margin-collapse-vrl-034.xht               |   4 +-
 .../margin-collapse-vrl-036.xht               |   4 +-
 .../normal-flow-overconstrained-vlr-003.xht   | 159 ++++++++
 .../normal-flow-overconstrained-vlr-005.xht   | 160 ++++++++
 .../normal-flow-overconstrained-vrl-002.xht   | 155 +++++++
 .../normal-flow-overconstrained-vrl-004.xht   | 156 +++++++
 ...ned-rel-pos-ltr-left-right-vlr-005-ref.xht |  46 +++
 ...trained-rel-pos-ltr-left-right-vlr-005.xht |  82 ++++
 ...ned-rel-pos-ltr-left-right-vrl-004-ref.xht |  51 +++
 ...trained-rel-pos-ltr-left-right-vrl-004.xht |  82 ++++
 ...ned-rel-pos-ltr-top-bottom-vlr-003-ref.xht |  51 +++
 ...trained-rel-pos-ltr-top-bottom-vlr-003.xht |  81 ++++
 ...ned-rel-pos-ltr-top-bottom-vrl-002-ref.xht |  55 +++
 ...trained-rel-pos-ltr-top-bottom-vrl-002.xht |  81 ++++
 ...ned-rel-pos-rtl-left-right-vlr-009-ref.xht |  49 +++
 ...trained-rel-pos-rtl-left-right-vlr-009.xht |  82 ++++
 ...ned-rel-pos-rtl-left-right-vrl-008-ref.xht |  54 +++
 ...trained-rel-pos-rtl-left-right-vrl-008.xht |  82 ++++
 ...ned-rel-pos-rtl-top-bottom-vlr-007-ref.xht |  50 +++
 ...trained-rel-pos-rtl-top-bottom-vlr-007.xht |  80 ++++
 ...ned-rel-pos-rtl-top-bottom-vrl-006-ref.xht |  55 +++
 ...trained-rel-pos-rtl-top-bottom-vrl-006.xht |  80 ++++
 ...ombine-upright-value-single-character.html |   1 -
 .../sizing-orthog-htb-in-vlr-001-ref.xht      |  78 ++++
 .../sizing-orthog-htb-in-vlr-001.xht          | 108 +++++
 .../sizing-orthog-htb-in-vlr-003-ref.xht      |  75 ++++
 .../sizing-orthog-htb-in-vlr-003.xht          | 108 +++++
 .../sizing-orthog-htb-in-vlr-004-ref.xht      |  44 ++
 .../sizing-orthog-htb-in-vlr-004.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-006-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vlr-006.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-007-ref.xht      |  83 ++++
 .../sizing-orthog-htb-in-vlr-007.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-008-ref.xht      |  74 ++++
 .../sizing-orthog-htb-in-vlr-008.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-009.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-010-ref.xht      |  38 ++
 .../sizing-orthog-htb-in-vlr-010.xht          | 100 +++++
 .../sizing-orthog-htb-in-vlr-011-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vlr-011.xht          | 100 +++++
 .../sizing-orthog-htb-in-vlr-012.xht          | 100 +++++
 .../sizing-orthog-htb-in-vlr-013-ref.xht      |  77 ++++
 .../sizing-orthog-htb-in-vlr-013.xht          | 108 +++++
 .../sizing-orthog-htb-in-vlr-015-ref.xht      |  73 ++++
 .../sizing-orthog-htb-in-vlr-015.xht          | 108 +++++
 .../sizing-orthog-htb-in-vlr-016-ref.xht      |  38 ++
 .../sizing-orthog-htb-in-vlr-016.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-018-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vlr-018.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-019-ref.xht      |  81 ++++
 .../sizing-orthog-htb-in-vlr-019.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-020-ref.xht      |  72 ++++
 .../sizing-orthog-htb-in-vlr-020.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-021.xht          | 104 +++++
 .../sizing-orthog-htb-in-vlr-022-ref.xht      |  38 ++
 .../sizing-orthog-htb-in-vlr-022.xht          | 100 +++++
 .../sizing-orthog-htb-in-vlr-023-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vlr-023.xht          | 100 +++++
 .../sizing-orthog-htb-in-vlr-024.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-001-ref.xht      |  78 ++++
 .../sizing-orthog-htb-in-vrl-001.xht          | 108 +++++
 .../sizing-orthog-htb-in-vrl-003-ref.xht      |  76 ++++
 .../sizing-orthog-htb-in-vrl-003.xht          | 108 +++++
 .../sizing-orthog-htb-in-vrl-004.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-006-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vrl-006.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-007-ref.xht      |  84 ++++
 .../sizing-orthog-htb-in-vrl-007.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-008-ref.xht      |  75 ++++
 .../sizing-orthog-htb-in-vrl-008.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-009.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-010-ref.xht      |  38 ++
 .../sizing-orthog-htb-in-vrl-010.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-011-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vrl-011.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-012.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-013-ref.xht      |  77 ++++
 .../sizing-orthog-htb-in-vrl-013.xht          | 108 +++++
 .../sizing-orthog-htb-in-vrl-015-ref.xht      |  75 ++++
 .../sizing-orthog-htb-in-vrl-015.xht          | 109 +++++
 .../sizing-orthog-htb-in-vrl-016.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-018-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vrl-018.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-019-ref.xht      |  74 ++++
 .../sizing-orthog-htb-in-vrl-019.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-020-ref.xht      |  74 ++++
 .../sizing-orthog-htb-in-vrl-020.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-021.xht          | 104 +++++
 .../sizing-orthog-htb-in-vrl-022-ref.xht      |  38 ++
 .../sizing-orthog-htb-in-vrl-022.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-023-ref.xht      |  37 ++
 .../sizing-orthog-htb-in-vrl-023.xht          | 100 +++++
 .../sizing-orthog-htb-in-vrl-024.xht          | 100 +++++
 .../sizing-orthog-prct-htb-in-vlr-001-ref.xht |  73 ++++
 .../sizing-orthog-prct-htb-in-vlr-001.xht     |  82 ++++
 .../sizing-orthog-prct-htb-in-vlr-002-ref.xht |  37 ++
 .../sizing-orthog-prct-htb-in-vlr-002.xht     |  78 ++++
 .../sizing-orthog-prct-htb-in-vlr-003-ref.xht |  72 ++++
 .../sizing-orthog-prct-htb-in-vlr-003.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vlr-004-ref.xht |  37 ++
 .../sizing-orthog-prct-htb-in-vlr-004.xht     |  75 ++++
 .../sizing-orthog-prct-htb-in-vlr-005-ref.xht |  79 ++++
 .../sizing-orthog-prct-htb-in-vlr-005.xht     |  83 ++++
 .../sizing-orthog-prct-htb-in-vlr-006-ref.xht |  37 ++
 .../sizing-orthog-prct-htb-in-vlr-006.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vlr-007-ref.xht |  84 ++++
 .../sizing-orthog-prct-htb-in-vlr-007.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vlr-008-ref.xht |  37 ++
 .../sizing-orthog-prct-htb-in-vlr-008.xht     |  75 ++++
 .../sizing-orthog-prct-htb-in-vrl-001-ref.xht |  74 ++++
 .../sizing-orthog-prct-htb-in-vrl-001.xht     |  83 ++++
 .../sizing-orthog-prct-htb-in-vrl-002-ref.xht |  38 ++
 .../sizing-orthog-prct-htb-in-vrl-002.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vrl-003-ref.xht |  87 ++++
 .../sizing-orthog-prct-htb-in-vrl-003.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vrl-004-ref.xht |  38 ++
 .../sizing-orthog-prct-htb-in-vrl-004.xht     |  75 ++++
 .../sizing-orthog-prct-htb-in-vrl-005-ref.xht |  73 ++++
 .../sizing-orthog-prct-htb-in-vrl-005.xht     |  83 ++++
 .../sizing-orthog-prct-htb-in-vrl-006-ref.xht |  38 ++
 .../sizing-orthog-prct-htb-in-vrl-006.xht     |  79 ++++
 .../sizing-orthog-prct-htb-in-vrl-007-ref.xht |  86 ++++
 .../sizing-orthog-prct-htb-in-vrl-007.xht     |  80 ++++
 .../sizing-orthog-prct-htb-in-vrl-008-ref.xht |  38 ++
 .../sizing-orthog-prct-htb-in-vrl-008.xht     |  75 ++++
 .../sizing-orthog-prct-vlr-in-htb-001-ref.xht |  76 ++++
 .../sizing-orthog-prct-vlr-in-htb-001.xht     |  79 ++++
 .../sizing-orthog-prct-vlr-in-htb-002-ref.xht |  45 ++
 .../sizing-orthog-prct-vlr-in-htb-002.xht     |  75 ++++
 .../sizing-orthog-prct-vlr-in-htb-003-ref.xht |  68 ++++
 .../sizing-orthog-prct-vlr-in-htb-003.xht     |  75 ++++
 .../sizing-orthog-prct-vlr-in-htb-004-ref.xht |  46 +++
 .../sizing-orthog-prct-vlr-in-htb-004.xht     |  70 ++++
 .../sizing-orthog-prct-vlr-in-htb-005-ref.xht |  72 ++++
 .../sizing-orthog-prct-vlr-in-htb-005.xht     |  78 ++++
 .../sizing-orthog-prct-vlr-in-htb-006-ref.xht |  44 ++
 .../sizing-orthog-prct-vlr-in-htb-006.xht     |  74 ++++
 .../sizing-orthog-prct-vlr-in-htb-007-ref.xht |  66 +++
 .../sizing-orthog-prct-vlr-in-htb-007.xht     |  74 ++++
 .../sizing-orthog-prct-vlr-in-htb-008-ref.xht |  45 ++
 .../sizing-orthog-prct-vlr-in-htb-008.xht     |  70 ++++
 .../sizing-orthog-prct-vrl-in-htb-001-ref.xht |  75 ++++
 .../sizing-orthog-prct-vrl-in-htb-001.xht     |  79 ++++
 .../sizing-orthog-prct-vrl-in-htb-002-ref.xht |  45 ++
 .../sizing-orthog-prct-vrl-in-htb-002.xht     |  74 ++++
 .../sizing-orthog-prct-vrl-in-htb-003-ref.xht |  68 ++++
 .../sizing-orthog-prct-vrl-in-htb-003.xht     |  75 ++++
 .../sizing-orthog-prct-vrl-in-htb-004-ref.xht |  46 +++
 .../sizing-orthog-prct-vrl-in-htb-004.xht     |  70 ++++
 .../sizing-orthog-prct-vrl-in-htb-005-ref.xht |  72 ++++
 .../sizing-orthog-prct-vrl-in-htb-005.xht     |  78 ++++
 .../sizing-orthog-prct-vrl-in-htb-006-ref.xht |  44 ++
 .../sizing-orthog-prct-vrl-in-htb-006.xht     |  74 ++++
 .../sizing-orthog-prct-vrl-in-htb-007-ref.xht |  66 +++
 .../sizing-orthog-prct-vrl-in-htb-007.xht     |  74 ++++
 .../sizing-orthog-prct-vrl-in-htb-008-ref.xht |  45 ++
 .../sizing-orthog-prct-vrl-in-htb-008.xht     |  70 ++++
 .../sizing-orthog-vlr-in-htb-001-ref.xht      |  78 ++++
 .../sizing-orthog-vlr-in-htb-001.xht          | 104 +++++
 .../sizing-orthog-vlr-in-htb-003-ref.xht      |  75 ++++
 .../sizing-orthog-vlr-in-htb-003.xht          | 104 +++++
 .../sizing-orthog-vlr-in-htb-004-ref.xht      |  48 +++
 .../sizing-orthog-vlr-in-htb-004.xht          | 100 +++++
 .../sizing-orthog-vlr-in-htb-006-ref.xht      |  45 ++
 .../sizing-orthog-vlr-in-htb-006.xht          | 100 +++++
 .../sizing-orthog-vlr-in-htb-007-ref.xht      |  69 ++++
 .../sizing-orthog-vlr-in-htb-007.xht          | 100 +++++
 .../sizing-orthog-vlr-in-htb-008-ref.xht      |  78 ++++
 .../sizing-orthog-vlr-in-htb-008.xht          | 100 +++++
 .../sizing-orthog-vlr-in-htb-009-ref.xht      |  97 +++++
 .../sizing-orthog-vlr-in-htb-009.xht          | 100 +++++
 .../sizing-orthog-vlr-in-htb-010-ref.xht      |  46 +++
 .../sizing-orthog-vlr-in-htb-010.xht          |  96 +++++
 .../sizing-orthog-vlr-in-htb-011-ref.xht      |  46 +++
 .../sizing-orthog-vlr-in-htb-011.xht          |  96 +++++
 .../sizing-orthog-vlr-in-htb-012-ref.xht      |  43 ++
 .../sizing-orthog-vlr-in-htb-012.xht          |  95 +++++
 .../sizing-orthog-vlr-in-htb-013-ref.xht      |  76 ++++
 .../sizing-orthog-vlr-in-htb-013.xht          | 103 +++++
 .../sizing-orthog-vlr-in-htb-015-ref.xht      |  72 ++++
 .../sizing-orthog-vlr-in-htb-015.xht          | 103 +++++
 .../sizing-orthog-vlr-in-htb-016-ref.xht      |  46 +++
 .../sizing-orthog-vlr-in-htb-016.xht          |  99 +++++
 .../sizing-orthog-vlr-in-htb-018-ref.xht      |  44 ++
 .../sizing-orthog-vlr-in-htb-018.xht          |  99 +++++
 .../sizing-orthog-vlr-in-htb-019-ref.xht      |  66 +++
 .../sizing-orthog-vlr-in-htb-019.xht          |  99 +++++
 .../sizing-orthog-vlr-in-htb-020-ref.xht      |  75 ++++
 .../sizing-orthog-vlr-in-htb-020.xht          |  99 +++++
 .../sizing-orthog-vlr-in-htb-021.xht          |  99 +++++
 .../sizing-orthog-vlr-in-htb-022-ref.xht      |  44 ++
 .../sizing-orthog-vlr-in-htb-022.xht          |  95 +++++
 .../sizing-orthog-vlr-in-htb-023-ref.xht      |  44 ++
 .../sizing-orthog-vlr-in-htb-023.xht          |  95 +++++
 .../sizing-orthog-vlr-in-htb-024.xht          |  95 +++++
 .../sizing-orthog-vrl-in-htb-001-ref.xht      |  78 ++++
 .../sizing-orthog-vrl-in-htb-001.xht          | 104 +++++
 .../sizing-orthog-vrl-in-htb-003-ref.xht      |  75 ++++
 .../sizing-orthog-vrl-in-htb-003.xht          | 104 +++++
 .../sizing-orthog-vrl-in-htb-004-ref.xht      |  48 +++
 .../sizing-orthog-vrl-in-htb-004.xht          | 100 +++++
 .../sizing-orthog-vrl-in-htb-006-ref.xht      |  44 ++
 .../sizing-orthog-vrl-in-htb-006.xht          | 100 +++++
 .../sizing-orthog-vrl-in-htb-007-ref.xht      |  69 ++++
 .../sizing-orthog-vrl-in-htb-007.xht          | 100 +++++
 .../sizing-orthog-vrl-in-htb-008-ref.xht      |  75 ++++
 .../sizing-orthog-vrl-in-htb-008.xht          | 100 +++++
 .../sizing-orthog-vrl-in-htb-009-ref.xht      |  97 +++++
 .../sizing-orthog-vrl-in-htb-009.xht          | 100 +++++
 .../sizing-orthog-vrl-in-htb-010-ref.xht      |  47 +++
 .../sizing-orthog-vrl-in-htb-010.xht          |  96 +++++
 .../sizing-orthog-vrl-in-htb-011-ref.xht      |  45 ++
 .../sizing-orthog-vrl-in-htb-011.xht          |  96 +++++
 .../sizing-orthog-vrl-in-htb-012-ref.xht      |  44 ++
 .../sizing-orthog-vrl-in-htb-012.xht          |  95 +++++
 .../sizing-orthog-vrl-in-htb-013-ref.xht      |  76 ++++
 .../sizing-orthog-vrl-in-htb-013.xht          | 103 +++++
 .../sizing-orthog-vrl-in-htb-015-ref.xht      |  72 ++++
 .../sizing-orthog-vrl-in-htb-015.xht          | 103 +++++
 .../sizing-orthog-vrl-in-htb-016-ref.xht      |  46 +++
 .../sizing-orthog-vrl-in-htb-016.xht          |  99 +++++
 .../sizing-orthog-vrl-in-htb-018-ref.xht      |  44 ++
 .../sizing-orthog-vrl-in-htb-018.xht          |  99 +++++
 .../sizing-orthog-vrl-in-htb-019-ref.xht      |  78 ++++
 .../sizing-orthog-vrl-in-htb-019.xht          |  99 +++++
 .../sizing-orthog-vrl-in-htb-020-ref.xht      |  73 ++++
 .../sizing-orthog-vrl-in-htb-020.xht          |  99 +++++
 .../sizing-orthog-vrl-in-htb-021.xht          |  99 +++++
 .../sizing-orthog-vrl-in-htb-022-ref.xht      |  44 ++
 .../sizing-orthog-vrl-in-htb-022.xht          |  95 +++++
 .../sizing-orthog-vrl-in-htb-023-ref.xht      |  44 ++
 .../sizing-orthog-vrl-in-htb-023.xht          |  95 +++++
 .../sizing-orthog-vrl-in-htb-024.xht          |  95 +++++
 .../support/bg-red-low-left-corn-320x320.png  | Bin 0 -> 1729 bytes
 .../support/bg-red-low-rght-corn-320x320.png  | Bin 0 -> 1700 bytes
 .../support/bg-red-upp-left-corn-320x320.png  | Bin 0 -> 1732 bytes
 .../support/bg-red-upp-rght-corn-320x320.png  | Bin 0 -> 1705 bytes
 .../support/text-orientation-012.png          | Bin 0 -> 5113 bytes
 .../text-align-vlr-003.xht                    |   4 +-
 .../text-align-vlr-005.xht                    |   4 +-
 .../text-align-vlr-007.xht                    |   4 +-
 .../text-combine-upright-value-all-001.html   |   2 +-
 ...ext-combine-upright-value-digits2-001.html |   2 +-
 .../text-orientation-mixed-vlr-100-ref.html   |   1 -
 .../text-orientation-mixed-vlr-100.html       |   1 -
 .../text-orientation-mixed-vrl-100-ref.html   |   1 -
 .../text-orientation-mixed-vrl-100.html       |   1 -
 ...text-orientation-sideways-vlr-100-ref.html |   1 -
 .../text-orientation-sideways-vlr-100.html    |   1 -
 ...text-orientation-sideways-vrl-100-ref.html |   1 -
 .../text-orientation-sideways-vrl-100.html    |   1 -
 .../text-orientation-upright-vlr-100-ref.html |   1 -
 .../text-orientation-upright-vlr-100.html     |   1 -
 .../text-orientation-upright-vrl-100-ref.html |   1 -
 .../text-orientation-upright-vrl-100.html     |   1 -
 .../ref-filled-green-100px-square.xht         |  19 -
 layout/reftests/w3c-css/received/import.log   | 326 +++++++++++++--
 layout/reftests/w3c-css/received/reftest.list | 385 ++++++++++++------
 .../selectors-dir-selector-ref.html           |  19 -
 .../w3c-css/received/selectors4/OWNERS        |   3 +
 .../focus-within-001-ref.html                 |   5 +-
 .../focus-within-001.html                     |  14 +-
 .../focus-within-002.html                     |  10 +-
 .../focus-within-003.html                     |  10 +-
 .../focus-within-004.html                     |  14 +-
 .../focus-within-005.html                     |  14 +-
 .../selectors4/focus-within-006-ref.html      |  32 ++
 .../focus-within-006.html                     |  20 +-
 .../selectors4/focus-within-007-ref.html      |  11 +
 .../received/selectors4/focus-within-007.html |  33 ++
 .../received/selectors4/focus-within-008.html |  33 ++
 .../received/selectors4/focus-within-010.html |  38 ++
 .../focus-within-shadow-001-ref.html          |   1 -
 .../focus-within-shadow-001.html              |  11 +-
 .../focus-within-shadow-002.html              |  11 +-
 .../focus-within-shadow-003.html              |  11 +-
 .../focus-within-shadow-004.html              |  11 +-
 .../focus-within-shadow-005.html              |  15 +-
 .../selectors4/focus-within-shadow-006.html   |  45 ++
 .../of-type-selectors-ref.xhtml               |   0
 .../of-type-selectors.xhtml                   |   0
 .../selector-required-ref.html                |   0
 .../selector-required.html                    |   0
 .../selectors-dir-selector-ltr-001.html       |   4 +-
 .../selectors-dir-selector-rtl-001.html       |   4 +-
 413 files changed, 20151 insertions(+), 541 deletions(-)
 create mode 100644 layout/reftests/w3c-css/received/css-conditional-3/OWNERS
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/OWNERS
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-namespaces-3/OWNERS
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/OWNERS
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/ch-unit-002.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/ch-unit-003.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/ch-unit-004.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-002-ref.html
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/OWNERS
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-left-corn-320x320.png
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-rght-corn-320x320.png
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-left-corn-320x320.png
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-rght-corn-320x320.png
 create mode 100644 layout/reftests/w3c-css/received/css-writing-modes-3/support/text-orientation-012.png
 delete mode 100644 layout/reftests/w3c-css/received/css21/reference/ref-filled-green-100px-square.xht
 delete mode 100644 layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
 create mode 100644 layout/reftests/w3c-css/received/selectors4/OWNERS
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-001-ref.html (69%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-001.html (65%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-002.html (76%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-003.html (76%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-004.html (76%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-005.html (74%)
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-006-ref.html
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-006.html (69%)
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-007-ref.html
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-007.html
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-008.html
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-010.html
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-001-ref.html (98%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-001.html (80%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-002.html (80%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-003.html (80%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-004.html (81%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/focus-within-shadow-005.html (79%)
 create mode 100644 layout/reftests/w3c-css/received/selectors4/focus-within-shadow-006.html
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/of-type-selectors-ref.xhtml (100%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/of-type-selectors.xhtml (100%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/selector-required-ref.html (100%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/selector-required.html (100%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/selectors-dir-selector-ltr-001.html (81%)
 rename layout/reftests/w3c-css/received/{selectors-4 => selectors4}/selectors-dir-selector-rtl-001.html (82%)

diff --git a/layout/reftests/w3c-css/received/css-conditional-3/OWNERS b/layout/reftests/w3c-css/received/css-conditional-3/OWNERS
new file mode 100644
index 000000000000..28effb156b2e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/OWNERS
@@ -0,0 +1,2 @@
+@dbaron
+@frivoal
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/OWNERS b/layout/reftests/w3c-css/received/css-multicol-1/OWNERS
new file mode 100644
index 000000000000..ec8236e19b90
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/OWNERS
@@ -0,0 +1 @@
+@frivoal
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-005.xht
new file mode 100644
index 000000000000..63c203eb57c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-005.xht
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-count (basic)</title>
+<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
+<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-count"/>
+<style type="text/css">
+div {
+  margin: 1em auto;
+  background: yellow;
+  border: thin solid black;
+  width: 600px;
+  -moz-columns: 3;
+  -moz-column-gap: 0;
+  -moz-column-rule: none;
+}
+</style>
+</head>
+<body>
+<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-006.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-006.xht
new file mode 100644
index 000000000000..d2187724bf09
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-006.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
+<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
+<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-count"/>
+<style type="text/css">
+div {
+  margin: 1em auto;
+  background: yellow;
+  border: thin solid black;
+  width: 600px;
+  -moz-column-count: 3;
+  -moz-column-gap: 0;
+  -moz-column-rule: none;
+}
+</style>
+</head>
+<body>
+<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-007.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-007.xht
new file mode 100644
index 000000000000..a8849133086a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-007.xht
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CSS Multi-column Layout Test: -moz-columns as -moz-column-width (basic)</title>
+<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
+<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/>
+<style type="text/css">
+div {
+  margin: 1em auto;
+  background: yellow;
+  border: thin solid black;
+  width: 600px;
+  -moz-columns: 200px;
+  -moz-column-gap: 0;
+  -moz-column-rule: none;
+}
+</style>
+</head>
+<body>
+<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-008.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-008.xht
new file mode 100644
index 000000000000..359d18e21585
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-008.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
+<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
+<link rel="match" href="reference/multicol-basic-005-ref.xht"/>
+<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/>
+<style type="text/css">
+div {
+  margin: 1em auto;
+  background: yellow;
+  border: thin solid black;
+  width: 600px;
+  -moz-column-width: 200px;
+  -moz-column-gap: 0;
+  -moz-column-rule: none;
+}
+</style>
+</head>
+<body>
+<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-005-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-005-ref.xht
new file mode 100644
index 000000000000..8d929ca57bea
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-005-ref.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol-000</title>
+<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/>
+<style type="text/css">
+div {
+  margin: 1em auto;
+  background: yellow;
+  border: thin solid black;
+  width: 600px;
+  -moz-columns: 3;
+  -moz-column-gap: 0;
+  -moz-column-rule: none;
+}
+</style>
+</head>
+<body>
+<div>This multicol element should have a width of 600 pixels and the content should be flowed into three -moz-columns with no gap or rule between them.</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/OWNERS b/layout/reftests/w3c-css/received/css-namespaces-3/OWNERS
new file mode 100644
index 000000000000..69a8271b59e5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/OWNERS
@@ -0,0 +1,3 @@
+@plinss
+@dbaron
+@fantasai
diff --git a/layout/reftests/w3c-css/received/css-values-3/OWNERS b/layout/reftests/w3c-css/received/css-values-3/OWNERS
new file mode 100644
index 000000000000..f7a41292bee6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/OWNERS
@@ -0,0 +1,6 @@
+@frivoal
+@dbaron
+@FremyCompany
+@plinss
+@tabatkins
+@fantasai
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
index 8bb0b893c5d8..83374e7bb291 100644
--- a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
@@ -8,30 +8,30 @@
 <meta name="assert" content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
 <style>
 span {
-	background: green;
-	color: green;
-	top: 0; bottom: 0;
-	position: absolute;
+    background: green;
+    color: green;
+    top: 0; bottom: 0;
+    position: absolute;
 }
 div {
-	background: red;
-	color: red;
-	position: relative;
-	height: 10ch;
-	width: 5ch;
-	float: left;
+    background: red;
+    color: red;
+    position: relative;
+    height: 10ch;
+    width: 5ch;
+    float: left;
 }
 
 div + div {
-	width: auto;
+    width: auto;
 }
 
 div + div span {
-	width: 5ch;
+    width: 5ch;
 }
 </style>
 <body>
-  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
-  <div><span>00000</span></div>
-  <div><span></span>00000</div>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div><span>00000</span></div>
+    <div><span></span>00000</div>
 </body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-002.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-002.html
new file mode 100644
index 000000000000..0f4fcb371ce7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test: the ch unit in vertical orientation</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation">
+<link rel="match" href="reference/ch-unit-002-ref.html">
+<meta name="assert" content="In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
+<style>
+span {
+    background: green;
+    color: green;
+    left: 0; right: 0;
+    position: absolute;
+}
+div {
+    background: red;
+    color: red;
+    position: relative;
+    height: 5ch;
+    width: 10ch;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+
+div + div {
+    height: auto;
+}
+
+div + div span {
+    height: 5ch;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div><span>00000</span></div>
+    <div><span></span>00000</div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-003.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-003.html
new file mode 100644
index 000000000000..ee1e7cc06379
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-003.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ch unit</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
+<meta name="flags" content="">
+<link rel="match" href="reference/ch-unit-001-ref.html">
+<meta name="assert" content="In vertical mixed, The ch unit is equal to the used horizontal advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
+<style>
+span {
+    background: green;
+    color: green;
+    left: 0; right: 0;
+    position: absolute;
+}
+div {
+    background: red;
+    color: red;
+    position: relative;
+    height: 5ch;
+    width: 10ch;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+}
+
+div + div {
+    height: auto;
+}
+
+div + div span {
+    height: 5ch;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div><span>00000</span></div>
+    <div><span></span>00000</div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-004.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-004.html
new file mode 100644
index 000000000000..914cec9f6498
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ch unit</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
+<meta name="flags" content="">
+<link rel="match" href="reference/ch-unit-001-ref.html">
+<meta name="assert" content="In vertical sideways, The ch unit is equal to the used horizontal advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
+<style>
+span {
+    background: green;
+    color: green;
+    left: 0; right: 0;
+    position: absolute;
+}
+div {
+    background: red;
+    color: red;
+    position: relative;
+    height: 5ch;
+    width: 10ch;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+}
+
+div + div {
+    height: auto;
+}
+
+div + div span {
+    height: 5ch;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div><span>00000</span></div>
+    <div><span></span>00000</div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
index 499d43094001..163ad8e6c473 100644
--- a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
@@ -2,17 +2,10 @@
 <meta charset="utf-8">
 <title>CSS Values and Units Test Reference File</title>
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
-<meta name="flags" content="">
 <style>
-div {
-	background: green;
-	height: 10ch;
-	width: 10ch;
-	float: left;
-}
-
+svg { width: 10ch; }
 </style>
 <body>
-  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
-  <div></div>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
 </body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-002-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-002-ref.html
new file mode 100644
index 000000000000..ee6ce1595d76
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+svg {
+    width: 10ch;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/OWNERS b/layout/reftests/w3c-css/received/css-writing-modes-3/OWNERS
new file mode 100644
index 000000000000..aed35ccee2ef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/OWNERS
@@ -0,0 +1,8 @@
+@kojiishi
+@fantasai
+@hshiozawa
+@myakura
+@snsk
+@r12a
+@plinss
+@upsuper
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht
index b2bf6f30abb1..ad310d1019ea 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'left' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -89,9 +89,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht
index 66d046522ba7..2d18cea21faa 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht
@@ -94,9 +94,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht
index 172b674c6358..2bcea77f2452 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht
index 7acbea7fa030..f37db8d0695c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'right' are 'auto' and 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'ltr' must set left to static position and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -88,9 +88,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
@@ -104,4 +102,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-013.xht
index 00b45ee57bad..9ad8ff8138b4 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-013.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-013.xht
@@ -93,9 +93,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht
index 83f98edd3bf0..0a0886feb43c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht
index 515c258c268e..f359a844e8c1 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht
index 52836b01dd49..6849449c6831 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'left' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -89,9 +89,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
@@ -105,4 +103,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004.xht
index 400216ea6e5d..8e10a2220b58 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004.xht
@@ -94,9 +94,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht
index bbcfe2ed116c..8161e71c37e1 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'width' are 'auto' and 'right' is not 'auto') whose containing block is the initial containing block must set width to shrink-to-fit and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht
index 294f9578753e..81f48c5132d7 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'ltr' must set left to static position and then solve for 'right'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -88,9 +88,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
@@ -104,4 +102,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-012.xht
index ebae637d527a..60275c210ce0 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-012.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-012.xht
@@ -93,9 +93,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht
index b59353d3d6e3..bf6fac43e261 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht
index 983e0ae33f6e..7d0a3ad98d22 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' is 'auto', 'width' and 'right' are not 'auto') whose containing block is the initial containing block must solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
@@ -43,4 +43,4 @@
   <div id="red-overlapped-reference"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-018.xht
index 8b9b64d0ed5a..d4e76334b764 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-018.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-018.xht
@@ -10,7 +10,7 @@
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
   <link rel="match" href="background-position-vrl-018-ref.xht" />
 
-  <meta content="image interact" name="flags" />
+  <meta content="image" name="flags" />
   <meta content="This test checks that 'background-position: left top' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
 
   <style type="text/css"><![CDATA[
@@ -64,4 +64,4 @@
   <div id="reference-overlapping-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-020.xht
index ed72b9cb92c5..32346f1dd041 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-020.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-020.xht
@@ -10,7 +10,7 @@
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
   <link rel="match" href="background-position-vrl-018-ref.xht" />
 
-  <meta content="image interact" name="flags" />
+  <meta content="image" name="flags" />
   <meta content="This test checks that 'background-position: left center' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
 
   <style type="text/css"><![CDATA[
@@ -64,4 +64,4 @@
   <div id="reference-overlapping-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-022.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-022.xht
index 2df7033fb848..a985dc8a31e9 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-022.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/background-position-vrl-022.xht
@@ -10,7 +10,7 @@
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
   <link rel="match" href="background-position-vrl-018-ref.xht" />
 
-  <meta content="image interact" name="flags" />
+  <meta content="image" name="flags" />
   <meta content="This test checks that 'background-position: left bottom' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
 
   <style type="text/css"><![CDATA[
@@ -64,4 +64,4 @@
   <div id="reference-overlapping-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-002.xht
index 9d514985cdd4..834a61912c8e 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that the baseline-alignment of an empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
@@ -48,4 +48,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-003.xht
index 1e7ee3b5acdf..ed20f5ac4730 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that the baseline-alignment of an empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
@@ -48,4 +48,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-004.xht
index 24a88f3e7c0d..7d1c1ea2fd0c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that the baseline-alignment of a non-empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
@@ -46,4 +46,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-005.xht
index 3262242b2db9..3d2a3e835672 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/baseline-inline-non-replaced-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" title="4.3 Atomic Inline Baselines" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that the baseline-alignment of a non-empty inline-block box in the line box with 'writing-mode' set to 'vertical-rl' is 'central' and not 'alphabetic'." name="assert" />
@@ -46,4 +46,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-003.xht
index bd685e4c294d..9efcd25fe7f6 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-003.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -66,4 +66,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-005.xht
index d9795ca47300..893113bdd6b3 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-005.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -66,4 +66,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-007.xht
index a95e665c8304..2c2f4a2f6c6b 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-007.xht
@@ -14,7 +14,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -148,4 +148,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-009.xht
index f73cc8964853..7e66cfd3197c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-009.xht
@@ -14,7 +14,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -149,4 +149,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-011.xht
index d0dfec839987..79973e6723dd 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-011.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-011.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -143,4 +143,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-013.xht
index 04c05dd6ed5b..415995a156f0 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-013.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vlr-013.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that, in border-collapsing model, when 'border-style' values and 'border-width' values are identical, then the 'border-color' set on a cell wins over the 'border-color' set on a row (5th table), the 'border-color' set on a cell wins over the 'border-color' set on a row group (tfoot in 4th table, thead in 3rd table, tbody in 2nd table) and the 'border-color' set on a cell wins over the 'border-color' set on a table element (1st table)." name="assert" />
@@ -184,4 +184,4 @@
   <div id="reference-overlapped-red"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-002.xht
index a322a56a351c..a0818271da03 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-002.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -66,4 +66,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-004.xht
index 69d01d19a3f2..e0e2200d2975 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-004.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -66,4 +66,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-006.xht
index ae88491cb17b..aa1f85c1fd71 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-006.xht
@@ -14,7 +14,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -148,4 +148,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-008.xht
index 63aa0f4afd52..badca8a57629 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-008.xht
@@ -14,7 +14,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -149,4 +149,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-010.xht
index f9efac176b03..e86242d5507b 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-010.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-010.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="When two adjacent cells have the same 'border-width' value and the same 'border-style' value in a 'border-collapse: collapse' table, then the color of the border of the cell closest to line-left side wins (if the table's 'direction' is 'ltr'; line-right side, if it is 'rtl') and the color of the border of the cell closest to block-start side wins." name="assert" />
@@ -143,4 +143,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-012.xht
index ac2b22f54692..5fd041a812ad 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-012.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-012.xht
@@ -9,7 +9,7 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that, in border-collapsing model, when 'border-style' values and 'border-width' values are identical, then the 'border-color' set on a cell wins over the 'border-color' set on a row (5th table), the 'border-color' set on a cell wins over the 'border-color' set on a row group (tfoot in 4th table, thead in 3rd table, tbody in 2nd table) and the 'border-color' set on a cell wins over the 'border-color' set on a table element (1st table)." name="assert" />
@@ -184,4 +184,4 @@
   <div id="reference-overlapped-red"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-003.xht
index a1e14814ef38..0bf8c75d2f6d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-lr table, then the caption is placed at the block-start side of the table, which is on the lefthand side of such table." name="assert" />
@@ -66,4 +66,4 @@
   <div id="reference-overlapped-red"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-005.xht
index 96fb5f1ccf4e..91c488f2a1bd 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-lr table, then the caption is placed at the block-end side of the table, which is on the righthand side of such table." name="assert" />
@@ -65,4 +65,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-002.xht
index 87c935780db3..4dfc3050d32c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that when 'caption-side' is set to 'top' in a vertical-rl table, then the caption is placed at the block-start side of the table, which is on the righthand side of such table." name="assert" />
@@ -65,4 +65,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-004.xht
index 0ecf984d5345..edcf7e28daa7 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/caption-side-vrl-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-direction-layout" title="7.4. Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that when 'caption-side' is set to 'bottom' in a vertical-rl table, then the caption is placed at the block-end side of the table, which is on the lefthand side of such table." name="assert" />
@@ -65,4 +65,4 @@
   </table>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-003.xht
index b5424d245451..377907ad9b09 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that contiguous floated border-collapsing tables in a 'vertical-lr' context do not overlap." name="assert" />
@@ -33,9 +33,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
 
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-005.xht
index 054a70fdd114..032640abf427 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that contiguous floated non-border-collapsing tables in a 'vertical-lr' context do not overlap." name="assert" />
@@ -34,9 +34,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
 
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-007.xht
index d2777b84998b..34faf6446985 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-007.xht
@@ -13,7 +13,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-lr' are not substracted by the amount of their borders. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
@@ -51,9 +51,7 @@
       background-image: url("support/margin-collapse-2em-space-wm-vert.png");
       background-repeat: no-repeat;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-009.xht
index ca7be2fbaa6c..39fd43e0382c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vlr-009.xht
@@ -13,7 +13,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-lr' are not substracted by the amount of their horizontal padding. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
@@ -52,9 +52,7 @@
       background-image: url("support/margin-collapse-2em-space-wm-vert.png");
       background-repeat: no-repeat;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-002.xht
index ac0e310235b2..0406d70562f2 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that contiguous floated border-collapsing tables in a 'vertical-rl' context do not overlap." name="assert" />
@@ -33,9 +33,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
 
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-004.xht
index 62ac22a114f5..37f037ce285e 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that contiguous floated non-border-collapsing tables in a 'vertical-rl' context do not overlap." name="assert" />
@@ -34,9 +34,7 @@
     {
       background-color: red;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
 
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-006.xht
index e9061d5e69af..d973517806a9 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-006.xht
@@ -13,7 +13,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-rl' are not substracted by the amount of their borders. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
@@ -51,9 +51,7 @@
       background-image: url("support/margin-collapse-2em-space-wm-vert.png");
       background-repeat: no-repeat;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-008.xht
index 3450c7bf33b4..625f2c4e9587 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/contiguous-floated-table-vrl-008.xht
@@ -13,7 +13,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that horizontal margins existing between contiguous floated tables with writing-mode set to 'vertical-rl' are not substracted by the amount of their horizontal padding. In this test, there should be an horizontal gap of 50px separating both tables. Margins between 2 floated boxes do not collapse." name="assert" />
@@ -52,9 +52,7 @@
       background-image: url("support/margin-collapse-2em-space-wm-vert.png");
       background-repeat: no-repeat;
       height: 100px;
-      position: relative;
       width: 100px;
-      z-index: -1;
     }
   ]]></style>
  </head>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-001.xht
index 6c43e1ea833f..1df603948831 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-001.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-001.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered." name="assert" />
@@ -47,4 +47,4 @@
   <div id="reference-overlapped-red"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-002.xht
index caa9a529b740..93811d4794b7 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/different-block-flow-dir-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="" name="flags" />
   <meta content="This test checks that if an inline box has a different block flow direction than its containing block then its display computes to 'inline-block' in which case its specified width and specified height are not ignored and have to be rendered." name="assert" />
@@ -53,4 +53,4 @@
   <div id="reference-overlapped-red"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/direction-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/direction-vlr-005.xht
index 169a82eac2a8..731b246af67d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/direction-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/direction-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-directions" title="6.2 Flow-relative Directions" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that when a block box has 'direction' set to 'ltr' in a vertical writing-mode, then inlines boxes are aligned from line-left to line-right." name="assert" />
@@ -44,4 +44,4 @@
   <div>T</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-003.xht
index 9503987aaba3..dc30627cea97 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-005.xht
index 450b801d69ed..b9a3b3a0028e 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-007.xht
index 654ffebd104f..9f4b5c888f41 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-007.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
@@ -56,4 +56,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-009.xht
index 5e8fd54e62ce..77ea726e37e2 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vlr-009.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
@@ -63,4 +63,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-002.xht
index 160deecf5487..49037c83c637 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-004.xht
index 7393f3310296..7c7f07bfa584 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-006.xht
index a6796b664037..50541bf89884 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-006.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
@@ -56,4 +56,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-008.xht
index dd23fe10cfd2..f1eb3e7a5834 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-clear-vrl-008.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="image" name="flags" />
   <meta content="This test checks that a block container box which has floats will not extend its logical height (it will appear to not be aware of its floats) unless it has a clearing block. This test is important for CSS columnar layout page based on floats." name="assert" />
@@ -63,4 +63,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vlr-011.xht
index 129d197e9501..78297053fbd3 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vlr-011.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vlr-011.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks the flow of contiguous left-floated boxes with 'writing-mode' set to 'vertical-lr'." name="assert" />
@@ -56,4 +56,4 @@
   <div class="floated-left">wxyzz</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vrl-010.xht
index 5b2305f5a8d6..ee02f70c9ed2 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vrl-010.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-contiguous-vrl-010.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks the flow of contiguous left-floated boxes with 'writing-mode' set to 'vertical-rl'." name="assert" />
@@ -56,4 +56,4 @@
   <div class="floated-left">wxyzz</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht
new file mode 100644
index 000000000000..5735d654bfd3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  span
+    {
+      position: relative;
+      top: 40px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated left</div>
+    <span>VLR parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht
new file mode 100644
index 000000000000..690dc7805454
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in vertical-lr context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-lft-orthog-htb-in-vlr-002-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the horizontal position of an orthogonal floated left block box inside a vertical-lr parent. The orthogonal floated left block box must be put as far to the left as possible inside the vertical-lr line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VLR parent
+    <div id="orthog-htb-float-left">HTB floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht
new file mode 100644
index 000000000000..7147ad1298b4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  span
+    {
+      position: relative;
+      top: 40px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated left</div>
+    <span>VRL parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht
new file mode 100644
index 000000000000..d11a2f9fbe2f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in vertical-rl context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-lft-orthog-htb-in-vrl-002-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the horizontal position of an orthogonal floated left block box inside an vertical-rl parent. The orthogonal floated left block box must be put as far to the right as possible inside the vertical-rl line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VRL parent
+    <div id="orthog-htb-float-left">HTB floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht
new file mode 100644
index 000000000000..f6776a093e14
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+
+  span
+    {
+      left: 40px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VLR floated left</div>
+    <span>HTB parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht
new file mode 100644
index 000000000000..d760b495bb4d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-lft-orthog-vlr-in-htb-002-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the vertical position of an orthogonal floated left block box inside an horizontal-tb parent. The orthogonal floated left block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vlr-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vlr-float-left">VLR floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht
new file mode 100644
index 000000000000..5b305e81a3af
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2016-12-14T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      left: 40px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VRL floated left</div>
+    <span>HTB parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht
new file mode 100644
index 000000000000..ac4462c3ffc6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated left in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2016-11-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-lft-orthog-vrl-in-htb-002-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the vertical position of an orthogonal floated left block box inside an horizontal-tb parent. The orthogonal floated left block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vrl-float-left
+    {
+      background-color: blue;
+      color: white;
+      float: left;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vrl-float-left">VRL floated left</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht
new file mode 100644
index 000000000000..1a27722b5cd8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      bottom: 16px;
+      color: white;
+      left: 16px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated right</div>
+    <span>VLR parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht
new file mode 100644
index 000000000000..e11aad429e37
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in vertical-lr context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-rgt-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the horizontal position of an orthogonal floated right block box inside a vertical-lr parent. The orthogonal floated right block box must be put as far to the left as possible inside the vertical-lr line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VLR parent
+    <div id="orthog-htb-float-right">HTB floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht
new file mode 100644
index 000000000000..76563a576c31
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-horiz
+    {
+      background-color: blue;
+      bottom: 16px;
+      color: white;
+      position: absolute;
+      right: 16px;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">
+    <div id="orthog-horiz">HTB floated right</div>
+    <span>VRL parent</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht
new file mode 100644
index 000000000000..89cde7b4c0c7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in vertical-rl context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-rgt-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the horizontal position of an orthogonal floated right block box inside a vertical-rl parent. The orthogonal floated right block box must be put as far to the right as possible inside the vertical-rl line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  div#vertical-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-htb-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="vertical-parent">VRL parent
+    <div id="orthog-htb-float-right">HTB floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht
new file mode 100644
index 000000000000..e690a816f582
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VLR floated right</div>
+    HTB parent
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht
new file mode 100644
index 000000000000..09e5979a0f3d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-rgt-orthog-vlr-in-htb-003-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the vertical position of an orthogonal floated right block box inside an horizontal-tb parent. The orthogonal floated right block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vlr-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vlr-float-right">VLR floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht
new file mode 100644
index 000000000000..d22bed155eb7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <meta name="DC.date.created" content="2016-12-14T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vert
+    {
+      background-color: blue;
+      color: white;
+      right: 16px;
+      position: absolute;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">
+    <div id="orthog-vert">VRL floated right</div>
+    HTB parent
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht
new file mode 100644
index 000000000000..203c16e865ae
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: orthogonal floated right in horizontal-tb context</title>
+
+  <meta name="DC.date.created" content="2016-11-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-17T09:54:03+11:00" scheme="W3CDTF" />
+
+  <!--
+  Inspired by the test in
+  http://lists.w3.org/Archives/Public/www-style/2016Nov/0044.html
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#auto-multicol" title="7.3.2 Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="float-rgt-orthog-vrl-in-htb-003-ref.xht" />
+
+  <meta content="" name="flags" />
+  <meta content="This test checks the vertical position of an orthogonal floated right block box inside an horizontal-tb parent. The orthogonal floated right block box must be put as high as possible inside the horizontal-tb line box." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  div#horiz-parent
+    {
+      border: orange solid 8px;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+    }
+
+  div#orthog-vrl-float-right
+    {
+      background-color: blue;
+      color: white;
+      float: right;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="horiz-parent">HTB parent
+    <div id="orthog-vrl-float-right">VRL floated right</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-003.xht
index e0e1645eb657..4c34c0581ff5 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -55,4 +55,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-005.xht
index ae39427c2af1..4badfbb6944d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -60,4 +60,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-007.xht
index 998dae2e8d5c..8fc31de16e9f 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-007.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -70,4 +70,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-009.xht
index 3b71c89df5f3..7003f4f24b54 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vlr-009.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' applying on logical width must not reduce content but size to fit to its content. In this test, 'L' and 'R' glyphs must be rendered." name="assert" />
@@ -60,4 +60,4 @@
   <div id="reference-red-overlapped"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-002.xht
index 5d862c650137..ad7bab89dc26 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -55,4 +55,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-004.xht
index 5f8a9c553995..b625a24eaaa4 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -60,4 +60,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-006.xht
index 1d5bccf15355..bbe0007f179f 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-006.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' width is applied on logical width (measure)." name="assert" />
@@ -70,4 +70,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-008.xht
index 8868d1c230f2..0acc39ba3108 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-008.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' applying on logical width must not reduce content but size to fit to its content. In this test, 'L' and 'R' glyphs must be rendered." name="assert" />
@@ -60,4 +60,4 @@
   <div id="reference-red-overlapped"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht
index 5b73c90046e5..087908122e03 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that 'shrink-to-fit' rule (CSS2.1, §10.3.5) is applied onto logical width in vertical writing-modes. This test thoroughly checks systematically the 16 combinations of 'writing-mode: vertical-rl', 'writing-mode: vertical-lr', with 'float: left', with 'float: right' and with left and/or right border(s). Not tested here is 'padding-left' and 'padding-right'." name="assert" />
@@ -138,4 +138,4 @@
   <div id="reference-overlapped-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-003.xht
index 073af2630e3c..398ad81572e4 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-right side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-005.xht
index c5341de7d1a4..952d03ab5031 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-right side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-007.xht
index fbee3e374453..09090356caa8 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-007.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-left side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-009.xht
index 5f037692da89..d75cf8f753ad 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-009.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-lr' will be floated at the line-left side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-011.xht
index c545a2adc32c..7c13c7cbd8e8 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-011.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-011.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-013.xht
index eeb4f7ab4f98..74ab38644932 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-013.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vlr-013.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-lr' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-002.xht
index c564655e5226..bfad80eda428 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-right side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-004.xht
index 0738774ace15..371b0a7bcf7c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-004.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-004.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-right side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-006.xht
index db3a3795046c..8e4c454c471d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-006.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-006.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-left side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-008.xht
index f31d24cb4afe..b22333b93b97 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-008.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box in a containing block with 'writing-mode' set to 'vertical-rl' will be floated at the line-left side of its line box." name="assert" />
@@ -47,4 +47,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-010.xht
index f5419a4f7ead..d9ac9c326fab 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-010.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-010.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-012.xht
index 2969087d2a45..815a95deee43 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-012.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/float-vrl-012.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that a floated left box and a floated right box in a containing block with 'writing-mode' set to 'vertical-rl' will be respectively floated at the line-left side of its line box and floated at line-right of its line box." name="assert" />
@@ -53,4 +53,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht
index fc196cdf09ef..53650b482ee0 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht
@@ -10,7 +10,7 @@
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
   <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-width" title="10.3.1 Inline, non-replaced elements" />
   <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-non-replaced" title="10.6.1 Inline, non-replaced elements" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem" name="flags" />
   <meta content="This test checks that height and width declarations do not apply to inline non-replaced elements in vertical writing-modes." name="assert" />
@@ -61,4 +61,4 @@
   <div id="overlapping-green"></div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-003.xht
index eb2a2df8c213..e19c6583ad1b 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -71,4 +71,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-009.xht
index b6580f3fd158..1471a1ec6b93 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-009.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-009.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -71,4 +71,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-011.xht
index 0a460c87ffaa..f385450e2f1f 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-011.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-011.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -72,4 +72,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-015.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-015.xht
index 1035be4c6463..7e5c3afdf784 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-015.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-015.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -73,4 +73,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-017.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-017.xht
index 0bb1ccfc02dc..3b9642ae6497 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-017.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-017.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted and modified from
@@ -71,4 +71,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-025.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-025.xht
index 6350b4e96e71..fe6ab77b62a3 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-025.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-025.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -62,4 +62,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-031.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-031.xht
index 0812ce19bd52..568f1a741a65 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-031.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-031.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta name="assert" content="This test checks that horizontal margins of boxes can collapse through a sibling box whose left and right margins collapse in 'vertical-lr' writing-mode." />
@@ -66,4 +66,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-035.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-035.xht
index 28f01a6c8364..277c427b6b4a 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-035.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-035.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -69,4 +69,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-037.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-037.xht
index 4019e6f070fd..d14facd893a5 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-037.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vlr-037.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   "
@@ -73,4 +73,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-002.xht
index b5fb90544f06..52c795cd6855 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-002.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-002.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -71,4 +71,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-008.xht
index 453054321e6e..f5eb605d18aa 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-008.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-008.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -71,4 +71,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-010.xht
index 26120c9939ac..df6d29a2af93 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-010.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-010.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -72,4 +72,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-014.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-014.xht
index 23e993343eb1..0878c2a9e9bb 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-014.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-014.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -73,4 +73,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-016.xht
index 0ae76db7410f..ee249760ad08 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-016.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-016.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted and modified from
@@ -70,4 +70,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-024.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-024.xht
index 00be99f015fc..168200714e97 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-024.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-024.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -62,4 +62,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-030.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-030.xht
index 0bd12c23fbc0..84355f28f21d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-030.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-030.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta name="assert" content="This test checks that horizontal margins of boxes can collapse through a sibling box whose left and right margins collapse in 'vertical-rl' writing-mode." />
@@ -66,4 +66,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-034.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-034.xht
index d52e7cb3c7bd..57dc9df731e6 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-034.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-034.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   Test adapted from
@@ -69,4 +69,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-036.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-036.xht
index 741161cdea3a..bc862b48808f 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-036.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/margin-collapse-vrl-036.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <!--
   "
@@ -73,4 +73,4 @@
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht
new file mode 100644
index 000000000000..6dfd1519343f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht
@@ -0,0 +1,159 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: ltr' in vertical-lr (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-007-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-bottom) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-3row-320x320.png");
+      background-position: 198px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         16px (p's margin-left)
+     +
+        246px (img's width)
+     +
+         16px (p's margin-right)
+      ========
+        278px
+     -
+         80px (1 column of 80px)
+      ========
+        198px
+      */
+      background-repeat: no-repeat;
+      direction: ltr;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: -160px;
+
+      margin-left: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+    -160px : margin-bottom
+   ========================
+      80px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-bottom' is ignored and the value is calculated so as to make the equality true
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+   (solve) : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht
new file mode 100644
index 000000000000..094be29fda62
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht
@@ -0,0 +1,160 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: rtl' in vertical-lr (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vlr-013-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-2row-320x320.png");
+      background-position: 198px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         16px (p's margin-left)
+     +
+        246px (img's width)
+     +
+         16px (p's margin-right)
+      ========
+        278px
+     -
+         80px (1 column of 80px)
+      ========
+        198px
+      */
+      background-repeat: no-repeat;
+      direction: rtl;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      direction: ltr;
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: 160px;
+
+      margin-left: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     400px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true
+
+   (solve) : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht
new file mode 100644
index 000000000000..ab5f1970aab3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht
@@ -0,0 +1,155 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: ltr' in vertical-rl (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-006-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-bottom) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-3row-320x320.png");
+      background-position: -152px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         8px (body's margin-left)
+      -
+        80px (4th column width)
+      -
+        80px (3rd column width)
+      ========
+      -152px
+      */
+      background-repeat: no-repeat;
+      direction: ltr;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: -160px;
+
+      margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+    -160px : margin-bottom
+   ========================
+      80px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-bottom' is ignored and the value is calculated so as to make the equality true
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+   (solve) : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-bottom value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht
new file mode 100644
index 000000000000..a1d188dda622
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht
@@ -0,0 +1,156 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: non-replaced block in normal flow with 'direction: rtl' in vertical-rl (overconstrained)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
+  <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
+
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." />
+
+  <!--
+  "
+  the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
+  "
+  7.4 Flow-Relative Mappings
+  http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
+
+  "
+  'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
+
+  If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
+  "
+  CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
+  http://www.w3.org/TR/CSS21/visudet.html#blockwidth
+  -->
+
+  <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body#containing-block
+    {
+      background-image: url("support/bg-red-3col-2row-320x320.png");
+      background-position: -152px 8px;
+      /* first value represents the horizontal position and the second represents the vertical position */
+
+      /*
+         8px (body's margin-left)
+      -
+        80px (4th column width)
+      -
+        80px (3rd column width)
+      ========
+      -152px
+      */
+      background-repeat: no-repeat;
+      direction: rtl;
+      height: 320px;
+      margin: 8px;
+    }
+
+  p
+    {
+      direction: ltr;
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+
+  div
+    {
+      background-color: green;
+      margin-top: 160px;
+      border-top: green solid 20px;
+      padding-top: 20px;
+      height: 0px;
+      padding-bottom: 20px;
+      border-bottom: green solid 20px;
+      margin-bottom: 160px;
+
+      margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
+      width: 80px;
+    }
+
+/*
+"
+Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+"
+7.1 Principles of Layout in Vertical Writing Modes
+http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
+
+So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
+
+'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
+
+So:
+
+     160px : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     400px : while the height of containing block of div is 320px
+
+So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true
+
+   (solve) : margin-top
+  +
+      20px : border-top-width
+  +
+      20px : padding-top
+  +
+       0px : height
+  +
+      20px : padding-bottom
+  +
+      20px : border-bottom-width
+  +
+     160px : margin-bottom
+   ========================
+     320px : height of containing block
+
+And so computed margin-top value must be 80px .
+*/
+
+  ]]></style>
+
+ </head>
+
+ <body id="containing-block">
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
new file mode 100644
index 000000000000..56825efe5c67
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      margin: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      margin-left: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
new file mode 100644
index 000000000000..0636d191f8c1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'left' and 'right' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'left' and 'right' are not 'auto' in a vertical-lr context, then the value of 'left' wins and 'right' becomes -'left'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-upp-left-corn-320x320.png") no-repeat 358px 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 1st row and 2nd column
+               (and not 1st column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-upp-left-corn-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'left' should win, 'right' should be ignored and the used right value should become -'left'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
new file mode 100644
index 000000000000..50f15e386864
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      margin: 8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      margin-right: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
new file mode 100644
index 000000000000..23cb1ead7e59
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'left' and 'right' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'left' and 'right' are not 'auto' in a vertical-rl context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-upp-rght-corn-320x320.png") no-repeat calc(100% - 358px) 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 1st row
+               and in 3rd column (not in 4th column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-upp-rght-corn-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'right' should win, 'left' should be ignored and the used left value should become -'right'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
new file mode 100644
index 000000000000..e141b6e40254
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      left: 16px;
+      position: absolute;
+      top: -8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      left: 16px;
+      position: relative;
+      top: 80px;
+    }
+
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
new file mode 100644
index 000000000000..75d123c8538f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'top' and 'bottom' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'top' and 'bottom' are not 'auto' in a vertical-lr context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-1col-2row-320x320.png") no-repeat 278px 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the left edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 2nd row in bg-red-1col-2row-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'top' should win, 'bottom' should be ignored and the used bottom value should become -'top'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
new file mode 100644
index 000000000000..aed33af61503
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      position: absolute;
+      right: 16px;
+      top: -8px;
+    }
+
+  img
+    {
+      vertical-align: top;
+    }
+
+  img + img
+    {
+      position: relative;
+      right: 16px;
+      top: 80px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
new file mode 100644
index 000000000000..1a0c4581e51c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: ltr' and 'top' and 'bottom' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'ltr' and its 'top' and 'bottom' are not 'auto' in a vertical-rl context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-4col-2row-320x320.png") no-repeat calc(100% - 278px) 8px;
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 2nd row in bg-red-4col-2row-320x320 */
+
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'top' should win, 'bottom' should be ignored and the used bottom value should become -'top'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
new file mode 100644
index 000000000000..b7dd97cabda4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      bottom: -8px;
+      left: 16px;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      left: 96px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
new file mode 100644
index 000000000000..f988359fb7f7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'left' and 'right' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'left' and 'right' are not 'auto' in a vertical-lr context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-low-left-corn-320x320.png") no-repeat 358px calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 4th row
+               and 2nd column (and not in 1st column)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 4th row in bg-red-low-left-corn-320x320.png */
+
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'left' should win, 'right' should be ignored and the used right value should become -'left'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
new file mode 100644
index 000000000000..9bd4acfd3aa5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      bottom: -8px;
+      position: absolute;
+      right: 16px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      position: relative;
+      right: 96px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
new file mode 100644
index 000000000000..86edebaadb06
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'left' and 'right' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'left' and 'right' are not 'auto' in a vertical-rl context, then the value of 'right' wins and 'left' becomes -'right'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-low-rght-corn-320x320.png") no-repeat calc(100% - 358px) calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+        80px : since we would need a bg-red which would be in 4th row
+               and 3rd col (and not 4th col)
+      ========
+       358px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 1st row in bg-red-low-rght-corn-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, left and right offset properties are input into the §9.4.3 algorithms where left offset property refer to top offset property in the layout rules and where right offset property refer to bottom offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      left: 80px;
+      height: 80px;
+      position: relative;
+      right: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'right' should win, 'left' should be ignored and the used left value should become -'right'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
new file mode 100644
index 000000000000..dedb68475e0f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-22T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  p
+    {
+      bottom: -8px;
+      left: 16px;
+      position: absolute;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      bottom: 80px;
+      left: 16px;
+      position: relative;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
new file mode 100644
index 000000000000..aef2bc41c374
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'top' and 'bottom' are not 'auto' in vertical-lr context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'top' and 'bottom' are not 'auto' in a vertical-lr context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-1col-3row-320x320.png") no-repeat 278px calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the left edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 3rd row in bg-red-1col-3row-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'bottom' should win, 'top' should be ignored and the used top value should become -'bottom'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
new file mode 100644
index 000000000000..da97328c1438
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <meta name="DC.date.created" content="2017-02-25T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-03-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      direction: rtl;
+    }
+
+  p
+    {
+      bottom: -8px;
+      position: absolute;
+      right: 16px;
+    }
+
+  img
+    {
+      vertical-align: bottom;
+    }
+
+  img + img
+    {
+      bottom: 80px;
+      position: relative;
+      right: 16px;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="80" height="80" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
new file mode 100644
index 000000000000..9d4639ebdbdf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: over-constrained relatively positioned element - 'direction: rtl' and 'top' and 'bottom' are not 'auto' in vertical-rl context</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <!--
+  Credits should go to Aleks Totić for reporting
+  Issue 695270: overconstrained position:relative in vertical-xx is not in compliance with spec
+  https://bugs.chromium.org/p/chromium/issues/detail?id=695270
+  and for providing an excellent test originally demonstrating the particular feature
+  being checked in this test.
+  -->
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
+  <link rel="match" href="overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht" />
+
+  <meta name="flags" content="image" />
+  <meta name="assert" content="When a relatively positioned element's 'direction' is 'rtl' and its 'top' and 'bottom' are not 'auto' in a vertical-rl context, then the value of 'top' wins and 'bottom' becomes -'top'." />
+
+  <meta name="DC.date.created" content="2017-02-23T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-28T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background: transparent url("support/bg-red-4col-3row-320x320.png") no-repeat calc(100% - 278px) calc(100% - 8px);
+      /*
+        16px : p's margin-right
+       246px : img's width
+        16px : p's margin-left
+      ========
+       278px : background-position from the right edge of document box
+      */
+
+      /* top = 8px since the red fail square is already on 3rd row in bg-red-4col-3row-320x320 */
+
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+
+/*
+Layout calculation rules (such as those in CSS2.1, Section 9.4.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
+
+So here, top and bottom offset properties are input into the §9.4.3 algorithms where top offset property refer to left offset property in the layout rules and where bottom offset property refer to right offset property in the layout rules.
+*/
+
+  div
+    {
+      background-color: green;
+      bottom: 80px;
+      height: 80px;
+      position: relative;
+      top: 80px;
+      width: 80px;
+    }
+
+  /*
+  Here, 'bottom' should win, 'top' should be ignored and the used top value should become -'bottom'.
+  */
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
+
+  <!--
+  The image says:
+  Test passes if there is a filled
+  green square and <strong>no red</strong>.
+  -->
+
+  <div></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/reference/text-combine-upright-value-single-character.html b/layout/reftests/w3c-css/received/css-writing-modes-3/reference/text-combine-upright-value-single-character.html
index e0852a81e513..d25602d70dbb 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/reference/text-combine-upright-value-single-character.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/reference/text-combine-upright-value-single-character.html
@@ -4,7 +4,6 @@
 <meta charset="utf-8">
 <title>CSS Writing Modes: text-combine-upright: all</title>
 <link rel="author" title="Masataka Yakura" href="https://google.com/+MasatakaYakura">
-<meta name="flags" content="font">
 <style>
 @font-face {
   font-family: tcu-font;
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht
new file mode 100644
index 000000000000..da3bce8d4ced
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(136px + 100vw + 136px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      width: calc(136px + 100% + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht
new file mode 100644
index 000000000000..1f2d1f167d4d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
new file mode 100644
index 000000000000..479a5fbb0ad8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 15ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht
new file mode 100644
index 000000000000..7e5b672dfe28
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
new file mode 100644
index 000000000000..7bb0a0618e3f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(100px + 100vw + 100px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      margin: 0px 100px;
+      width: 100vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht
new file mode 100644
index 000000000000..859d704fb03a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
new file mode 100644
index 000000000000..c4182d5f5d16
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht
new file mode 100644
index 000000000000..dde973c5d6da
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht
new file mode 100644
index 000000000000..1eb35679eeb9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: 672px;
+      /*
+      136px :
+    +
+      400px :
+    +
+      136px :
+   ===========
+      672px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht
new file mode 100644
index 000000000000..d76033e49d4c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht
new file mode 100644
index 000000000000..596b09d560de
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 50ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht
new file mode 100644
index 000000000000..70a66a48df42
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, min-content inline size (50ch) is greater than the width (400px) of the containing block. Therefore, the inline size of the orthogonal block will be the min-content inline size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht
new file mode 100644
index 000000000000..17495204efa7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht
new file mode 100644
index 000000000000..4c11ea2af188
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht
new file mode 100644
index 000000000000..716a81ae0167
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht
new file mode 100644
index 000000000000..6e6b8a230b6a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      margin-left: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht
new file mode 100644
index 000000000000..a7d0cef41cc1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vlr-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht
new file mode 100644
index 000000000000..d83846611f31
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht
new file mode 100644
index 000000000000..c04355899acd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(52px + 100vw + 52px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 100% + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht
new file mode 100644
index 000000000000..645746c17c69
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
new file mode 100644
index 000000000000..5f70b5081fc0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 3px + 15ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht
new file mode 100644
index 000000000000..cab989ab7db5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
new file mode 100644
index 000000000000..654cdf7ff079
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      width: 100vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht
new file mode 100644
index 000000000000..57059d2784f0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
new file mode 100644
index 000000000000..bb0aab0bd9ad
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht
new file mode 100644
index 000000000000..8502cf0b54b2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht
new file mode 100644
index 000000000000..92be04df1e0f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: 504px;
+      /*
+       52px :
+    +
+      400px :
+    +
+       52px :
+   ============
+      504px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht
new file mode 100644
index 000000000000..5490888bdd01
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht
new file mode 100644
index 000000000000..4dacabab7ab8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 3px + 50ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht
new file mode 100644
index 000000000000..d0fb09e29e07
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width (inline-size) of the containing block is definite in this test, then the constrain is the width (inline-size) of such containing block which is, in this test, 400px. But the min-content inline size of the orthogonal block is greater than the width (inline-size) of the containing block. Therefore, the min-content inline-size will become the width of the orthogonal block." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht
new file mode 100644
index 000000000000..ef18ccbcd403
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht
new file mode 100644
index 000000000000..e825e0f814f6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht
new file mode 100644
index 000000000000..c94516825bfb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then the constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht
new file mode 100644
index 000000000000..079fd2bb37cd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: left;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht
new file mode 100644
index 000000000000..21e84bdd854a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vlr-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht
new file mode 100644
index 000000000000..125ce0242c42
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vlr tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' its max-content inline-size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht
new file mode 100644
index 000000000000..c2a476eee870
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(136px + 100vw + 136px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 100% + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht
new file mode 100644
index 000000000000..94f5128b9d0a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-13T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  size (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
new file mode 100644
index 000000000000..45e80937a149
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 3px - 15ch - 3px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 15ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht
new file mode 100644
index 000000000000..a59172d5e3cc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht
new file mode 100644
index 000000000000..9ac176a8775a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
new file mode 100644
index 000000000000..df84a8494275
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht
new file mode 100644
index 000000000000..c1e3f57c569e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content will be less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht
new file mode 100644
index 000000000000..1fdc3e00f2c1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 400px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: 672px;
+      /*
+      136px :
+    +
+      400px :
+    +
+      136px :
+   ===========
+      672px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht
new file mode 100644
index 000000000000..7bda42b6e49a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht
new file mode 100644
index 000000000000..80ebacdf7db1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 136px - 3px - 50ch - 3px - 136px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      padding: 0px 84px;
+      position: absolute;
+      width: calc(136px + 3px + 50ch + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht
new file mode 100644
index 000000000000..75b59c311621
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, min-content inline size (50ch) is greater than the width (400px) of the containing block. Therefore, the inline size of the orthogonal block will be the min-content inline size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht
new file mode 100644
index 000000000000..d262bb6906a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. In this test, the max-content inline size of the orthogonal block will be smaller than the width of its containing block. Therefore the inline size of div#ortho-block-htb will be its max-content inline-size." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht
new file mode 100644
index 000000000000..0539a533c2ad
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht
new file mode 100644
index 000000000000..842ab97f5402
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. Therefore, the outer edges of the inline-axis of the orthogonal block becomes '400px'." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht
new file mode 100644
index 000000000000..f65d70a5d6e2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      margin-right: 92px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht
new file mode 100644
index 000000000000..c843969b9e04
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. But the min-content inline size of the orthogonal block is greater than '400px' and less than the width of the initial containing block. In such case, the inline-size content edges of the orthogonal block becomes its min-content. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vrl-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht
new file mode 100644
index 000000000000..a218bdf6360a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. The max-content is narrower than the definite-sized width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht
new file mode 100644
index 000000000000..3b1fef0f84e5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      width: calc(52px + 100vw + 52px);
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 100% + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht
new file mode 100644
index 000000000000..1fb1eacd631f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
new file mode 100644
index 000000000000..6570a04a2e62
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 3px - 15ch - 3px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: calc(52px + 3px + 15ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+      width: 15ch;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">123456789012345</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht
new file mode 100644
index 000000000000..8c4193cb267a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-015-ref.xht" />
+
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. But the max-content inline size of the orthogonal block is less than the width of the initial containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht
new file mode 100644
index 000000000000..20ec77307e10
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vlr-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
new file mode 100644
index 000000000000..384ade60c44d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-right: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht
new file mode 100644
index 000000000000..c0a77d888cd7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the width of the containing block is indefinite in this test, then constrain is the width of initial containing block which is, in this test, equal to the width of the viewport. In this test, the max-content inline size of the orthogonal block is less than the width of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht
new file mode 100644
index 000000000000..55d35cfffe05
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 400px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: 504px; /* 52px + 400px + 52px == 504px */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht
new file mode 100644
index 000000000000..6b168bf7e739
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht
new file mode 100644
index 000000000000..465e662c9cf3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 52px - 3px - 50ch - 3px - 52px);
+      /* or more elegantly right: 0px; Chrome 57+ has a bug here */
+      position: absolute;
+      width: calc(52px + 3px + 50ch + 3px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01020304050607080910111213141516171819202122232425</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht
new file mode 100644
index 000000000000..5195dc9a01e6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. min-content inline size is greater than 400px. Therefore, the inline size of the orthogonal block will be its min-content. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht
new file mode 100644
index 000000000000..5e8acd5979e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht
new file mode 100644
index 000000000000..efd30363effc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+      width: 394px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht
new file mode 100644
index 000000000000..6c30cf74cc93
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht
new file mode 100644
index 000000000000..0d9bf32c41a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-30T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      float: right;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht
new file mode 100644
index 000000000000..47ed5af4aeb0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vrl-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht
new file mode 100644
index 000000000000..7b06bd8eef1e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-htb-in-vrl-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, the max-content will be less than the width of the containing block. Therefore the inline size of div#ortho-block-htb will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-htb-in-vrl tests:
+  001-012 : body has 100px margin-left and 100px margin-right
+  013-024 : body has no horizontal margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's width is 'auto' therefore indefinite
+  007-012: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's width is 'auto'
+  002: orthogonal block's width is 'auto' and its min-content
+  inline size (1 very long word) is wider than constraint
+  003: orthogonal block's width is 'auto' and its max-content inline size
+  is narrower than max(min-content, constraint)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: auto;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht
new file mode 100644
index 000000000000..03df21812bbb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      width: calc(136px + 35px + 50vw + 35px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht
new file mode 100644
index 000000000000..a38a0509c694
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht
new file mode 100644
index 000000000000..8296ce82919a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      margin-left: 92px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht
new file mode 100644
index 000000000000..4bbc2ae036f1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht
new file mode 100644
index 000000000000..a87db28d4ded
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      padding: 0px 84px;
+      width: calc(136px + 3px + 200px + 3px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht
new file mode 100644
index 000000000000..c4f3eb8d7cfb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht
new file mode 100644
index 000000000000..510f498d9f23
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      margin: 0px 92px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht
new file mode 100644
index 000000000000..d599782170cc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht
new file mode 100644
index 000000000000..3c4412a2a196
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      width: calc(52px + 35px + 50vw + 35px + 52px);
+      /*
+        52px : offsetWidth of sentence-before
+        35px : left border
+        50vw : content width of tested orthogonal block
+        35px : right border
+        52px : offsetWidth of sentence-after
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht
new file mode 100644
index 000000000000..b1bccedb0de9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht
new file mode 100644
index 000000000000..e205bbe33624
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht
new file mode 100644
index 000000000000..c938d1ca6d05
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vlr-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht
new file mode 100644
index 000000000000..d92bc476c5d2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      width: 310px;
+      /*
+        52px :
+     +
+         3px :
+     +
+       200px :
+     +
+         3px :
+     +
+        52px :
+    ============
+       310px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-lr;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht
new file mode 100644
index 000000000000..f8b7fa026413
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht
new file mode 100644
index 000000000000..01d424109515
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht
new file mode 100644
index 000000000000..3aa4989b6d1e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-lr' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vlr-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vlr tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vlr-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vlr-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht
new file mode 100644
index 000000000000..77e59add64eb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      padding: 0px 84px;
+      left: calc(50% - 136px - 35px - 35px - 136px);
+      width: calc(136px + 35px + 50vw + 35px + 136px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht
new file mode 100644
index 000000000000..d71830a802ec
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht
new file mode 100644
index 000000000000..8235ca7b13b7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 100px;
+      width: 50vw;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht
new file mode 100644
index 000000000000..1612a009600a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht
new file mode 100644
index 000000000000..2c56c37dcbca
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-04T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 478px);
+      padding: 0px 84px;
+      position: absolute;
+      width: 478px;
+      /*
+      136px :
+    +
+        3px :
+    +
+      200px :
+    +
+        3px :
+    +
+      136px :
+    ==========
+      478px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht
new file mode 100644
index 000000000000..9071e723e828
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-19T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht
new file mode 100644
index 000000000000..4730eb793644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-27T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 100px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht
new file mode 100644
index 000000000000..b3330f98730e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 100px;
+      margin-right: 100px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht
new file mode 100644
index 000000000000..32e2c874010e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      position: absolute;
+      right: 0px;
+      width: calc(52px + 35px + 50vw + 35px + 52px);
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 35px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht
new file mode 100644
index 000000000000..aebb478a7162
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 35px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht
new file mode 100644
index 000000000000..075f8bd84ac8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      right: 0px;
+      position: absolute;
+      width: 50%;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht
new file mode 100644
index 000000000000..7c9cd719e59f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside auto-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the width of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the width of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#auto-sized-vrl-containing-block
+    {
+      width: auto;
+      /*
+      'width: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht
new file mode 100644
index 000000000000..04351ff2c743
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin: 8px 0px;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      left: calc(100% - 310px);
+      position: absolute;
+      width: 310px;
+      /*
+         52px :
+      +
+          3px :
+      +
+        200px :
+      +
+          3px :
+      +
+         52px :
+     ===========
+        310px
+      */
+    }
+
+  td
+    {
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#after, td#before
+    {
+      width: 52px;
+    }
+
+  p#sentence-after, p#sentence-before
+    {
+      writing-mode: vertical-rl;
+    }
+
+  td#data
+    {
+      border: blue solid 3px;
+      display: block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <table>
+
+    <tr>
+
+      <td id="after"><p id="sentence-after">Sentence&nbsp;after.</p></td>
+
+      <td id="data">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</td>
+
+      <td id="before"><p id="sentence-before">Sentence&nbsp;before.</p></td>
+
+    </tr>
+
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht
new file mode 100644
index 000000000000..65b3121224d7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht
new file mode 100644
index 000000000000..22627bd1e6f3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      position: absolute;
+      right: 0px;
+      width: 200px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht
new file mode 100644
index 000000000000..5c8273f7233c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'horizontal-tb' block with percent inline-size inside definite-sized 'vertical-rl' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-htb-in-vrl-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the width of the containing block is definite, therefore 50% is applied on the width of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-htb-in-vrl tests:
+  001-004: body has 100px margin-left and 100px margin-right
+  005-008: body has no horizontal margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's width is 'auto' therefore indefinite
+  003-004: containing block's width is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  div#sized-400px-vrl-containing-block
+    {
+      width: 400px;
+    }
+
+  div#ortho-block-htb
+    {
+      border: blue solid 3px;
+      width: 50%;
+      writing-mode: horizontal-tb;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-vrl-containing-block">
+
+    <div id="ortho-block-htb">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht
new file mode 100644
index 000000000000..cf5253ab4c65
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+      width: auto;
+    }
+
+  p#sentence-after
+    {
+      top: calc(100px - 16px + 52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht
new file mode 100644
index 000000000000..c2c4ff787d42
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht
new file mode 100644
index 000000000000..022478df69a7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht
new file mode 100644
index 000000000000..691d2917a28a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht
new file mode 100644
index 000000000000..6180852b090a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 222px; /* 600px - 342px - 36px == 222px */
+      top: 342px; /* 100px - 16px + 52px + 3px + 200px + 3px == 342px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht
new file mode 100644
index 000000000000..1d1983a734a7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht
new file mode 100644
index 000000000000..bf1c5eece8d8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht
new file mode 100644
index 000000000000..4e7ad2b417cb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht
new file mode 100644
index 000000000000..12c1e083610d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht
new file mode 100644
index 000000000000..ed626bf29f08
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht
new file mode 100644
index 000000000000..283e2701a82c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht
new file mode 100644
index 000000000000..092763873409
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht
new file mode 100644
index 000000000000..5ed274859acb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 122px;
+      top: 258px; /* 52px + 3px + 200px + 3px == 258px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht
new file mode 100644
index 000000000000..47316719733c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht
new file mode 100644
index 000000000000..5c5fd41c4763
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht
new file mode 100644
index 000000000000..c3a2c4c446e3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vlr-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vlr-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht
new file mode 100644
index 000000000000..42525c258788
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(100px - 16px + 52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht
new file mode 100644
index 000000000000..73e180b62a9d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht
new file mode 100644
index 000000000000..3ce9fbfb1925
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht
new file mode 100644
index 000000000000..8877e00b6322
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-002-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht
new file mode 100644
index 000000000000..1d4635d0e010
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht
@@ -0,0 +1,68 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 222px; /* 600px - 342px - 36px == 222px */
+      top: 342px; /* 100px - 16px + 52px + 3px + 200px + 3px == 342px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht
new file mode 100644
index 000000000000..197c0c826a5d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht
new file mode 100644
index 000000000000..03a2c2cc7196
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht
new file mode 100644
index 000000000000..73d83d57e611
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht
new file mode 100644
index 000000000000..b61cef2918af
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 35px + 50vh + 35px);
+      /*
+      50vh means 50 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 50vh == half of the height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht
new file mode 100644
index 000000000000..d49f9dcb844b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-005-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht
new file mode 100644
index 000000000000..371cae56cf6e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 50%;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht
new file mode 100644
index 000000000000..05e8343d19e8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is '50%' and its containing block's block size is 'auto'. Since the height of the containing block is indefinite in this test, then the initial containing block's size is used as a fallback which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht
new file mode 100644
index 000000000000..3fddeb0b2257
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 122px;
+      top: 258px; /* 52px + 3px + 200px + 3px == 258px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht
new file mode 100644
index 000000000000..2589b77fd6ff
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht
new file mode 100644
index 000000000000..c6e203523f65
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-22T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 200px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht
new file mode 100644
index 000000000000..11c8d20463b7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with percent inline-size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#orthogonal-auto" title="7.3.1 Available Sizes in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-prct-vrl-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the height of the containing block is definite, therefore 50% is applied on the height of such containing block which is, in this test, 400px." />
+
+  <!--
+
+  Inside this batch of 8 sizing-orthog-prct-vrl-in-htb tests:
+  001-004: body has 100px margin-bottom and 100px margin-top
+  005-008: body has no vertical margins
+
+  Inside each sub-batch of 4 tests:
+  001-002: containing block's height is 'auto' therefore indefinite
+  003-004: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 2 tests:
+  001: containing block has 1 sentence before and after
+  002: containing block has no sentence before and no sentence after
+
+  001 and 005 tests use a 35px thick border.
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: 50%;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht
new file mode 100644
index 000000000000..0b594e355507
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(100px - 16px + 52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht
new file mode 100644
index 000000000000..49cfa835a483
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht
new file mode 100644
index 000000000000..059af54fb46a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+      padding-bottom: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht
new file mode 100644
index 000000000000..357c5171dc86
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht
new file mode 100644
index 000000000000..fed458c46f42
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht
new file mode 100644
index 000000000000..318c97cac7c2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht
new file mode 100644
index 000000000000..cad74c8b846b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht
new file mode 100644
index 000000000000..366749f67d04
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht
new file mode 100644
index 000000000000..edcb185c3aa1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 28px; /* 600px - 536px -52px + 16px ==  28px */
+      top: 536px; /* 100px - 16px + 52px + 400px == 536px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht
new file mode 100644
index 000000000000..b52ae552ba3f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht
new file mode 100644
index 000000000000..cf93c7cf4325
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2016-12-29T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      left: 8px;
+      padding-bottom: 16px;
+      position: absolute;
+      top: calc(136px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht
new file mode 100644
index 000000000000..1faa3b883473
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content inline size is presumed to be greater than the height (400px) of the containing block. Therefore the content edges of the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht
new file mode 100644
index 000000000000..fdb195488736
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: calc(600px - 100px + 16px - 52px - 3px - 15ch - 3px - 52px + 16px);
+      /*
+      600px
+   -
+      100px
+   +
+       16px : margin collapsing of p#sentence-before's margin-top with body's margin-top
+   -
+       52px
+   -
+        3px
+   -
+       15ch
+   -
+        3px
+   -
+       52px
+   +
+       16px : margin collapsing of p#sentence-after's margin-bottom with body's margin-bottom
+  ============
+   approx. 270px
+      */
+
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht
new file mode 100644
index 000000000000..8f81bce2d135
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-009-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht
new file mode 100644
index 000000000000..e22e591a2e6c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht
new file mode 100644
index 000000000000..db786b27392a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht
new file mode 100644
index 000000000000..2a6720eba334
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht
new file mode 100644
index 000000000000..e973ee329d57
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012 : body has 100px margin-top and 100px margin-bottom
+  013-024 : body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht
new file mode 100644
index 000000000000..6276e89194dd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 92px 0px;
+      height: 416px;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      display: inline-block;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht
new file mode 100644
index 000000000000..e1eb5f8180e6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-012-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht
new file mode 100644
index 000000000000..8f5641543fb3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht
new file mode 100644
index 000000000000..cd42dd68f48b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
new file mode 100644
index 000000000000..b691d29fa32f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht
new file mode 100644
index 000000000000..9d9de14fda4c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht
new file mode 100644
index 000000000000..206eb955021a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht
new file mode 100644
index 000000000000..e26e14dc3edb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 35px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
new file mode 100644
index 000000000000..370a61448d89
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht
new file mode 100644
index 000000000000..51c0bdd03659
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht
new file mode 100644
index 000000000000..e47426b9eadc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: 452px; /* 52px + 400px == 452px */
+      padding-bottom: 1em;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht
new file mode 100644
index 000000000000..86760b00985a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht
new file mode 100644
index 000000000000..b809bc77da44
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      left: 8px;
+      padding-bottom: 1em;
+      position: absolute;
+      top: calc(52px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht
new file mode 100644
index 000000000000..c70f103c111c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content will be greater than the height of the containing block. Therefore, the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht
new file mode 100644
index 000000000000..1b3706066b07
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content of the orthogonal block will be less than the height of its definite containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht
new file mode 100644
index 000000000000..701cabf9e757
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht
new file mode 100644
index 000000000000..bb1a9af211c7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht
new file mode 100644
index 000000000000..76e5ead0d059
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-lr;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht
new file mode 100644
index 000000000000..9cfb95677e81
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht
new file mode 100644
index 000000000000..156d9e6afb97
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vlr-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' its max-content inline-size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vlr
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vlr">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht
new file mode 100644
index 000000000000..d3f4041f0f6f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(100px - 16px + 52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht
new file mode 100644
index 000000000000..c19ab6c20490
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-001-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-02T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht
new file mode 100644
index 000000000000..3e7b4fc3282b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 100px;
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht
new file mode 100644
index 000000000000..a61002014a44
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-003-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-08T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht
new file mode 100644
index 000000000000..e73a8692debf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht
new file mode 100644
index 000000000000..478a6a429f15
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-004-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht
new file mode 100644
index 000000000000..8587fdbe0c37
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht
new file mode 100644
index 000000000000..80955af997ce
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-006-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht
new file mode 100644
index 000000000000..679b68481123
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 28px; /* 600px - 536px -52px + 16px ==  28px */
+      top: 536px; /* 100px - 16px + 52px + 400px == 536px */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht
new file mode 100644
index 000000000000..fb3c91dec9bd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-007-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht
new file mode 100644
index 000000000000..9328c47bb1a4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(136px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht
new file mode 100644
index 000000000000..e28ae4c89a6c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-008-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content inline size is presumed to be greater than the height (400px) of the containing block. Therefore the content edges of the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht
new file mode 100644
index 000000000000..0c74a8ea8d58
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 0px;
+      top: 100px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 136px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: calc(600px - 100px + 16px - 52px - 3px - 15ch - 3px - 52px + 16px);
+      /*
+      600px
+   -
+      100px
+   +
+       16px : margin collapsing of p#sentence-before's margin-top with body's margin-top
+   -
+       52px
+   -
+        3px
+   -
+       15ch
+   -
+        3px
+   -
+       52px
+   +
+       16px : margin collapsing of p#sentence-after's margin-bottom with body's margin-bottom
+  ============
+   approx. 270px
+      */
+
+      top: calc(136px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht
new file mode 100644
index 000000000000..399ce8f45314
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht
@@ -0,0 +1,100 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-009-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht
new file mode 100644
index 000000000000..cf87d6ad127d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 400px;
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 400px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht
new file mode 100644
index 000000000000..5b0f4fa5ce0f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-010-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht
new file mode 100644
index 000000000000..b7454ccd4cda
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      padding: 100px 0px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht
new file mode 100644
index 000000000000..fa2ee6bfe344
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-011-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+      /* Nota bene: margin-top of p#sentence-before will collapse with body's margin-top */
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht
new file mode 100644
index 000000000000..882a82d08c95
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 600px;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      left: 8px;
+      position: absolute;
+      top: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht
new file mode 100644
index 000000000000..1504ed97c9fa
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-012-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-15T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-08T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 100px;
+      margin-top: 100px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht
new file mode 100644
index 000000000000..f274aafa5920
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      height: 100%;
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      height: 100%;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 100vh);
+      /*
+      100vh means 100 vh unit where each vh is equal to
+      1% of the height of the initial containing block.
+      So 100vh == height of initial containing block
+      5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units
+      https://www.w3.org/TR/css3-values/#vh
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht
new file mode 100644
index 000000000000..4ccc0d0e74a2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-013-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
new file mode 100644
index 000000000000..93f8b02e2e8f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      top: calc(52px + 3px + 15ch + 3px);
+      /*
+      15ch means 15 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>123456789012345</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht
new file mode 100644
index 000000000000..4b8873321ce6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht
new file mode 100644
index 000000000000..38d4cee7d493
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div
+    {
+      border: blue solid 35px;
+      box-sizing: border-box;
+      height: 100%;
+      left: 8px;
+      position: absolute;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht
new file mode 100644
index 000000000000..bbe2cdb24d3b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-016-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 35px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
new file mode 100644
index 000000000000..2c5b84015918
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>123456789012345</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht
new file mode 100644
index 000000000000..ab341935a63d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is also 'auto'. Since the height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#auto-sized-htb-containing-block
+    {
+      height: auto;
+      /*
+      'height: auto' causes the measurement of the orthogonal
+      box's containing block to be indefinite
+      */
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="auto-sized-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht
new file mode 100644
index 000000000000..64b2d2cd70c0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: 452px;
+      /*
+        52px :
+     +
+         3px :
+     +
+       394px :
+     +
+         3px :
+    ============
+       452px
+      */
+    }
+
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht
new file mode 100644
index 000000000000..e4cebf249428
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-019-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht
new file mode 100644
index 000000000000..3119e85b4cf9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  p
+    {
+      left: 8px;
+      position: absolute;
+      writing-mode: horizontal-tb;
+    }
+
+  p#sentence-before
+    {
+      margin-top: 8px;
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 52px;
+    }
+
+  p#sentence-after
+    {
+      padding-bottom: 1em;
+      top: calc(52px + 3px + 50ch + 3px);
+      /*
+      50ch means 50 ch unit where each ch is equal to
+      the used advance measure of the "0" (ZERO, U+0030) glyph found
+      in the font used to render it.
+      5.1.1. Font-relative lengths: the em, ex, ch, rem units
+      https://www.w3.org/TR/css3-values/#ch
+      */
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p id="sentence-before">Sentence before.</p>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+  <p id="sentence-after">Sentence after.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht
new file mode 100644
index 000000000000..8cb55fef60a0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-020-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-285T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, min-content will be greater than the height of the containing block. Therefore, the inline size of the orthogonal block will be its min-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht
new file mode 100644
index 000000000000..44e085ad67a7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-015-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content of the orthogonal block will be less than the height of its definite containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <p id="sentence-before">Sentence before.</p>
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+    <p id="sentence-after">Sentence after.</p>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht
new file mode 100644
index 000000000000..1e906f61c595
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: 394px;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht
new file mode 100644
index 000000000000..a47986daa8aa
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-022-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 00</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht
new file mode 100644
index 000000000000..391ddb69277c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta content="" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      writing-mode: vertical-rl;
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+    }
+
+  div
+    {
+      border: blue solid 3px;
+      height: auto;
+      left: 8px;
+      position: absolute;
+      top: 0px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>01020304050607080910111213141516171819202122232425</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht
new file mode 100644
index 000000000000..fbc6dead2196
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-023-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, we assume that the 50 characters long word is greater than the height of div#sized-400px-htb-containing-block. Therefore, min-content is greater than constraint." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">01020304050607080910111213141516171819202122232425</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht
new file mode 100644
index 000000000000..c4c0b03b09e0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: sizing of orthogonal 'vertical-rl' block with 'auto' inline size inside definite-sized 'horizontal-tb' containing block</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-writing-modes-3/#auto-multicol" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" />
+  <link rel="match" href="sizing-orthog-vrl-in-htb-018-ref.xht" />
+
+  <meta name="DC.date.created" content="2016-09-28T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the height of the containing block is definite in this test, then constrain is the height of such containing block which is, in this test, 400px. This test presumes that the initial containing block's height is greater than 400px. In this test, the max-content will be smaller than the height of the containing block. Therefore the inline size of div#ortho-block-vrl will be its max-content." />
+
+  <!--
+
+  shrink-to-fit formula is: min(max-content, max(min-content, constraint))
+
+  max-content inline size: narrowest inline size needed to fit its contents
+  if none of the soft wrap opportunities within the box were taken. Eg:
+  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
+  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+
+  min-content inline size of the box: longest word in a sentence or longest non-breakable
+  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
+  is "sentence."
+  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size
+
+  contraint: min(available space, initial containing block's size)
+
+  available space: this is either a measurement of its containing block
+  (if that is definite) or an infinite size (when it is indefinite).
+  https://drafts.csswg.org/css-sizing-4/#available
+
+  - - - - - - - - - - - - -
+
+  Inside this batch of 24 sizing-orthog-vrl-in-htb tests:
+  001-012: body has 100px margin-top and 100px margin-bottom
+  013-024: body has no vertical margins
+
+  Inside each sub-batch of 12 tests:
+  001-006: containing block's height is 'auto' therefore indefinite
+  007-012: containing block's height is 400px therefore definite
+
+  Inside each sub-sub-batch of 6 tests:
+  001-003: containing block has 1 sentence before and after
+  004-006: containing block has no sentence before and no sentence after
+
+  Inside each sub-sub-sub-batch of 3 tests:
+  001: orthogonal block's height is 'auto'
+  002: orthogonal block's height is 'auto' and its min-content
+  inline size is greater than containing-block's (definite) height (1 very long word)
+  003: orthogonal block's height is 'auto' and its max-content inline size
+  is smaller than containing-block's height (short sentence)
+
+  -->
+
+  <style type="text/css"><![CDATA[
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* therefore, each line box is 20px tall */
+      margin-bottom: 0px;
+      margin-top: 0px;
+    }
+
+  div#sized-400px-htb-containing-block
+    {
+      height: 400px;
+    }
+
+  div#ortho-block-vrl
+    {
+      border: blue solid 3px;
+      height: auto;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div id="sized-400px-htb-containing-block">
+
+    <div id="ortho-block-vrl">123456789012345</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-left-corn-320x320.png b/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-left-corn-320x320.png
new file mode 100644
index 0000000000000000000000000000000000000000..461467381042c40e60433108af55569e2d022119
GIT binary patch
literal 1729
zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4mP03*$GQm0V$SrM_)$<hK>E)e-c@Ne6}QS
zcNd2LAh=-f^2tCE&H|6fVg?4jBOuH;Rhv&5D9B#o>FdgVpGks&L+NhD<7Gf0$r9Iy
z66gHf+|;}h2Ir#G#FEq$h4Rdj3<Y;j-+=H&K5?MwlAbP(Ar-gY-aVZilge=HVfiF8
zvzJG?gL*?^w!BjE5X({yIr3=f)mXzFf~v1hi7oba{LeJeDSEd+Q#V_9(%C~ztQ(K*
z%5XiY6tUrw>)Iwq&12D*pB2TV7*6*&vt+G_ajo2pqd%XWnfb8h!()}npO=P+xC%DB
z4wxOxz@gB<z(g@Yxd{*_Q0x$}0ZcDMsNg4{QPc<;h>NJ<u?7Y!R_eHjDshfGd`$X-
zCW`nS7S)(zSHMb!&k<T;>>20WnNSm`vh$4l#>AKAvh@l-S3WBhu08$#!&kf4N$>a1
zsbvgr_&+<pTzz)dF}vHzMh#;84}Q*`{O(`t<Mr>ox}tqJHXLG#xHDtPl^ct{9Iuzp
z&Pm@?`}fet`0J|jHn~m>Vtbk9Wct_1_*jWm{`-+&bUQDoL5%0Y&9f)3wTspN+si(A
zo30vb#zBTU+X-Jna_md3e!eO>Yo|Y3WWiCUALZej(iT*`S-kh8ef8?&aaD>l<Fb<)
z#JC>(*p^aVURnM2sEV@Zdyh{~kAC`5zFqY(|7?i`u1pr;UVgl4=Ak`%KYL!XoR~Am
zqs}5|@BfR}pT#p5oMn!fbw>0qtI@@|cXn^Cdh?O_>Hc{y@6P`d_VG@%zuM&T88Qo4
z*D>sW>A!8QR{r<7-tTN8@4d5}DPtXeZ(gqdviYW#4wKnGTzZwV>6zJfXXlf%R(>jb
z9x`d+tJ-<>sxx02I36(NOITdqbY(a9li&BAT&!Mod{>+JyX~bGlB;jnRh56LUeC!i
z>j&3{vWLy)Zj*h}fpRZ%jLf2Jzx~V;W--ZRc&%IW;l{otCff_{f7_XIdfyYLqc>Kc
zSJ^D)!7$6P;j5Tk#iIhTzhXZp9`;N>x=;A^Wd8D5Dhp0B?YMG?z1PalqF$$A8Rvr_
zZh4be3Gqc~n>(3iX*6u*mVaY4^-O8X$^1#n!`0i5t?vJNy<3edV-mx)=pP9`?k>r#
zdU<`_JkLDa2wO9Q2_ms-+!;*_*Ys*GRBCG4<^B2ky<cVVbgjPf-+v4l!%D!e{5CP=
zu70n4@?)2xWoeBq{<;$w)_eh*cl_Va_>ZQmraalleDY`4M)Pu&`m*@D=Wo4G;{VsH
z#*yIsO1GxqdgoL5<<DJ;-aP;G?aQi^ZTDLkwM{@Cl#uhvn-TSI<1RfF<M-kHw%gPH
z*)ps<<==Sp4}V3>x<fCS!^z01Xj&Y)e~9m%`tgQv^+Fq9O~T;m>gTe~DWM4f>7h3k

literal 0
HcmV?d00001

diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-rght-corn-320x320.png b/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-low-rght-corn-320x320.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d3a3c029d3b6db0cb0c3770dee98315d42ff94f
GIT binary patch
literal 1700
zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4mP03*$GQm0V$SrM_)$<hK>E)e-c@Ne6}QS
zcNd2LAh=-f^2tCE&H|6fVg?4jBOuH;Rhv&5D9B#o>FdgVpGks&PgCZ>+!a6}$r9Iy
z66gHf+|;}h2Ir#G#FEq$h4Rdj3<Y;j-+=H&K5+&H)<2#ujv*Dd-rhNzEmJCU{Ns7E
z%-l=t@)NRD9xV*zcP$E#UZ^A{FSS>+TRd>lyd1+SkuUlJnp?KAD^_HDP`M_f6Csej
zraf$mTobFd?G>#Z8b^OzX}9TVm-(hBz4_v_ck9-Rze%jKHkMZVkai+%-_k`IT?~Kt
z*A{RxFtP|ZP)ty60@Mjqa!o7~bzDS+paFY~TCSPSKphuRBhEn{!|s}fZx`PRIY?_y
zjbSctU|`}<Kq8QsXfjZ4_{}T7o@`b+xxYsA_4I!|Cx1_pf7PeWA2)M;>BjT%=k_si
z#F)mv_xknvn%&K}d;%{Dp6C1gD$|RpFLe*Pqtf8et+~!WDC=G5uebBhmlkQ<+?Mz7
z*ZJ(p-{*-qEO0(sqI$nyWwlu4{~I1gw^bV)*sXRO-u!gn(fj?y^_!9=Gcd`%IQ=lC
z`06*|<&*XOuD|`f2q^UI{JoT~1#fS$S5Mmi?aI2nA7YI5x-m5J8SON^c`f{AT(RcK
z3L}GgHFYaD{X46B@<}rjM@h%dprS05oeQ(xuI-;RuV~Z4IW^@w%Kj^_KO?W)aKJQt
z)~Wg`t|fP--?0tZ{q4oSQ}yS0-gwuota{&jeDccMECMeW;@|pgD+}MoeqMF^{1rL*
zb`xc6!*9-e>$PmYn8Sjzv2infuG&5;D=>+y-MHy)vEj*#w|3|EO*ykh$l-xh_BYQ7
zZvKrm))Q=M!rw-{zj5gAwjNdW)!X{-%=}}e(BL4wTE6DPEtgC6We@BArca(Myfu6N
zJ0XV!zNS(&A5Pp`VzRy9{<@thm+w7sx_axhzv^aP8wE#(MpuyZjfFbDbU!(_Pnx%?
z_VnvX-`iOPGK{@>?J}-yocObtQ{jTyG^v^kYnYo)&g^C4*fR0gL3V3D)#BBgo|vD!
ztUbAT^490S9#=B5+;UlbkUcqHU3=MdyRxS~MV}jQZGHG~$qP}31-w`I?OyDhBO-5B
z|7Y*xlSiJe`h3@_-j9(bDhjA4U(WB^zbk(%&8AE?E@c+7%R9)($;5Fb!{kT8?|nb*
zKbo$d@?_rMlRsB&y}n(2|M%FN^S9nq<nQLK7I0YL2Gn0J6aTN$Oy0lmU&PIM@BGrr
zcQLa>g@7Eh_++X0^!j!8xKEzhy*2y%n|c3x!UDCr7JbNWHw)F;$@UJTq@=XKYH<6<
Z7BBMlv3vi#FTl!z!PC{xWt~$(697l#{h$B<

literal 0
HcmV?d00001

diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-left-corn-320x320.png b/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-left-corn-320x320.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0db0c2e4ecacd72fe8b31fda42ca1b58b697ed6
GIT binary patch
literal 1732
zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4mP03*$GQm0V$SrM_)$<hK>E)e-c@Ne6}QS
zcNd2LAh=-f^2tCE&H|6fVg?4jBOuH;Rhv&5D9B#o>FdgVpGks&Mf79>=Te}MWQl7;
ziF1B#Zfaf$gL6@8Vo7R>LV0FMhJw4NZ$Nk>pE%HT8BZ6-kcwMx@1D+%No6?puzc1Q
zvzJG?gL++Jw!B*8A(o{aa^%s{i?N0~1XW+15?k!;_@8N_Q}k|urf#<Iq_c;bST|nV
zmEn3)DPqGV*ELNGgL<~d6<O+~8BX^(vm|tu<UIDY!hM#-X+?HF3e_h64APpU6tnlx
z%jU4Hr!*N@1RNL`i6S0Uu@qD#e{!ApDd}f;p|+Xc-y_2OD)v`x^H$aWw0Bs1eb<f8
z`swipL?8TrcKfbp{@okt)jk{-o-ytzD86L8qu|fiSkJ<4PsXqahHmM}Q)ca+TKE5Z
zaxcG%wV95L{eHWj4>Bh+ZFwpBAjkdF<AP0T6My^js29tsv1J@)@XPbtX1nFb-}kmN
z*4#=;YB1w@aNYUjwN-DIpHqpSyYlw)RAJ^VkqrM|`Ca3?+E=^9{AYFk+Z*2cD#ovU
z_%66H&bcw~&5M;e>vzvd(RnHDy>Cy9<o|cuQXVBvX5Qk-@Z9_4%ZE>vt=d>_=ecXy
zB;VkZ{O(!b?SDo6G-SAL+pzRy%;oJ4%c>?-vu7Qbvk&<Bdgi{rC)bC5-}^PisJ5Mx
z>DB|T53>)ZRHvuz{vT8HeC4Tc*Md)OES~yyXJ5**NMV*O6%6aw_$_<A?^#)fN@VrQ
zO?OK*PkOwyJHLO@nRSMq2TJ)8Hs5E-{GvPI{qITc?^nvcmW$nSf7`{BJz2kB+&!6J
ztHzn}Q2W5IR{nby^S=1$-C195BxxUK{q1MoWR@)%4AQzaA8zbhVzR&Be&5fO)BBzz
zUA?jTyh^c{2Sb!$L$8=!#iIhTzal>;9`+2sx-VFI5<k0-$b}@vn5>7*X>%p?<hd85
zGVQo>i2bb9jrnu#=4@&Z<4X8@h<&%8`seITPt;Euub%8Iy!H66&#seMw|Ic;Gx(La
zDJ$*e@pbcj^K2um%}l0<+*RYrXk@siUvr^URnso--^cI$s>j!d$iDyf$&fLu1nkOh
z6I1@`pOsI(98$C`ud&5ncLKwjFAQc;KN6n*`?UVYtWd9_`;AYWuHKk!J=wnM-|g$S
z-YD_^>s8}O2$s^VDY$;}seJnDlTU7(pZa#@xs<#MOBl6HKpvEk^~~F`<xg^HyieNw
z^|IA@{y!}l*8P-C2&^kUepPFZT>&eHLIVR6X#^qF2fQxMTvQ;&5Kgkm*xW+MHsUN{
zdLcrpH?cWJp@BH-h;THCfsV^HR;<)<5q9%Q4>M}H#*Y!Fi#BZf%UnC*{oPf3pVt8^
O69!LLKbLh*2~7YF=QfxC

literal 0
HcmV?d00001

diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-rght-corn-320x320.png b/layout/reftests/w3c-css/received/css-writing-modes-3/support/bg-red-upp-rght-corn-320x320.png
new file mode 100644
index 0000000000000000000000000000000000000000..af756b7ba6b81ed8e10c91b423ac8cb07ea37d30
GIT binary patch
literal 1705
zcmeAS@N?(olHy`uVBq!ia0y~yU~~Xs4mP03*$GQm0V$SrM_)$<hK>E)e-c@Ne6}QS
zcNd2LAh=-f^2tCE&H|6fVg?4jBOuH;Rhv&5D9B#o>FdgVpGks&+j!2`3Dbc>k|nMY
zCC>S|xv6<249-QVi6yBi3gww484B*6z5(HleBwaU89iMbLn>~)y>m8Orc~zm$Ma^M
zxtG}GCuA*ov@n$4u_z#Vp^}(<)LzkM@xVp%aty0PzUT{RZrRGNSdsBT<(iC6gh2M1
z_OK~(O|06sN3<lgj{dl^rBZ_5@=fxrwQEgw?~B{e{`2jboEZmZE6)Bot!t46)0SmH
zCrx*7X~!@*Ffg(RkVrJPExV=~FXH*{>FS8>U($Q*C;SO1zVl>S_UFxd-+qQ~TF=1r
ze`bEUs&v*hyW4O11Tu=B=lfN$zq%fOf2PQG4uuV8M9kGRO}}gXt@~L#_s+ze=;-}*
zdA^?xUS{Ihvhrr%lj93ho+`bUm-c#Q#Uha5EG#|wEWhr*f7SeI+Gd;z7uxp8`TWw_
zHs5M)P3f+*`O{eiGK}lLs;p*PeckTX<Uf0tSG`>-K56DvplK67u06T!-luP`x;@<{
z|GW6)bobM*@AJHm$%{EG@I5nqQn2$$U(xLMHIqvG)n2Plmgft9U;kulYch+#j(1+c
zJ6A1tP^+F?T^_RDcHjO#_l^Jlo)oWruln`LlvjL=EVmArGoQS6?$ftvn@`SFKXtoS
zebVCe)3=LdPoCKfw0nnl?8%U`$$9MUlS3~*ef#dE%HgZOZT@>1?G9pSe7)wTx}%gW
z>!;fKPcLk*X4@)%{hcf4=@*tGztj5X+IWUWu`uf&4|+GI9CrCzC#^PVa`M&e`R|1s
z7Py*9)qJ>dZ;46#{`})Ln=<o@7AC#Dnm%b~s+EExL*wZzlOGQ{og=?QKXK<%y({|L
zZ=J8*9mNKR?#QeUj+^^<b?109G)~)i<w0|r?2SotZfZ0*aIciD+3-2UXupwn-DI1~
zQ)Oh<+g+cp&!uodNs8A_qS8FlaPyaqv71k>WnXojjeYVWccAkEtbZ){9TZe^=g-IQ
z{c6e6wa%6QK4i%%5OEEtr{Z_Prf1Wio!?kzWEpI%@bGe~8OU)~y=?M1_qTsg-<LLZ
z(w*)0mhl_EJ^S{g|6ca*&1Tk57GB)I&dBo0M5?CX`bTYh|N9@Gyg2{#?aXs2c?V<_
zHuwO2ZeTR$jzR6y=dX57II}N)@3%YeTF*!DdASCP)IGhh$V>G)P+<cD69*E3#6*)J
z%)KzjZ#qL%MBom#cNiIk^o)aD2g&&lt1*lvoER=7%VZJ@1FVh#TZ~(V1a~<w#FAA;
wVOmaVDTiqSBxI-)J^~KY8Ne?3QU8NI{o(tE->&j!18WQhPgg&ebxsLQ0IA&hqW}N^

literal 0
HcmV?d00001

diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/support/text-orientation-012.png b/layout/reftests/w3c-css/received/css-writing-modes-3/support/text-orientation-012.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d5e9a4e24f28a5ff227abc6a419b95bc3b20636
GIT binary patch
literal 5113
zcmZu#XH?VQvi*e;AT&{$^eR=5A|O?ol+Ym{hNd*>y(2^sP@*(J2$7Cd6MB~-2#C_9
zNQZyu7zn+?<*j$`dtdIXHEW+aAI_JvX7=9m*2qAM8o~kr0DxLYTf^iU?EnBoPEK@v
z5*K#*dkrMcs`{z`P?<n^{*?5(rtsFb^aB8z&FlOQvL9|dzP=>$*U{G`TcD!6!7OsR
za2pB$x8CSzsG0>&;WO_B|1&k-bM+#7Pq7!a1Y78UEeXp(;$P+e5M(CJ{|UPXi5JE(
z!{UXtQjM2kMzB(C2D5L1l5u89!X}zV6mb@OMpL_~57*lNIu4+AlL)`2+{#;yPUTQ~
zcetuFS|ct_RbF?vawEvOh~5A^h=^w=_=nr@37B>Lg-gcMwR~_vy-AizxmKOZb{oqZ
zp}{jM3F`$zgX`c4NTsR_VzS8NPF3IU-nI}<x;j6=F%gkuJe83ZK<L6-iBMht^DOiF
zvT5NA9SLQOCf%44Xv8tsN)+~bAfbm2NE7etkva*NZ2!wJbbMK!aHNtA?yYrL`h9?#
zv3*2)G!Z#(YayJ5i3`epEjYefdrxZpXJ<a_$oH9XOuw{S_z1gF^E!<*uDqpNvxBUi
z9eM@=7SW5}C5AI7n1BX@>5SCD1Mv$}!_fRACI~5#r2yI0SFZ(Z{bsGanH{o8)wAlF
znJBy4Ge4gdv1qBs1WhFauo|D~Bdb3?RqL8++_uPC2`Cv4C0dAI<w0U3(teU1)nt$X
zr_RKD$ONFhtI@H3g`(?4*rHT-1i59EYUvju1bR=jO@ek6#KG3;1~cxr)HyFX=bANh
z5AC`;9A<QOJ7*ZbnozHj1V%aR!@@$~fA=iCoi)1r?}saQkC5FxQ~d}?*noj7K22Ns
za|RtBo0kqQB*0%37b7vFnYkF*<;CPwL?S<Lzc)7{@V%*6oPD_?3J2k%kOYjZerz5i
z>Q=}?a9>&5i*0T)!WBx)zXoL)wnz~n9x5)Kj|{SK$*24}0lo7yMNOe|3xeWwkgOSX
z$7UM|z=Gi}$GHOn5VIIK1>Rv*e3Gm%`ONnEsjp2W2|a0?TaRTnd`B;9;!?E$a;Ja7
zESaVs3)8TycMar-gif;78P3v(nTM@*`+kU<Jc(dM!W0zZI9f%iGt$=6v+t*Nb%Ad=
zk6}d}<fe4C&BcmZ&jG+Tm$}|PvahkL<L=a~@xF%SvbIw$N?7DW6>qneXtzov86X4i
z_1T<ViRap=;il3jZsHl`x0jzg=UcL?vq}w(ldTnii+Fl776$Heesq_u0>%6M)NVru
ztCg7jAr%f4qL-ByF1Sq#ZMl%@im6_v-uDs~AY;fc{t3Y!{JH1bgjFYdJ~d^svpG>7
z8&LW!*dtU~+9PO}YxNn)4Uh&v_we7K@$ViX=Ze*2+M^rTJOG<uX4!Tw1Kka+EDB<K
z1QdVD4|7R=C(k)ziSaGsEz_dW#`2v6-?3ePJlJFst+$jAc_rRIk%A*Fh^yUfp7x5g
zaM<L;n?11y=Cs@WY7qV<Vnm39NY?4{w$p7^Wyhyf?P+m-S_<F&OFUmsKjN925Z70q
z`ADUtDL5AoI+kMHnIuXS9*+}JUT`#^%2l%BLzVldykO?ay(DjE&}oeq{|)PU6PXz!
z(R#DQq=5|KE!McWn2TXXs`74TE7TSgpYZD0o))V3n1wnk1K#{Bo%O?<P780tj6Zf%
zJT1H@dc2gpM#GATd2h-K?_}>cpT1c4cz$sRlW~6?R<T~_hhll6fCmE;E~a5&Uc>9v
zkX8zx;U@6o<H4{GZ%q+}v`;CbRPQ@|{e*WNAl#n&UhHTw)C5)la-Nmf6a>*p2e{#i
zoQaLDI=p6PN2Jl;VCh5)y3(0k1*lHSZ@(@_DxH5&QvWUtwyH#b>$a$-`LTpkfam5%
zx&D!0mt5~`u?yC(nL|A|d{Our)#8%zeK`(B#wg}|JMqEyl0U-u^eJ+(SA;%5QMhT%
z*;SwSI00f?OC1ohql|$oDbzn_xl5eUef-iFa}%d@2_?HDg_&<qw3UM%mUpBJO%S^8
zjki|M$+)`THX78GPv=F9_p=jh_xo=n?~l1uXgw?hKX5?Qx7){KPkQZF_B6_(T0kQ#
z-Sn(8E0ureeCN}r_FRcL&EESwipFnL9ay@1Ggx`@&ui9fHKK40?NaDaM}nhA2v+7i
z=cNneh4XB-U5ZP~FBhvwLU`_j2!j!ttoqn6Kzg{zveT&g?S^F6Sj-th);&A6q-0mr
z7VdIUCZrKrC*jRD<dAnD*2kKE{uXJuaqf^u9ooO4DgV>N6M6DiW@}OS+W=$FX2jvA
zyv96p`d$vMy-RcbV>3eDD)T4RJ)Z6Xv6@^Tl)wfg`~GQ0KH?p#hiztN%*EEEc`WiE
z)_#4j%xRwcVED8j*+_;{z&vRhsd&MW<;YVxT#c?ZSPDcOdL&LyI?JF%zOibj`MsHS
zJB+4*3^|OnK}-Qwr83Xji1g=CE1DgKpv%4crarkwausGII^fk=eU3sgXlWY!1=c6H
zg#1&G^SowxzIuFC@37Q=ZN8k&lzgZrLKt#ahqP1k*qYu;xz&og<kRUfo&u|3TB7+}
z@;l8paLF@%CR!gV4~=HYIU~h+lLV5Xado{Ce&THGs;hQ_R>C}dR~d4^@d{j`cE|66
zq&*uuQ2ODh8S`vy6<kmkhcbcsSVfH*STcj`s#8Zq3(-4ZqWE(`os?0Si*Jp<4T8ay
zgzK1wQq}Q;-c-J;WzTm_e^P{#?wigA3c%8w`s_MSo|9tetko0a?$=tr=3CGeRZQiO
z=_l3}4zJt_?{`AAH$E5(&XcZA18Ks`>>iXdy`G5DW<s84Unv6K0<N`eS_&Rfhl0|!
z78bDvq3Ytl(C@b?`E??71ooGka}_bV;nlvj<GenyZ*em{>1aw$XAnYZ)Ad6mx6`{O
z7t!5{5T{3L9c?}hC=B-_DY2g^Okg{knZC<A5-p~sibQrFdQa%oPdY{Kwe~Z}H;KWL
zU#eVPJ{@sM<zXD>f`bFmF0$K92lDSn_fZtW)n;km-`~zzI~>e=+rijLsFNAlZri;H
zJ!zIecq<>sUm+Kfq$-Fa&TA4;!04*Y`I2sQg83$V`ST6+xKGBHMyv`yIra;+4VUoY
zN5xef9_lKkHFFY^GeVFPc>iJ}<p5%4YbLi{@wyC)XseZRZyZ!;yDCT`yd>G1xZ#RT
zJnpodSi7VsdBPBwDN6158O_<5CQ{@HsI-3f8<)LJb1Tux;EtCTIP1VqrZa8Rk`vM6
z75-Ipy@y8IWBGXS$R2QSGXF;w^>NLpGJ>uUv2(GiU5aIs;IbALIEmx{+9Pe|XK?wA
zRxMdhAVurQcMc@Wf}nL@{@bVFvfu@S8S)dvXBYG$^e(T+;^K7dP+_RQ9Kyenp7#7G
zkffcVbtV{dqW1o4N$9Gi9w_*{E#YNwNR$iS2oS0bUMp`-YP`uL`KiB)qu-HaM{<RT
z;D2^<^sunC&}=Lh*d?6MQ&zk!<y#_x-;H(=Gi53(QU-!=yuOd1S+RQeHsuMP?beg|
z!S*knRaK!avX*p>Muo4><rUi4xx~cvcf+P7_G0End50N{Qvx!ap2rlrWQ@Zqo%|m?
z8$ST&5TkS*FJQFi4loAE$n&GKS4@H9Pd3}@6`sdfRv6=V1$5CNiCX2VdR9gProZ#m
zC!YG3OlGnf5{UGF8~Eq&eWU#ER2WZ_Xa$jw)|U#mRx)@v?HRPzB+rr{F&>bo>hOmB
z<=V3WH*;-T7(LP2-E0&5@cGp?KbqT=b(+hXQPc6g%dn$VhDNGF=D?I3z1N#Px!xkv
zQWa2&O5b@y<f$=Mr%|yUpN17om*e#QdP{<GSl)sl<CJph>0jjdt^P|)<DH)YNAQLC
zM}{J5I?Tjd!D2VxIKKio+#HRA^rB>bI#MV{CW!<}efpZ8u4y*AUUz8aA82e3^oaPh
z3N0!!tU@llvVx_X$v&isj5D{=a$zzZ=Zo_{kjlx%oj7MB@wBB+AppayS|y%1qpsLH
zHs9&<=Ho=7htcJy+Z{bWoOk+V`_eyp&~8^Q9Qsi^^CpRzdt~&gEN*-my1b-wu~tXh
z_9u6`gm_Qa;ylcWWoly~wg<IyR6~T5?X)w^g4*}5@Lq9ihL{46qYiWDk1nKcxW+zE
zMl}>#YOAnxDNRj9x$(no1uAle_)9-j13uM*+5j1PHFcA$UBg?-;wR}Ccg8xEbm6pq
zigBKtl64S6=4_wHLq9KHd=E3~!<eM0qCTh8EUy6QponyT^7n&@f2ebMug9_^TpF+X
zUN6?W<&W;^G}}-`l8h-VN*qchP9*JIT)fbjKY;rJ>kG|wZ+OQ_#3EC@;!#ml4i~u#
zmM(u}c03}1^svc{Ge7J6EP1bpM)(Q4Jh1iv{)fSu08Jyx(2K#RX3s>Q+1C|W;zSK+
z`5t@PS2GS(NQ|*xPe1Q3UjS*_WxMs&pal*rr-Etn$7yN|Nx?zcZ)Kv<-9q*<kp7(y
z-}*u=z1%8KEex9-J?!94uftbc*g>IN<CUkA<)r%^F)g1!^)u{J;qCqI+wX3;^*UNr
zKE2lB#PkaWR&S?Q9x+>ztUhI0py?uRrm!`KFQ1Ylkb~~Y>-uCSI*fIPL*|P4p7t+T
zF7L2Nvsd+Z59rlS-topo<a}7Yj5TlSriVl`pbzyBw0Pg<G1kSPL&q!!x8#~bI;^06
z+|oiK8ym;e<hjkQyf@(gNW}lMQU9wH)c{NyzD|KY_i^#<m+g9jraxY%<9Hn+;SD~F
z;l{MgTWgwU);PH!u|VYPhOZJ6A>#P#j5+6g-4!SKjVQS3Y?D^p)?Fwpywz37_d3+}
zUR{28K2-4nmG0&gVP97;-ZV%(E)?0+R1TCb>N9(PDQz7)&at_##0tX_CO7>|Fc$h}
zC6mF`lY?jXKrSt=hm97^+xw->eSfGjRx2&T@3ATbrH>c_&xcwSGuKJ~{L%EogPO<N
z9#9V6RGL|IuT@YqdstQ&0{g<SdlI?TN5U)fNsQi)ju!K)>T7ousbs2ofz1ylY~;JF
zt*ev$u*O8el(+|TP|hCd@&mCfGRVy0KCIq3>+s19i@ZrU8@{ZAgxzfOv)Iq7(87?6
zoizwxLD;W)kO*HkYghlBqWO?YKa96AqxjHs;FdCkS%e^mx>p!i8!p))@o0b>M@>MD
zH0dS>7KLDfOg+l$Wt?c*^SG8thbhOb!Q?F?IjY-|O$`B*=!&wsGB(W&q=34@i>Vsf
z<R$iz?8+yD8p`wU!`~tw4W{3yQ9W7_-2fAUFNBgSX9@1V?uk>fEG>zG0YY|*^*WX3
zJ2~m&fu<>}vji{{5CGHts*HF3yjfa`&B%S;z36%Oa_`9w{@LU$aoEiR+KK#FT^&&~
z_Zp>XK?7f=qiwyIUwTm=1(ZCJ;=PYEEuH>Bir-I{W?BUnj8lT<WM0vvEcL(QotWa1
zzy;h)>}d`ci97W61dJR5CJ;96@wK`oqv%3PXitq*{2s~|I%%j+8)uW6=h0d`Ep)GH
zF+NY2uaS0w_aS5_liFX^V|lMWD1TbvEk}(BM-S+IfVJ&qjh>`5-pY&fj>(TR&_bA)
z1-y;>PO9GoFR<k=u|A1}2#LfbV6_c__TbyAG0gqT?+l=ipw(lt@LvoOKu+H0j@GHS
z%A*Ruve07Vnt+|G;8E*)>O6JQe64}s^?H^z51M>~?14))7sCx=;ON(sijZ1~4AH_0
zuC9;*xo)ZIhw|+9YTGGr&bo#6a0@#uU|KGuE_FH}z6$ZGcdLy4M?ZDM6W}#|Jfg0h
z8W2M?Q?%Tnj6P_}n@m4DOPeR|P39^oTwWjbrQ7;_K#mZH4@`a`wm+#UvTO;N<FsmE
zWDP{mE=Ei|+xmT2(d>SI8#+C!@wh%;5K1}2Y>0^B(TUL+E!rMp&`BOeIX@bl+j%Co
z@5>Q88V6?oLGD{@F8a~6<LG(|!L*q`Kv{9$n(U^>4w_D8l9Z7JVjBj)mUC)Wt6Llk
zJYHQlaJzXCqn2QW!zgktp8rmU<T+7^m}ZC4yrJZPp*eC+JMtXaJY@87&$LAGV^fUQ
zwJ?1{&7<}oL&;9fW&P7nKxD}_^4iPUg`cgqnYSeTg2ro!Y*ZNy@biMirCNk>)Edc+
zCYWl?;-we{$9je$bTSpoWRBa(@@yTnu6(b+Ma;sj`+y<K|FY9|9z-I}(#629?;^hX
z35^*|erb5EmINd75(m3ZfSw@)R`*#MtSkkdRe=BHW&L47u+gw9V|%QwFw)ViHdg$F
z)E_VZ9_}}DLQC5{z&X=_?@V<N@5SDp&_p)SaI=ek^*bpId*aOcJAf<2zgV>UCGiM@
zF$nnRCk#I(cqAq{F62_=@LxtH73Il|Q5>~{hHZHD{~D)|=S2TQp*aH#m5@U~HQLcc
zs1(}vV=>#mYa~NFY9}Tg)C)VD%B@k@T&;%LZ-nJj6leR|*4{Q-c6p5x_f;tmB=wo(
z&7YGK*iKs{s+ndmAUm)gRZ*olVAlkm$u)YawMk1gHMaM=I6D&`*6=t|?qh3l9a#o%
zuPDx%n58V9M#fMOMav(AW+zOS=FUF<drBrj7Npq1b^}kbqZkpwjXwPUPxY_aot`MS
erHE$Oy`r&slO$p|#CW}?19UVEG_Y!Rul@yA^|D?7

literal 0
HcmV?d00001

diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-003.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-003.xht
index 86c19d939738..c673a969bfd1 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-003.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-003.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -44,4 +44,4 @@
   <div>T</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-005.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-005.xht
index 44660e027525..9221161ea0f0 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-005.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-005.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
   <meta content="This test checks that 'text-align: left' aligns an inline box within a line box with respect to the line box's logical left side (line-left side). Here, 'direction: rtl' has no impact, no influence on such alignment." name="assert" />
@@ -45,4 +45,4 @@
   <div>T</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-007.xht b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-007.xht
index 4c042d6f0e39..cd02ff341f74 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-007.xht
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-align-vlr-007.xht
@@ -8,7 +8,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
-  <link rel="match" href="../css21/reference/ref-filled-green-100px-square.xht" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
 
   <meta content="ahem image" name="flags" />
 
@@ -43,4 +43,4 @@
   <div>T</div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-all-001.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-all-001.html
index 31378a2514d4..cd6f35c1acee 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-all-001.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-all-001.html
@@ -7,7 +7,7 @@
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
 <link rel="match" href="reference/text-combine-upright-value-single-character.html">
 <meta name="assert" content="'text-combine-upright: all' rotates the composition even if tate-chu-yoko">
-<meta name="flags" content="font">
+<meta name="flags" content="">
 <style>
 @font-face {
   font-family: tcu-font;
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-digits2-001.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-digits2-001.html
index 7cdee8889788..ab77a146ba76 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-digits2-001.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-combine-upright-value-digits2-001.html
@@ -7,7 +7,7 @@
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">
 <link rel="match" href="reference/text-combine-upright-value-single-character.html">
 <meta name="assert" content="the 'digits' values in text-combine-upright rotates the composition even if there is only one character inside tate-chu-yoko.">
-<meta name="flags" content="font">
+<meta name="flags" content="">
 <style>
 @font-face {
   font-family: tcu-font;
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100-ref.html
index 4253da3a581b..0b9ba9b14d2d 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: mixed.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100.html
index ce4911e25d6b..35052c6d70f9 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vlr-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: mixed.</title>
 <link rel="match" href="text-orientation-mixed-vlr-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100-ref.html
index da97ab9dd613..e6e89811f430 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: mixed.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100.html
index d7ff10dad117..38bc406db9ba 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-mixed-vrl-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: mixed.</title>
 <link rel="match" href="text-orientation-mixed-vrl-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100-ref.html
index a38545580178..9710ebb3af63 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: sideways.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100.html
index bb6a4154e917..571d7b9c580e 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vlr-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: sideways.</title>
 <link rel="match" href="text-orientation-sideways-vlr-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100-ref.html
index 073eb129b617..7240ae1f6780 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: sideways.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100.html
index 83815b30f812..91cb00f76886 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-sideways-vrl-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: sideways.</title>
 <link rel="match" href="text-orientation-sideways-vrl-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100-ref.html
index 32970a31751d..8769c6beec7c 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: upright.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100.html
index 9ab1cfdd2f21..34ccb72f281a 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vlr-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: upright.</title>
 <link rel="match" href="text-orientation-upright-vlr-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100-ref.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100-ref.html
index bb0bdd6c6204..3621f9352ebd 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100-ref.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: upright.</title>
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100.html b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100.html
index 1590c4c2af84..9a2961f2ad55 100644
--- a/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100.html
+++ b/layout/reftests/w3c-css/received/css-writing-modes-3/text-orientation-upright-vrl-100.html
@@ -3,7 +3,6 @@
 <title>CSS Writing Modes Test: writing-mode: vertical-rl; text-orientation: upright.</title>
 <link rel="match" href="text-orientation-upright-vrl-100-ref.html">
 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
-<meta name="flags" content="font">
 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
 <style>
 @font-face {
diff --git a/layout/reftests/w3c-css/received/css21/reference/ref-filled-green-100px-square.xht b/layout/reftests/w3c-css/received/css21/reference/ref-filled-green-100px-square.xht
deleted file mode 100644
index 05a13794482a..000000000000
--- a/layout/reftests/w3c-css/received/css21/reference/ref-filled-green-100px-square.xht
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-  <title>CSS Reftest Reference</title>
-  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
-  <style type="text/css"><![CDATA[
-  div
-  {
-  background-color: green;
-  height: 100px;
-  width: 100px;
-  }
-  ]]></style>
- </head>
- <body>
-  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
-  <div></div>
- </body>
-</html>
diff --git a/layout/reftests/w3c-css/received/import.log b/layout/reftests/w3c-css/received/import.log
index c3d12b811477..fc93e8372ca1 100644
--- a/layout/reftests/w3c-css/received/import.log
+++ b/layout/reftests/w3c-css/received/import.log
@@ -1,5 +1,6 @@
-Importing revision: 00be273354416756b2c89ecff5dc248009a21a19
-from repository: https://hg.csswg.org/test
+Importing revision: b369eca1d18725d94f7ce99862de113de393b69f
+from repository: https://github.com/w3c/web-platform-tests.git
+Importing css-conditional-3/OWNERS to css-conditional-3/OWNERS
 Importing css-conditional-3/at-media-whitespace-optional-001.html to css-conditional-3/at-media-whitespace-optional-001.html
 Importing css-conditional-3/reference/background-lime.html to css-conditional-3/reference/background-lime.html
 Importing css-conditional-3/at-media-whitespace-optional-002.html to css-conditional-3/at-media-whitespace-optional-002.html
@@ -44,7 +45,7 @@ Importing css-conditional-3/at-supports-036.html to css-conditional-3/at-support
 Importing css-conditional-3/at-supports-037.html to css-conditional-3/at-supports-037.html
 Importing css-conditional-3/at-supports-038.html to css-conditional-3/at-supports-038.html
 Importing css-conditional-3/at-supports-039.html to css-conditional-3/at-supports-039.html
-Importing css-multicol-1/multicol-basic-001.html to css-multicol-1/multicol-basic-001.html
+Importing css-multicol-1/OWNERS to css-multicol-1/OWNERS
 Importing css-multicol-1/support/1x1-green.png to css-multicol-1/support/1x1-green.png
 Importing css-multicol-1/support/1x1-lime.png to css-multicol-1/support/1x1-lime.png
 Importing css-multicol-1/support/1x1-maroon.png to css-multicol-1/support/1x1-maroon.png
@@ -85,10 +86,16 @@ Importing css-multicol-1/support/test-br.png to css-multicol-1/support/test-br.p
 Importing css-multicol-1/support/test-outer.png to css-multicol-1/support/test-outer.png
 Importing css-multicol-1/support/test-tl.png to css-multicol-1/support/test-tl.png
 Importing css-multicol-1/support/test-tr.png to css-multicol-1/support/test-tr.png
+Importing css-multicol-1/multicol-basic-001.html to css-multicol-1/multicol-basic-001.html
 Importing css-multicol-1/reference/multicol-basic-ref.html to css-multicol-1/reference/multicol-basic-ref.html
 Importing css-multicol-1/multicol-basic-002.html to css-multicol-1/multicol-basic-002.html
 Importing css-multicol-1/multicol-basic-003.html to css-multicol-1/multicol-basic-003.html
 Importing css-multicol-1/multicol-basic-004.html to css-multicol-1/multicol-basic-004.html
+Importing css-multicol-1/multicol-basic-005.xht to css-multicol-1/multicol-basic-005.xht
+Importing css-multicol-1/reference/multicol-basic-005-ref.xht to css-multicol-1/reference/multicol-basic-005-ref.xht
+Importing css-multicol-1/multicol-basic-006.xht to css-multicol-1/multicol-basic-006.xht
+Importing css-multicol-1/multicol-basic-007.xht to css-multicol-1/multicol-basic-007.xht
+Importing css-multicol-1/multicol-basic-008.xht to css-multicol-1/multicol-basic-008.xht
 Importing css-multicol-1/multicol-block-clip-001.xht to css-multicol-1/multicol-block-clip-001.xht
 Importing css-multicol-1/multicol-block-clip-001-ref.xht to css-multicol-1/multicol-block-clip-001-ref.xht
 Importing css-multicol-1/multicol-block-clip-002.xht to css-multicol-1/multicol-block-clip-002.xht
@@ -258,7 +265,7 @@ Importing css-multicol-1/multicol-rule-ridge-000.xht to css-multicol-1/multicol-
 Importing css-multicol-1/multicol-rule-samelength-001.xht to css-multicol-1/multicol-rule-samelength-001.xht
 Importing css-multicol-1/multicol-rule-samelength-001-ref.xht to css-multicol-1/multicol-rule-samelength-001-ref.xht
 Importing css-multicol-1/multicol-rule-shorthand-001.xht to css-multicol-1/multicol-rule-shorthand-001.xht
-Warning: href attribute found empty in ../../../../csswg-test/css-multicol-1\multicol-rule-shorthand-2.xht
+Warning: href attribute found empty in /Users/mozilla/web-platform-tests/css/css-multicol-1/multicol-rule-shorthand-2.xht
 Importing css-multicol-1/multicol-rule-solid-000.xht to css-multicol-1/multicol-rule-solid-000.xht
 Importing css-multicol-1/multicol-rule-solid-000-ref.xht to css-multicol-1/multicol-rule-solid-000-ref.xht
 Importing css-multicol-1/multicol-rule-stacking-001.xht to css-multicol-1/multicol-rule-stacking-001.xht
@@ -325,11 +332,12 @@ Importing css-multicol-1/multicol-width-small-001.xht to css-multicol-1/multicol
 Importing css-multicol-1/multicol-width-small-001-ref.xht to css-multicol-1/multicol-width-small-001-ref.xht
 Importing css-multicol-1/multicol-zero-height-001.xht to css-multicol-1/multicol-zero-height-001.xht
 Importing css-multicol-1/multicol-zero-height-001-ref.xht to css-multicol-1/multicol-zero-height-001-ref.xht
-Importing css-namespaces-3/prefix-001.xml to css-namespaces-3/prefix-001.xml
+Importing css-namespaces-3/OWNERS to css-namespaces-3/OWNERS
 Importing css-namespaces-3/support/fail.css to css-namespaces-3/support/fail.css
 Importing css-namespaces-3/support/scope-002a.css to css-namespaces-3/support/scope-002a.css
 Importing css-namespaces-3/support/scope-002b.css to css-namespaces-3/support/scope-002b.css
 Importing css-namespaces-3/support/syntax-007.css to css-namespaces-3/support/syntax-007.css
+Importing css-namespaces-3/prefix-001.xml to css-namespaces-3/prefix-001.xml
 Importing css-namespaces-3/reftest/ref-lime-1.xml to css-namespaces-3/reftest/ref-lime-1.xml
 Importing css-namespaces-3/prefix-002.xml to css-namespaces-3/prefix-002.xml
 Importing css-namespaces-3/prefix-003.xml to css-namespaces-3/prefix-003.xml
@@ -360,7 +368,7 @@ Importing css-namespaces-3/syntax-012.xml to css-namespaces-3/syntax-012.xml
 Importing css-namespaces-3/syntax-013.xml to css-namespaces-3/syntax-013.xml
 Importing css-namespaces-3/syntax-014.xml to css-namespaces-3/syntax-014.xml
 Importing css-namespaces-3/syntax-015.xml to css-namespaces-3/syntax-015.xml
-Importing css-values-3/attr-color-invalid-cast.html to css-values-3/attr-color-invalid-cast.html
+Importing css-values-3/OWNERS to css-values-3/OWNERS
 Importing css-values-3/support/1x1-green.png to css-values-3/support/1x1-green.png
 Importing css-values-3/support/1x1-lime.png to css-values-3/support/1x1-lime.png
 Importing css-values-3/support/1x1-maroon.png to css-values-3/support/1x1-maroon.png
@@ -405,6 +413,7 @@ Importing css-values-3/support/test-tr.png to css-values-3/support/test-tr.png
 Importing css-values-3/support/support/README to css-values-3/support/support/README
 Importing css-values-3/support/support/swatch-green.png to css-values-3/support/support/swatch-green.png
 Importing css-values-3/support/support/swatch-red.png to css-values-3/support/support/swatch-red.png
+Importing css-values-3/attr-color-invalid-cast.html to css-values-3/attr-color-invalid-cast.html
 Importing css-values-3/reference/200-200-green.html to css-values-3/reference/200-200-green.html
 Importing css-values-3/attr-color-invalid-fallback.html to css-values-3/attr-color-invalid-fallback.html
 Importing css-values-3/attr-color-valid.html to css-values-3/attr-color-valid.html
@@ -427,6 +436,10 @@ Importing css-values-3/calc-invalid-range-clamping.html to css-values-3/calc-inv
 Importing css-values-3/calc-parenthesis-stack.html to css-values-3/calc-parenthesis-stack.html
 Importing css-values-3/ch-unit-001.html to css-values-3/ch-unit-001.html
 Importing css-values-3/reference/ch-unit-001-ref.html to css-values-3/reference/ch-unit-001-ref.html
+Importing css-values-3/ch-unit-002.html to css-values-3/ch-unit-002.html
+Importing css-values-3/reference/ch-unit-002-ref.html to css-values-3/reference/ch-unit-002-ref.html
+Importing css-values-3/ch-unit-003.html to css-values-3/ch-unit-003.html
+Importing css-values-3/ch-unit-004.html to css-values-3/ch-unit-004.html
 Importing css-values-3/initial-background-color.html to css-values-3/initial-background-color.html
 Importing css-values-3/vh-calc-support-pct.html to css-values-3/vh-calc-support-pct.html
 Importing css-values-3/vh-calc-support.html to css-values-3/vh-calc-support.html
@@ -444,7 +457,7 @@ Importing css-values-3/vh-zero-support.html to css-values-3/vh-zero-support.html
 Importing css-values-3/vh_not_refreshing_on_chrome.html to css-values-3/vh_not_refreshing_on_chrome.html
 Importing css-values-3/reference/vh_not_refreshing_on_chrome-ref.html to css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
 Importing css-values-3/vh_not_refreshing_on_chrome_iframe.html to css-values-3/vh_not_refreshing_on_chrome_iframe.html
-Importing css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht to css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht
+Importing css-writing-modes-3/OWNERS to css-writing-modes-3/OWNERS
 Importing css-writing-modes-3/support/100x100-lime.png to css-writing-modes-3/support/100x100-lime.png
 Importing css-writing-modes-3/support/100x100-red.png to css-writing-modes-3/support/100x100-red.png
 Importing css-writing-modes-3/support/bg-red-1col-2row-320x320.png to css-writing-modes-3/support/bg-red-1col-2row-320x320.png
@@ -455,6 +468,10 @@ Importing css-writing-modes-3/support/bg-red-3col-2row-320x320.png to css-writin
 Importing css-writing-modes-3/support/bg-red-3col-3row-320x320.png to css-writing-modes-3/support/bg-red-3col-3row-320x320.png
 Importing css-writing-modes-3/support/bg-red-4col-2row-320x320.png to css-writing-modes-3/support/bg-red-4col-2row-320x320.png
 Importing css-writing-modes-3/support/bg-red-4col-3row-320x320.png to css-writing-modes-3/support/bg-red-4col-3row-320x320.png
+Importing css-writing-modes-3/support/bg-red-low-left-corn-320x320.png to css-writing-modes-3/support/bg-red-low-left-corn-320x320.png
+Importing css-writing-modes-3/support/bg-red-low-rght-corn-320x320.png to css-writing-modes-3/support/bg-red-low-rght-corn-320x320.png
+Importing css-writing-modes-3/support/bg-red-upp-left-corn-320x320.png to css-writing-modes-3/support/bg-red-upp-left-corn-320x320.png
+Importing css-writing-modes-3/support/bg-red-upp-rght-corn-320x320.png to css-writing-modes-3/support/bg-red-upp-rght-corn-320x320.png
 Importing css-writing-modes-3/support/block-flow-direction-025-exp-res.png to css-writing-modes-3/support/block-flow-direction-025-exp-res.png
 Importing css-writing-modes-3/support/block-flow-direction-066-exp-res.png to css-writing-modes-3/support/block-flow-direction-066-exp-res.png
 Importing css-writing-modes-3/support/blue-horiz-line-220x1.png to css-writing-modes-3/support/blue-horiz-line-220x1.png
@@ -566,6 +583,7 @@ Importing css-writing-modes-3/support/test-br.png to css-writing-modes-3/support
 Importing css-writing-modes-3/support/test-tl.png to css-writing-modes-3/support/test-tl.png
 Importing css-writing-modes-3/support/test-tr.png to css-writing-modes-3/support/test-tr.png
 Importing css-writing-modes-3/support/text-orientation-010.png to css-writing-modes-3/support/text-orientation-010.png
+Importing css-writing-modes-3/support/text-orientation-012.png to css-writing-modes-3/support/text-orientation-012.png
 Importing css-writing-modes-3/support/text-orientation-mixed-vrl-002.png to css-writing-modes-3/support/text-orientation-mixed-vrl-002.png
 Importing css-writing-modes-3/support/text-orientation-sideways-left-001.png to css-writing-modes-3/support/text-orientation-sideways-left-001.png
 Importing css-writing-modes-3/support/text-orientation-sideways-lr.png to css-writing-modes-3/support/text-orientation-sideways-lr.png
@@ -584,7 +602,7 @@ Importing css-writing-modes-3/support/adobe-fonts/CSSFWOrientationTest.otf to cs
 Importing css-writing-modes-3/support/adobe-fonts/CSSHWOrientationTest.otf to css-writing-modes-3/support/adobe-fonts/CSSHWOrientationTest.otf
 Importing css-writing-modes-3/support/adobe-fonts/LICENSE to css-writing-modes-3/support/adobe-fonts/LICENSE
 Importing css-writing-modes-3/support/adobe-fonts/README.md to css-writing-modes-3/support/adobe-fonts/README.md
-Importing css21/reference/ref-filled-green-100px-square.xht to css21/reference/ref-filled-green-100px-square.xht
+Importing css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht to css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht
 Importing css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht to css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht
 Importing css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht to css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht
 Importing css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht to css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht
@@ -1217,6 +1235,22 @@ Importing css-writing-modes-3/float-contiguous-vrl-008.xht to css-writing-modes-
 Importing css-writing-modes-3/float-contiguous-vrl-008-ref.xht to css-writing-modes-3/float-contiguous-vrl-008-ref.xht
 Importing css-writing-modes-3/float-contiguous-vrl-010.xht to css-writing-modes-3/float-contiguous-vrl-010.xht
 Importing css-writing-modes-3/float-contiguous-vrl-012.xht to css-writing-modes-3/float-contiguous-vrl-012.xht
+Importing css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht to css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht
+Importing css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht to css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht
+Importing css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht to css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht
+Importing css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht to css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht
+Importing css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht to css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht
+Importing css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht to css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht
+Importing css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht to css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht
+Importing css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht to css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht
+Importing css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht to css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht
+Importing css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht to css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht
+Importing css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht to css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht
+Importing css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht to css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht
+Importing css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht to css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht
+Importing css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht to css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht
+Importing css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht to css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht
+Importing css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht to css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht
 Importing css-writing-modes-3/float-shrink-to-fit-vlr-003.xht to css-writing-modes-3/float-shrink-to-fit-vlr-003.xht
 Importing css-writing-modes-3/float-shrink-to-fit-vlr-005.xht to css-writing-modes-3/float-shrink-to-fit-vlr-005.xht
 Importing css-writing-modes-3/float-shrink-to-fit-vlr-007.xht to css-writing-modes-3/float-shrink-to-fit-vlr-007.xht
@@ -1361,6 +1395,10 @@ Importing css-writing-modes-3/margin-collapse-vrl-034.xht to css-writing-modes-3
 Importing css-writing-modes-3/margin-collapse-vrl-036.xht to css-writing-modes-3/margin-collapse-vrl-036.xht
 Importing css-writing-modes-3/margin-vlr-003.xht to css-writing-modes-3/margin-vlr-003.xht
 Importing css-writing-modes-3/margin-vrl-002.xht to css-writing-modes-3/margin-vrl-002.xht
+Importing css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht to css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht
+Importing css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht to css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht
+Importing css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht to css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht
+Importing css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht to css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht
 Importing css-writing-modes-3/ortho-htb-alongside-vrl-floats-002.xht to css-writing-modes-3/ortho-htb-alongside-vrl-floats-002.xht
 Importing css-writing-modes-3/ortho-htb-alongside-vrl-floats-002-ref.xht to css-writing-modes-3/ortho-htb-alongside-vrl-floats-002-ref.xht
 Importing css-writing-modes-3/ortho-htb-alongside-vrl-floats-006.xht to css-writing-modes-3/ortho-htb-alongside-vrl-floats-006.xht
@@ -1375,6 +1413,22 @@ Importing css-writing-modes-3/outline-inline-vlr-006.html to css-writing-modes-3
 Importing css-writing-modes-3/reference/outline-inline-vlr-006.html to css-writing-modes-3/reference/outline-inline-vlr-006.html
 Importing css-writing-modes-3/outline-inline-vrl-006.html to css-writing-modes-3/outline-inline-vrl-006.html
 Importing css-writing-modes-3/reference/outline-inline-vrl-006.html to css-writing-modes-3/reference/outline-inline-vrl-006.html
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht to css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht
+Importing css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht to css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
 Importing css-writing-modes-3/padding-vlr-005.xht to css-writing-modes-3/padding-vlr-005.xht
 Importing css-writing-modes-3/padding-vrl-004.xht to css-writing-modes-3/padding-vrl-004.xht
 Importing css-writing-modes-3/percent-margin-vlr-003.xht to css-writing-modes-3/percent-margin-vlr-003.xht
@@ -1401,6 +1455,216 @@ Importing css-writing-modes-3/row-progression-vrl-002.xht to css-writing-modes-3
 Importing css-writing-modes-3/row-progression-vrl-004.xht to css-writing-modes-3/row-progression-vrl-004.xht
 Importing css-writing-modes-3/row-progression-vrl-006.xht to css-writing-modes-3/row-progression-vrl-006.xht
 Importing css-writing-modes-3/row-progression-vrl-008.xht to css-writing-modes-3/row-progression-vrl-008.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht to css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht
+Importing css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht to css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht
+Importing css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht to css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht to css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht
+Importing css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht to css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht to css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht
+Importing css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht to css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht
 Importing css-writing-modes-3/table-column-order-002.xht to css-writing-modes-3/table-column-order-002.xht
 Importing css-writing-modes-3/table-column-order-003.xht to css-writing-modes-3/table-column-order-003.xht
 Importing css-writing-modes-3/table-column-order-004.xht to css-writing-modes-3/table-column-order-004.xht
@@ -1576,23 +1840,29 @@ Importing css-writing-modes-3/writing-mode-vertical-rl-002.xht to css-writing-mo
 Importing css-writing-modes-3/reftest/writing-mode-vertical-rl-002-ref.xht to css-writing-modes-3/reftest/writing-mode-vertical-rl-002-ref.xht
 Importing css-writing-modes-3/writing-mode-vertical-rl-003.htm to css-writing-modes-3/writing-mode-vertical-rl-003.htm
 Importing css-writing-modes-3/writing-mode-vertical-rl-003-ref.htm to css-writing-modes-3/writing-mode-vertical-rl-003-ref.htm
-Importing selectors-4/focus-within-001.html to selectors-4/focus-within-001.html
-Importing selectors-4/focus-within-001-ref.html to selectors-4/focus-within-001-ref.html
-Importing selectors-4/focus-within-002.html to selectors-4/focus-within-002.html
-Importing selectors-4/focus-within-003.html to selectors-4/focus-within-003.html
-Importing selectors-4/focus-within-004.html to selectors-4/focus-within-004.html
-Importing selectors-4/focus-within-005.html to selectors-4/focus-within-005.html
-Importing selectors-4/focus-within-006.html to selectors-4/focus-within-006.html
-Importing selectors-4/focus-within-shadow-001.html to selectors-4/focus-within-shadow-001.html
-Importing selectors-4/focus-within-shadow-001-ref.html to selectors-4/focus-within-shadow-001-ref.html
-Importing selectors-4/focus-within-shadow-002.html to selectors-4/focus-within-shadow-002.html
-Importing selectors-4/focus-within-shadow-003.html to selectors-4/focus-within-shadow-003.html
-Importing selectors-4/focus-within-shadow-004.html to selectors-4/focus-within-shadow-004.html
-Importing selectors-4/focus-within-shadow-005.html to selectors-4/focus-within-shadow-005.html
-Importing selectors-4/of-type-selectors.xhtml to selectors-4/of-type-selectors.xhtml
-Importing selectors-4/of-type-selectors-ref.xhtml to selectors-4/of-type-selectors-ref.xhtml
-Importing selectors-4/selector-required.html to selectors-4/selector-required.html
-Importing selectors-4/selector-required-ref.html to selectors-4/selector-required-ref.html
-Importing selectors-4/selectors-dir-selector-ltr-001.html to selectors-4/selectors-dir-selector-ltr-001.html
-Importing selectors-4/selectors-dir-selector-ref.html to selectors-4/selectors-dir-selector-ref.html
-Importing selectors-4/selectors-dir-selector-rtl-001.html to selectors-4/selectors-dir-selector-rtl-001.html
+Importing selectors4/OWNERS to selectors4/OWNERS
+Importing selectors4/focus-within-001.html to selectors4/focus-within-001.html
+Importing selectors4/focus-within-001-ref.html to selectors4/focus-within-001-ref.html
+Importing selectors4/focus-within-002.html to selectors4/focus-within-002.html
+Importing selectors4/focus-within-003.html to selectors4/focus-within-003.html
+Importing selectors4/focus-within-004.html to selectors4/focus-within-004.html
+Importing selectors4/focus-within-005.html to selectors4/focus-within-005.html
+Importing selectors4/focus-within-006.html to selectors4/focus-within-006.html
+Importing selectors4/focus-within-006-ref.html to selectors4/focus-within-006-ref.html
+Importing selectors4/focus-within-007.html to selectors4/focus-within-007.html
+Importing selectors4/focus-within-007-ref.html to selectors4/focus-within-007-ref.html
+Importing selectors4/focus-within-008.html to selectors4/focus-within-008.html
+Importing selectors4/focus-within-010.html to selectors4/focus-within-010.html
+Importing selectors4/focus-within-shadow-001-ref.html to selectors4/focus-within-shadow-001-ref.html
+Importing selectors4/focus-within-shadow-001.html to selectors4/focus-within-shadow-001.html
+Importing selectors4/focus-within-shadow-002.html to selectors4/focus-within-shadow-002.html
+Importing selectors4/focus-within-shadow-003.html to selectors4/focus-within-shadow-003.html
+Importing selectors4/focus-within-shadow-004.html to selectors4/focus-within-shadow-004.html
+Importing selectors4/focus-within-shadow-005.html to selectors4/focus-within-shadow-005.html
+Importing selectors4/focus-within-shadow-006.html to selectors4/focus-within-shadow-006.html
+Importing selectors4/of-type-selectors.xhtml to selectors4/of-type-selectors.xhtml
+Importing selectors4/of-type-selectors-ref.xhtml to selectors4/of-type-selectors-ref.xhtml
+Importing selectors4/selector-required.html to selectors4/selector-required.html
+Importing selectors4/selector-required-ref.html to selectors4/selector-required-ref.html
+Importing selectors4/selectors-dir-selector-ltr-001.html to selectors4/selectors-dir-selector-ltr-001.html
+Importing selectors4/selectors-dir-selector-rtl-001.html to selectors4/selectors-dir-selector-rtl-001.html
diff --git a/layout/reftests/w3c-css/received/reftest.list b/layout/reftests/w3c-css/received/reftest.list
index 696e808a45cd..002a73ce46bf 100644
--- a/layout/reftests/w3c-css/received/reftest.list
+++ b/layout/reftests/w3c-css/received/reftest.list
@@ -45,13 +45,17 @@
 == css-multicol-1/multicol-basic-002.html css-multicol-1/reference/multicol-basic-ref.html
 == css-multicol-1/multicol-basic-003.html css-multicol-1/reference/multicol-basic-ref.html
 == css-multicol-1/multicol-basic-004.html css-multicol-1/reference/multicol-basic-ref.html
+== css-multicol-1/multicol-basic-005.xht css-multicol-1/reference/multicol-basic-005-ref.xht
+== css-multicol-1/multicol-basic-006.xht css-multicol-1/reference/multicol-basic-005-ref.xht
+== css-multicol-1/multicol-basic-007.xht css-multicol-1/reference/multicol-basic-005-ref.xht
+== css-multicol-1/multicol-basic-008.xht css-multicol-1/reference/multicol-basic-005-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-block-clip-001.xht css-multicol-1/multicol-block-clip-001-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-block-clip-002.xht css-multicol-1/multicol-block-clip-002-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-br-inside-avoidcolumn-001.xht css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-break-000.xht css-multicol-1/multicol-break-000-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-break-001.xht css-multicol-1/multicol-break-001-ref.xht
 fuzzy(135,1008) == css-multicol-1/multicol-clip-001.xht css-multicol-1/multicol-clip-001-ref.xht
-fuzzy(135,702) == css-multicol-1/multicol-clip-002.xht css-multicol-1/multicol-clip-002-ref.xht
+fuzzy(135,770) == css-multicol-1/multicol-clip-002.xht css-multicol-1/multicol-clip-002-ref.xht
 fuzzy(135,467) == css-multicol-1/multicol-collapsing-001.xht css-multicol-1/multicol-collapsing-001-ref.xht
 fuzzy(87,180) == css-multicol-1/multicol-columns-001.xht css-multicol-1/multicol-columns-001-ref.xht
 fuzzy(87,180) == css-multicol-1/multicol-columns-002.xht css-multicol-1/multicol-columns-001-ref.xht
@@ -131,31 +135,23 @@ fuzzy(106,354) == css-multicol-1/multicol-rule-double-000.xht css-multicol-1/mul
 fails-if(OSX||winWidget) == css-multicol-1/multicol-rule-fraction-001.xht css-multicol-1/multicol-rule-fraction-001-ref.xht
 fails-if(OSX||winWidget) == css-multicol-1/multicol-rule-fraction-002.xht css-multicol-1/multicol-rule-fraction-002-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-rule-fraction-003.xht css-multicol-1/multicol-rule-fraction-3-ref.xht
-fuzzy(106,354) fails-if(webrender) == css-multicol-1/multicol-rule-groove-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
-skip-if(!webrender) pref(layers.advanced.border-layers,1) == css-multicol-1/multicol-rule-groove-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
+fuzzy(127,500) fails-if(webrender) == css-multicol-1/multicol-rule-groove-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
 fuzzy(94,256) == css-multicol-1/multicol-rule-hidden-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht
-fuzzy(106,354) fails-if(webrender) == css-multicol-1/multicol-rule-inset-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
-skip-if(!webrender) pref(layers.advanced.border-layers,1) == css-multicol-1/multicol-rule-inset-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
+fuzzy(127,500) fails-if(webrender) == css-multicol-1/multicol-rule-inset-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
 fuzzy(255,2808) == css-multicol-1/multicol-rule-large-001.xht css-multicol-1/multicol-rule-large-001-ref.xht
 fuzzy(94,256) == css-multicol-1/multicol-rule-none-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht
-fuzzy(106,354) fails-if(webrender) == css-multicol-1/multicol-rule-outset-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
-skip-if(!webrender) pref(layers.advanced.border-layers,1) == css-multicol-1/multicol-rule-outset-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
+fuzzy(127,500) fails-if(webrender) == css-multicol-1/multicol-rule-outset-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
 == css-multicol-1/multicol-rule-percent-001.xht css-multicol-1/multicol-containing-002-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-rule-px-001.xht css-multicol-1/multicol-rule-ref.xht
-fuzzy(106,354) fails-if(webrender) == css-multicol-1/multicol-rule-ridge-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
-skip-if(!webrender) pref(layers.advanced.border-layers,1) == css-multicol-1/multicol-rule-ridge-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
+fuzzy(127,500) fails-if(webrender) == css-multicol-1/multicol-rule-ridge-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
 == css-multicol-1/multicol-rule-samelength-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht
 == css-multicol-1/multicol-rule-shorthand-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht
 fuzzy(106,354) == css-multicol-1/multicol-rule-solid-000.xht css-multicol-1/multicol-rule-solid-000-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-rule-stacking-001.xht css-multicol-1/multicol-rule-stacking-ref.xht
 fails-if(webrender) == css-multicol-1/multicol-rule-style-groove-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
-skip-if(!webrender) pref(layers.advanced.table,1) == css-multicol-1/multicol-rule-style-groove-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
 fails-if(webrender) == css-multicol-1/multicol-rule-style-inset-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
-skip-if(!webrender) pref(layers.advanced.table,1) == css-multicol-1/multicol-rule-style-inset-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
 fails-if(webrender) == css-multicol-1/multicol-rule-style-outset-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
-skip-if(!webrender) pref(layers.advanced.table,1) == css-multicol-1/multicol-rule-style-outset-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
 fails-if(webrender) == css-multicol-1/multicol-rule-style-ridge-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
-skip-if(!webrender) pref(layers.advanced.table,1) == css-multicol-1/multicol-rule-style-ridge-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-shorthand-001.xht css-multicol-1/multicol-rule-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-span-000.xht css-multicol-1/multicol-span-000-ref.xht
 fails-if(!styloVsGecko) == css-multicol-1/multicol-span-all-001.xht css-multicol-1/multicol-span-all-001-ref.xht
@@ -231,7 +227,10 @@ fails-if(!stylo) == css-values-3/calc-in-media-queries-001.html css-values-3/ref
 fails-if(!stylo) == css-values-3/calc-in-media-queries-002.html css-values-3/reference/all-green.html
 == css-values-3/calc-invalid-range-clamping.html css-values-3/reference/200-200-green.html
 == css-values-3/calc-parenthesis-stack.html css-values-3/reference/all-green.html
-fuzzy-if(OSX,40,6) == css-values-3/ch-unit-001.html css-values-3/reference/ch-unit-001-ref.html
+fuzzy-if(OSX||Android,78,197) == css-values-3/ch-unit-001.html css-values-3/reference/ch-unit-001-ref.html
+fuzzy(50,160) == css-values-3/ch-unit-002.html css-values-3/reference/ch-unit-002-ref.html
+fails-if(!styloVsGecko) == css-values-3/ch-unit-003.html css-values-3/reference/ch-unit-001-ref.html
+fuzzy(78,197) == css-values-3/ch-unit-004.html css-values-3/reference/ch-unit-001-ref.html
 == css-values-3/initial-background-color.html css-values-3/reference/all-green.html
 == css-values-3/vh-calc-support-pct.html css-values-3/reference/all-green.html
 == css-values-3/vh-calc-support.html css-values-3/reference/all-green.html
@@ -248,32 +247,32 @@ skip == css-values-3/vh-support-transform-translate.html css-values-3/reference/
 == css-values-3/vh-zero-support.html css-values-3/reference/all-green.html
 skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
 skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
-== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-003.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-005.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-007.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-009.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-011.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-013.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-015.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-017.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht css21/reference/ref-filled-green-100px-square.xht
-skip == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vlr-019.xht reference/ref-filled-green-100px-square.xht
+skip == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-021.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-023.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-025.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-027.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-029.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-031.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vlr-033.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-002.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-006.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-010.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-012.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-004-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-014.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-016.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
-== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht css21/reference/ref-filled-green-100px-square.xht
-skip == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/abs-pos-non-replaced-icb-vrl-018.xht reference/ref-filled-green-100px-square.xht
+skip == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-020.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-022.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-024.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/abs-pos-non-replaced-icb-vrl-026.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
@@ -511,10 +510,10 @@ fuzzy-if(OSX||winWidget,255,480) == css-writing-modes-3/abs-pos-non-replaced-vrl
 == css-writing-modes-3/background-size-document-root-vrl-004.html css-writing-modes-3/background-size-document-root-vrl-002-ref.xht
 == css-writing-modes-3/background-size-document-root-vrl-006.html css-writing-modes-3/background-size-document-root-vrl-002-ref.xht
 == css-writing-modes-3/background-size-document-root-vrl-008.html css-writing-modes-3/background-size-document-root-vrl-002-ref.xht
-fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-002.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-003.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-004.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-005.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-002.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-003.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-004.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,600) == css-writing-modes-3/baseline-inline-non-replaced-005.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/baseline-inline-replaced-002.xht css-writing-modes-3/baseline-inline-replaced-002-ref.xht
 == css-writing-modes-3/baseline-inline-replaced-003.xht css-writing-modes-3/baseline-inline-replaced-002-ref.xht
 == css-writing-modes-3/bidi-embed-001.html css-writing-modes-3/reference/bidi-embed-001.html
@@ -660,18 +659,18 @@ fuzzy-if(OSX||winWidget,213,1540) == css-writing-modes-3/block-flow-direction-vr
 == css-writing-modes-3/block-plaintext-002.html css-writing-modes-3/reference/block-plaintext-002.html
 == css-writing-modes-3/block-plaintext-003.html css-writing-modes-3/reference/block-plaintext-003.html
 == css-writing-modes-3/block-plaintext-004.html css-writing-modes-3/reference/block-plaintext-004.html
-== css-writing-modes-3/border-conflict-element-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vlr-011.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vlr-013.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-010.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/border-conflict-element-vrl-012.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-003.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-005.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-007.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-009.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-011.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vlr-013.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-002.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-004.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-006.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-008.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-010.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/border-conflict-element-vrl-012.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/border-spacing-vlr-003.xht css-writing-modes-3/border-spacing-vrl-002-ref.xht
 == css-writing-modes-3/border-spacing-vlr-005.xht css-writing-modes-3/border-spacing-vrl-002-ref.xht
 == css-writing-modes-3/border-spacing-vrl-002.xht css-writing-modes-3/border-spacing-vrl-002-ref.xht
@@ -682,10 +681,10 @@ fuzzy-if(OSX||winWidget,213,1540) == css-writing-modes-3/block-flow-direction-vr
 fuzzy-if(OSX,255,200) == css-writing-modes-3/box-offsets-rel-pos-vlr-005.xht css-writing-modes-3/box-offsets-rel-pos-vlr-005-ref.xht
 == css-writing-modes-3/box-offsets-rel-pos-vrl-002.xht css-writing-modes-3/abs-pos-non-replaced-vrl-012-ref.xht
 fuzzy-if(OSX,255,200) == css-writing-modes-3/box-offsets-rel-pos-vrl-004.xht css-writing-modes-3/box-offsets-rel-pos-vrl-004-ref.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vlr-003.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vlr-005.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vrl-002.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/caption-side-vrl-004.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/central-baseline-alignment-002.xht css-writing-modes-3/central-baseline-alignment-002-ref.xht
 fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/central-baseline-alignment-003.xht css-writing-modes-3/central-baseline-alignment-002-ref.xht
 == css-writing-modes-3/clearance-calculations-vrl-002.xht css-writing-modes-3/clearance-calculations-vrl-002-ref.xht
@@ -708,69 +707,77 @@ fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/central-baseline-alignme
 == css-writing-modes-3/clip-rect-vrl-012.xht css-writing-modes-3/clip-rect-vrl-012-ref.xht
 == css-writing-modes-3/clip-rect-vrl-014.xht css-writing-modes-3/clip-rect-vrl-014-ref.xht
 == css-writing-modes-3/clip-rect-vrl-016.xht css-writing-modes-3/clip-rect-vrl-016-ref.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
-fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/different-block-flow-dir-001.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/different-block-flow-dir-002.xht css21/reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-003.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-005.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-007.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vlr-009.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-002.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-004.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-006.xht reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/contiguous-floated-table-vrl-008.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/different-block-flow-dir-001.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/different-block-flow-dir-002.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/direction-vlr-003.xht css-writing-modes-3/direction-vlr-003-ref.xht
-fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/direction-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/direction-vlr-005.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/direction-vrl-002.xht css-writing-modes-3/direction-vrl-002-ref.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/direction-vrl-004.xht css-writing-modes-3/direction-vrl-004-ref.xht
 fails-if(!styloVsGecko) == css-writing-modes-3/flexbox_align-items-stretch-writing-modes.html css-writing-modes-3/flexbox_align-items-stretch-writing-modes-ref.html
-== css-writing-modes-3/float-clear-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-clear-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vlr-003.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vlr-005.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vlr-007.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vlr-009.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vrl-002.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vrl-004.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vrl-006.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-clear-vrl-008.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/float-contiguous-vlr-003.xht css-writing-modes-3/inline-replaced-vrl-004-ref.xht
 == css-writing-modes-3/float-contiguous-vlr-005.xht css-writing-modes-3/inline-replaced-vrl-004-ref.xht
 == css-writing-modes-3/float-contiguous-vlr-007.xht css-writing-modes-3/float-contiguous-vlr-007-ref.xht
 == css-writing-modes-3/float-contiguous-vlr-009.xht css-writing-modes-3/float-contiguous-vlr-009-ref.xht
-fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vlr-011.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vlr-011.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vlr-013.xht css-writing-modes-3/float-contiguous-vrl-012-ref.xht
 == css-writing-modes-3/float-contiguous-vrl-002.xht css-writing-modes-3/inline-replaced-vrl-004-ref.xht
 == css-writing-modes-3/float-contiguous-vrl-004.xht css-writing-modes-3/inline-replaced-vrl-004-ref.xht
 == css-writing-modes-3/float-contiguous-vrl-006.xht css-writing-modes-3/float-contiguous-vrl-006-ref.xht
 == css-writing-modes-3/float-contiguous-vrl-008.xht css-writing-modes-3/float-contiguous-vrl-008-ref.xht
-fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vrl-010.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vrl-010.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,135,902) == css-writing-modes-3/float-contiguous-vrl-012.xht css-writing-modes-3/float-contiguous-vrl-012-ref.xht
-== css-writing-modes-3/float-shrink-to-fit-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-shrink-to-fit-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-shrink-to-fit-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-011.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-013.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-004.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-006.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-010.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-012.xht css21/reference/ref-filled-green-100px-square.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-lft-orthog-htb-in-vlr-002.xht css-writing-modes-3/float-lft-orthog-htb-in-vlr-002-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-lft-orthog-htb-in-vrl-002.xht css-writing-modes-3/float-lft-orthog-htb-in-vrl-002-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-lft-orthog-vlr-in-htb-002.xht css-writing-modes-3/float-lft-orthog-vlr-in-htb-002-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-lft-orthog-vrl-in-htb-002.xht css-writing-modes-3/float-lft-orthog-vrl-in-htb-002-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003.xht css-writing-modes-3/float-rgt-orthog-htb-in-vlr-003-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003.xht css-writing-modes-3/float-rgt-orthog-htb-in-vrl-003-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003.xht css-writing-modes-3/float-rgt-orthog-vlr-in-htb-003-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003.xht css-writing-modes-3/float-rgt-orthog-vrl-in-htb-003-ref.xht
+== css-writing-modes-3/float-shrink-to-fit-vlr-003.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vlr-005.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vlr-007.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-shrink-to-fit-vlr-009.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vrl-002.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vrl-004.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vrl-006.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-shrink-to-fit-vrl-008.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/float-shrink-to-fit-vrl-vlr-016.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-003.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-005.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-007.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-009.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-011.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vlr-013.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-002.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-004.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-006.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-008.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-010.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,93,300) == css-writing-modes-3/float-vrl-012.xht reference/ref-filled-green-100px-square.xht
 != css-writing-modes-3/full-width-001.html css-writing-modes-3/reference/full-width-001-horizontal-notref.html
 != css-writing-modes-3/full-width-001.html css-writing-modes-3/reference/full-width-001-nofullwidth-notref.html
 != css-writing-modes-3/full-width-002.html css-writing-modes-3/reference/full-width-002-notcu-notref.html
 != css-writing-modes-3/full-width-002.html css-writing-modes-3/reference/full-width-002-horizontal-notref.html
 skip != css-writing-modes-3/full-width-003.html css-writing-modes-3/reference/full-width-002-notcu-notref.html
 skip != css-writing-modes-3/full-width-003.html css-writing-modes-3/reference/full-width-002-horizontal-notref.html
-fuzzy-if(OSX||winWidget,62,404) == css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,62,404) == css-writing-modes-3/height-width-inline-non-replaced-vlr-003.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,62,404) == css-writing-modes-3/height-width-inline-non-replaced-vrl-002.xht css-writing-modes-3/abs-pos-non-replaced-icb-vrl-008-ref.xht
 == css-writing-modes-3/horizontal-rule-vlr-003.xht css-writing-modes-3/horizontal-rule-vlr-003-ref.xht
 == css-writing-modes-3/horizontal-rule-vlr-005.xht css-writing-modes-3/horizontal-rule-vrl-004-ref.xht
@@ -847,26 +854,30 @@ fails-if(!styloVsGecko) == css-writing-modes-3/line-box-height-vrl-004.xht css-w
 == css-writing-modes-3/line-box-height-vrl-008.xht css-writing-modes-3/line-box-height-vrl-006-ref.xht
 fails-if(!styloVsGecko) == css-writing-modes-3/line-box-height-vrl-010.xht css-writing-modes-3/line-box-height-vrl-010-ref.xht
 fails-if(!styloVsGecko) == css-writing-modes-3/line-box-height-vrl-012.xht css-writing-modes-3/line-box-height-vrl-010-ref.xht
-== css-writing-modes-3/margin-collapse-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-009.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-011.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-015.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-017.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-025.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-031.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-035.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vlr-037.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-002.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-008.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-010.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-014.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-016.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-024.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-030.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-034.xht css21/reference/ref-filled-green-100px-square.xht
-== css-writing-modes-3/margin-collapse-vrl-036.xht css21/reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-003.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-009.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-011.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-015.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-017.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-025.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-031.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-035.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vlr-037.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-002.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-008.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-010.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-014.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-016.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-024.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-030.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-034.xht reference/ref-filled-green-100px-square.xht
+== css-writing-modes-3/margin-collapse-vrl-036.xht reference/ref-filled-green-100px-square.xht
 == css-writing-modes-3/margin-vlr-003.xht css-writing-modes-3/margin-vrl-002-ref.xht
 == css-writing-modes-3/margin-vrl-002.xht css-writing-modes-3/margin-vrl-002-ref.xht
+== css-writing-modes-3/normal-flow-overconstrained-vlr-003.xht css-writing-modes-3/abs-pos-non-replaced-vlr-007-ref.xht
+== css-writing-modes-3/normal-flow-overconstrained-vlr-005.xht css-writing-modes-3/abs-pos-non-replaced-vlr-013-ref.xht
+== css-writing-modes-3/normal-flow-overconstrained-vrl-002.xht css-writing-modes-3/abs-pos-non-replaced-vrl-006-ref.xht
+== css-writing-modes-3/normal-flow-overconstrained-vrl-004.xht css-writing-modes-3/abs-pos-non-replaced-vrl-012-ref.xht
 == css-writing-modes-3/ortho-htb-alongside-vrl-floats-002.xht css-writing-modes-3/ortho-htb-alongside-vrl-floats-002-ref.xht
 == css-writing-modes-3/ortho-htb-alongside-vrl-floats-006.xht css-writing-modes-3/ortho-htb-alongside-vrl-floats-006-ref.xht
 == css-writing-modes-3/ortho-htb-alongside-vrl-floats-010.xht css-writing-modes-3/ortho-htb-alongside-vrl-floats-010-ref.xht
@@ -874,6 +885,14 @@ fails-if(!styloVsGecko) == css-writing-modes-3/line-box-height-vrl-012.xht css-w
 == css-writing-modes-3/outline-inline-block-vrl-006.html css-writing-modes-3/reference/outline-inline-block-vrl-006.html
 == css-writing-modes-3/outline-inline-vlr-006.html css-writing-modes-3/reference/outline-inline-vlr-006.html
 == css-writing-modes-3/outline-inline-vrl-006.html css-writing-modes-3/reference/outline-inline-vrl-006.html
+== css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005.xht css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vlr-005-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004.xht css-writing-modes-3/overconstrained-rel-pos-ltr-left-right-vrl-004-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003.xht css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vlr-003-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002.xht css-writing-modes-3/overconstrained-rel-pos-ltr-top-bottom-vrl-002-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009.xht css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vlr-009-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008.xht css-writing-modes-3/overconstrained-rel-pos-rtl-left-right-vrl-008-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007.xht css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vlr-007-ref.xht
+== css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006.xht css-writing-modes-3/overconstrained-rel-pos-rtl-top-bottom-vrl-006-ref.xht
 == css-writing-modes-3/padding-vlr-005.xht css-writing-modes-3/margin-vrl-002-ref.xht
 == css-writing-modes-3/padding-vrl-004.xht css-writing-modes-3/margin-vrl-002-ref.xht
 == css-writing-modes-3/percent-margin-vlr-003.xht css-writing-modes-3/margin-vrl-002-ref.xht
@@ -900,6 +919,118 @@ fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/row-progression-vrl-002
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/row-progression-vrl-004.xht css-writing-modes-3/block-flow-direction-001-ref.xht
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/row-progression-vrl-006.xht css-writing-modes-3/block-flow-direction-001-ref.xht
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/row-progression-vrl-008.xht css-writing-modes-3/block-flow-direction-001-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-001.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-001-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-003.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-004.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-006.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-007.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-007-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-008.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-008-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-009.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-003-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-010.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-010-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-011.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-011-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-012.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-006-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-013.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-013-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-015.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-016.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-018.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-019.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-019-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-020.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-020-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vlr-021.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-015-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-022.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-022-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-023.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-023-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vlr-024.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-018-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/sizing-orthog-htb-in-vrl-001.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-001-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-003.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/sizing-orthog-htb-in-vrl-004.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-004-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-006.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-007.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-007-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-008.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-008-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-009.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-003-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-010.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-010-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-011.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-011-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-012.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-006-ref.xht
+fails-if(!styloVsGecko) == css-writing-modes-3/sizing-orthog-htb-in-vrl-013.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-013-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-015.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-016.xht css-writing-modes-3/sizing-orthog-htb-in-vlr-016-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-018.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-019.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-019-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-020.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-020-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-htb-in-vrl-021.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-015-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-022.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-022-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-023.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-023-ref.xht
+== css-writing-modes-3/sizing-orthog-htb-in-vrl-024.xht css-writing-modes-3/sizing-orthog-htb-in-vrl-018-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-001-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-002-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-003-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-004-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-005-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-006-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-007-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vlr-008-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-001-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-002-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-003-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-004-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-005-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-006-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-007-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008.xht css-writing-modes-3/sizing-orthog-prct-htb-in-vrl-008-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-001-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-002-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-003-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-004-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-005-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-006-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-007-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008.xht css-writing-modes-3/sizing-orthog-prct-vlr-in-htb-008-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-001-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-002-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-003-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-004-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-005-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-006-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-007-ref.xht
+== css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008.xht css-writing-modes-3/sizing-orthog-prct-vrl-in-htb-008-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-001.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-001-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-003.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-003-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-004.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-004-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-006.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-006-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-007.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-007-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-008.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-008-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-009.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-009-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-010.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-010-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-011.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-011-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-012.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-012-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-013.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-013-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-015.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-016.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-016-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-018.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-019.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-019-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-020.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-020-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vlr-in-htb-021.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-015-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-022.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-022-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-023.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-023-ref.xht
+== css-writing-modes-3/sizing-orthog-vlr-in-htb-024.xht css-writing-modes-3/sizing-orthog-vlr-in-htb-018-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-001.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-001-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-003.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-003-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-004.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-004-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-006.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-006-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-007.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-007-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-008.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-008-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-009.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-009-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-010.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-010-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-011.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-011-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-012.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-012-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-013.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-013-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-015.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-016.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-016-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-018.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-019.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-019-ref.xht
+fails-if(OSX||winWidget||Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-020.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-020-ref.xht
+fails-if(Android) == css-writing-modes-3/sizing-orthog-vrl-in-htb-021.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-015-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-022.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-022-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-023.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-023-ref.xht
+== css-writing-modes-3/sizing-orthog-vrl-in-htb-024.xht css-writing-modes-3/sizing-orthog-vrl-in-htb-018-ref.xht
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/table-column-order-002.xht css-writing-modes-3/block-flow-direction-001-ref.xht
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/table-column-order-003.xht css-writing-modes-3/block-flow-direction-001-ref.xht
 fuzzy-if(OSX||winWidget,110,1200) == css-writing-modes-3/table-column-order-004.xht css-writing-modes-3/block-flow-direction-001-ref.xht
@@ -918,9 +1049,9 @@ fails-if(!styloVsGecko) == css-writing-modes-3/table-progression-vlr-004.html cs
 fails-if(!styloVsGecko) == css-writing-modes-3/table-progression-vrl-002.html css-writing-modes-3/table-progression-002-ref.html
 fails-if(!styloVsGecko) == css-writing-modes-3/table-progression-vrl-003.html css-writing-modes-3/table-progression-001-ref.html
 fails-if(!styloVsGecko) == css-writing-modes-3/table-progression-vrl-004.html css-writing-modes-3/table-progression-002-ref.html
-fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-003.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-005.xht css21/reference/ref-filled-green-100px-square.xht
-fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-007.xht css21/reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-003.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-005.xht reference/ref-filled-green-100px-square.xht
+fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-007.xht reference/ref-filled-green-100px-square.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-009.xht css-writing-modes-3/text-align-vlr-009-ref.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-011.xht css-writing-modes-3/text-align-vlr-009-ref.xht
 fuzzy-if(OSX||winWidget,75,404) == css-writing-modes-3/text-align-vlr-013.xht css-writing-modes-3/text-align-vlr-009-ref.xht
@@ -944,12 +1075,12 @@ fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/text-baseline-vlr-007.xh
 fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/text-baseline-vrl-002.xht css-writing-modes-3/text-baseline-vrl-002-ref.xht
 fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/text-baseline-vrl-004.xht css-writing-modes-3/text-baseline-vrl-002-ref.xht
 fuzzy-if(OSX||winWidget,215,780) == css-writing-modes-3/text-baseline-vrl-006.xht css-writing-modes-3/text-baseline-vrl-006-ref.xht
-fuzzy-if(OSX,15,16) == css-writing-modes-3/text-combine-upright-decorations-001.html css-writing-modes-3/reference/text-combine-upright-decorations-001.html
+skip-if(stylo) fuzzy-if(OSX,15,16) == css-writing-modes-3/text-combine-upright-decorations-001.html css-writing-modes-3/reference/text-combine-upright-decorations-001.html
 == css-writing-modes-3/text-combine-upright-inherit-all-001.html css-writing-modes-3/reference/text-combine-upright-inherit-all-001.html
 == css-writing-modes-3/text-combine-upright-inherit-all-002.html css-writing-modes-3/reference/text-combine-upright-inherit-all-002.html
 == css-writing-modes-3/text-combine-upright-layout-rules-001.html css-writing-modes-3/reference/text-combine-upright-layout-rules-001-ref.html
 == css-writing-modes-3/text-combine-upright-line-breaking-rules-001.html css-writing-modes-3/text-combine-upright-line-breaking-rules-001-ref.html
-fuzzy(255,960) == css-writing-modes-3/text-combine-upright-value-all-001.html css-writing-modes-3/reference/text-combine-upright-value-single-character.html
+fuzzy(255,960) fails-if(stylo) == css-writing-modes-3/text-combine-upright-value-all-001.html css-writing-modes-3/reference/text-combine-upright-value-single-character.html
 fuzzy(255,960) == css-writing-modes-3/text-combine-upright-value-all-002.html css-writing-modes-3/reference/vertical-ahem-1x1-ref.html
 fuzzy(255,960) != css-writing-modes-3/text-combine-upright-value-all-002.html css-writing-modes-3/reference/horizontal-ahem-1x1-notref.html
 fuzzy(255,960) == css-writing-modes-3/text-combine-upright-value-all-003.html css-writing-modes-3/reference/vertical-ahem-1x1-ref.html
@@ -1033,18 +1164,22 @@ fuzzy-if(OSX||winWidget,153,612) == css-writing-modes-3/writing-mode-vertical-lr
 fuzzy-if(OSX||winWidget,153,612) == css-writing-modes-3/writing-mode-vertical-rl-001.xht css-writing-modes-3/reftest/writing-mode-vertical-rl-001-ref.xht
 fuzzy-if(OSX||winWidget,153,612) == css-writing-modes-3/writing-mode-vertical-rl-002.xht css-writing-modes-3/reftest/writing-mode-vertical-rl-002-ref.xht
 fuzzy-if(OSX||winWidget,153,612) == css-writing-modes-3/writing-mode-vertical-rl-003.htm css-writing-modes-3/writing-mode-vertical-rl-003-ref.htm
-needs-focus == selectors-4/focus-within-001.html selectors-4/focus-within-001-ref.html
-needs-focus == selectors-4/focus-within-002.html selectors-4/focus-within-001-ref.html
-needs-focus == selectors-4/focus-within-003.html selectors-4/focus-within-001-ref.html
-needs-focus == selectors-4/focus-within-004.html selectors-4/focus-within-001-ref.html
-needs-focus == selectors-4/focus-within-005.html selectors-4/focus-within-001-ref.html
-needs-focus == selectors-4/focus-within-006.html selectors-4/focus-within-001-ref.html
-fails-if(!styloVsGecko) needs-focus == selectors-4/focus-within-shadow-001.html selectors-4/focus-within-shadow-001-ref.html
-pref(dom.webcomponents.enabled,true) needs-focus skip-if(styloVsGecko||stylo) == selectors-4/focus-within-shadow-002.html selectors-4/focus-within-shadow-001-ref.html
-pref(dom.webcomponents.enabled,true) needs-focus skip-if(styloVsGecko||stylo) == selectors-4/focus-within-shadow-003.html selectors-4/focus-within-shadow-001-ref.html
-pref(dom.webcomponents.enabled,true) needs-focus skip-if(styloVsGecko||stylo) == selectors-4/focus-within-shadow-004.html selectors-4/focus-within-shadow-001-ref.html
-pref(dom.webcomponents.enabled,true) needs-focus skip-if(styloVsGecko||stylo) == selectors-4/focus-within-shadow-005.html selectors-4/focus-within-shadow-001-ref.html
-== selectors-4/of-type-selectors.xhtml selectors-4/of-type-selectors-ref.xhtml
-== selectors-4/selector-required.html selectors-4/selector-required-ref.html
-== selectors-4/selectors-dir-selector-ltr-001.html selectors-4/selectors-dir-selector-ref.html
-== selectors-4/selectors-dir-selector-rtl-001.html selectors-4/selectors-dir-selector-ref.html
+needs-focus == selectors4/focus-within-001.html selectors4/focus-within-001-ref.html
+needs-focus == selectors4/focus-within-002.html selectors4/focus-within-001-ref.html
+needs-focus == selectors4/focus-within-003.html selectors4/focus-within-001-ref.html
+needs-focus == selectors4/focus-within-004.html selectors4/focus-within-001-ref.html
+needs-focus == selectors4/focus-within-005.html selectors4/focus-within-001-ref.html
+needs-focus == selectors4/focus-within-006.html selectors4/focus-within-006-ref.html
+needs-focus == selectors4/focus-within-007.html selectors4/focus-within-007-ref.html
+needs-focus == selectors4/focus-within-008.html selectors4/focus-within-007-ref.html
+needs-focus == selectors4/focus-within-010.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-001.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-002.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-003.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-004.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-005.html selectors4/focus-within-shadow-001-ref.html
+skip == selectors4/focus-within-shadow-006.html selectors4/focus-within-shadow-001-ref.html
+== selectors4/of-type-selectors.xhtml selectors4/of-type-selectors-ref.xhtml
+== selectors4/selector-required.html selectors4/selector-required-ref.html
+== selectors4/selectors-dir-selector-ltr-001.html reference/ref-filled-green-100px-square.xht
+== selectors4/selectors-dir-selector-rtl-001.html reference/ref-filled-green-100px-square.xht
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
deleted file mode 100644
index 7b297d0367ab..000000000000
--- a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>CSS Reftest Reference for CSS Selectors Level 4 :dir() Tests</title>
-    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
-    <meta name="flags" content="">
-    <style type="text/css">
-       div {
-           width: 100px;
-           height: 100px;
-           background-color: green;
-       }
-    </style>
-</head>
-<body>
-    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
-    <div></div>
-</body>
-</html>
diff --git a/layout/reftests/w3c-css/received/selectors4/OWNERS b/layout/reftests/w3c-css/received/selectors4/OWNERS
new file mode 100644
index 000000000000..20c909d1d88e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/OWNERS
@@ -0,0 +1,3 @@
+@frivoal
+@plinss
+@tabatkins
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html b/layout/reftests/w3c-css/received/selectors4/focus-within-001-ref.html
similarity index 69%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-001-ref.html
index 9d76c0674778..2913775a2204 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-001-ref.html
@@ -9,7 +9,8 @@ div {
   border: solid 15px green;
 }
 </style>
-<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
 <div>Focus this element</div>
-</body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html b/layout/reftests/w3c-css/received/selectors4/focus-within-001.html
similarity index 65%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-001.html
index 15de67cef240..fcf8a379c87c 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-001.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
 <meta name="assert" content="Test that :focus-within applies to an element with tabindex when :focus applies.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
@@ -26,14 +25,13 @@ div:focus-within {
 border-color: green;
 }
 </style>
-<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
 var focusme = document.getElementById('focusme');
 focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html b/layout/reftests/w3c-css/received/selectors4/focus-within-002.html
similarity index 76%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-002.html
index b59dc25b5fe1..e483833febc1 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-002.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
 <meta name="assert" content="Test that :focus-within applies to the parent of an element with tabindex where :focus applies.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
@@ -28,14 +27,11 @@
 it is surrounded by a thick green border.
 There must be no red or blue once it is focused.</p>
 <div id="target">
-  <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+  <div id="focusme" tabindex="1">Focus this element</div>
 </div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
 var focusme = document.getElementById('focusme');
 focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html b/layout/reftests/w3c-css/received/selectors4/focus-within-003.html
similarity index 76%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-003.html
index 4c87dc627103..b399c4f0cf3e 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-003.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
 <meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
@@ -31,17 +30,14 @@ There must be no red or blue once it is focused.</p>
   <div>
     <div>
       <div>
-        <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+        <div id="focusme" tabindex="1">Focus this element</div>
       </div>
     </div>
   </div>
 </div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
 var focusme = document.getElementById('focusme');
 focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html b/layout/reftests/w3c-css/received/selectors4/focus-within-004.html
similarity index 76%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-004.html
index f0d3765a9da1..169af9e0706a 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-004.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
 <meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
@@ -38,15 +37,12 @@ it is surrounded by a thick green border.
 There must be no red or blue once it is focused.</p>
 <div>
   <div>
-    <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" contentEditable="true">Focus this element</div>
+    <div id="focusme" contentEditable="true">Focus this element</div>
   </div>
 </div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
-var editor = document.getElementById('focusme');
-editor.focus();
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html b/layout/reftests/w3c-css/received/selectors4/focus-within-005.html
similarity index 74%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-005.html
index 5a173fd72901..03f927d1b40c 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-005.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
 <meta name="assert" content="Test that :focus-within works on links.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
@@ -39,15 +38,12 @@ it is surrounded by a thick green border.
 There must be no red or blue once it is focused.</p>
 <div>
   <div>
-    <a id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" href="">Focus this element</a>
+    <a id="focusme" href="">Focus this element</a>
   </div>
 </div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
-var editor = document.getElementById('focusme');
-editor.focus();
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-006-ref.html b/layout/reftests/w3c-css/received/selectors4/focus-within-006-ref.html
new file mode 100644
index 000000000000..b93c156876a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-006-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+:focus {
+  outline: none;
+
+  /* Make the caret invisible
+     since it matches the color of the text, which is transparent,
+     while keeping the text readable thanks to its shadow.
+     Not using the caret-color property as it is too new to be relied on. */
+  color: transparent; text-shadow: black 0px 0px 0px;
+}
+
+div {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+  <input id="focusme" value="Focus this element">
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html b/layout/reftests/w3c-css/received/selectors4/focus-within-006.html
similarity index 69%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-006.html
index 04e6cbcb9b5f..ff63cceb6e7b 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-006.html
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
-<link rel="match" href="focus-within-001-ref.html">
-<meta name="flags" content="interact">
+<link rel="match" href="focus-within-006-ref.html">
 <meta name="assert" content="Test that :focus-within works on form controls, using an input element.">
 <style>
-/* Suppress things that cannot be reproduced in the reference file */
 :focus {
-  all: initial;
   outline: none;
 
   /* Make the caret invisible
@@ -40,16 +37,13 @@ There must be no red or blue once it is focused.</p>
 <div>
   <div>
     <div>
-      <input id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" value="Focus this element">
-    <div>
+      <input id="focusme" value="Focus this element">
+    </div>
   </div>
 </div>
 <script>
-/* This script is an optional convenience,
-   simply removing the need to manually focus the element.
-   The test is valid even if the script is not run. */
-var editor = document.getElementById('focusme');
-editor.focus();
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
 </script>
-<body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-007-ref.html b/layout/reftests/w3c-css/received/selectors4/focus-within-007-ref.html
new file mode 100644
index 000000000000..6ecc21536a40
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-007-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  html, body, div {
+      border: solid 5px green;
+  }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-007.html b/layout/reftests/w3c-css/received/selectors4/focus-within-007.html
new file mode 100644
index 000000000000..f23fe87643fa
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-007.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-007-ref.html">
+<meta name="assert" content="Checks that ':focus-within' can be used as universal selector.">
+<style>
+  /* Suppress things that cannot be reproduced in the reference file */
+  :focus {
+    outline: none;
+  }
+  html, body, div {
+      border: solid 5px red;
+  }
+  /* Use blue to indicate that the user needs to pay attention.
+     This element needs to be focused for the test to make sense. */
+  div {
+      border-color: blue;
+  }
+  :focus-within {
+      border-color: green;
+  }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
+<script>
+  var focusme = document.getElementById('focusme');
+  focusme.focus();
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-008.html b/layout/reftests/w3c-css/received/selectors4/focus-within-008.html
new file mode 100644
index 000000000000..19deff212a38
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-008.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-007-ref.html">
+<meta name="assert" content="Checks that ':focus-within' can be used as universal selector (using *).">
+<style>
+  /* Suppress things that cannot be reproduced in the reference file */
+  :focus {
+    outline: none;
+  }
+  html, body, div {
+      border: solid 5px red;
+  }
+  /* Use blue to indicate that the user needs to pay attention.
+     This element needs to be focused for the test to make sense. */
+  div {
+      border-color: blue;
+  }
+  *:focus-within {
+      border-color: green;
+  }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
+<script>
+  var focusme = document.getElementById('focusme');
+  focusme.focus();
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-010.html b/layout/reftests/w3c-css/received/selectors4/focus-within-010.html
new file mode 100644
index 000000000000..2476e03dba67
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-010.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="assert" content="Checks that :focus-within is still applied when focus moves from an element to one of its descendants.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+#target {
+  display: none;
+}
+
+#wrapper:focus-within > #target {
+  display: block;
+}
+
+#target:focus {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="wrapper" tabindex="1">
+  <div id="target" tabindex="2"></div>
+</div>
+<script>
+var wrapper = document.getElementById('wrapper');
+wrapper.focus();
+var target = document.getElementById('target');
+target.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001-ref.html
similarity index 98%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001-ref.html
index 4631ef3e357a..6ab36318796d 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001-ref.html
@@ -11,5 +11,4 @@ div {
 </style>
 <p>Test passes if there is a green rectangle below.</p>
 <div></div>
-</body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001.html
similarity index 80%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001.html
index e4610dacf175..012a77412926 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-001.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within with shadow DOM</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-shadow-001-ref.html">
-<meta name="flags" content="interact dom">
+<meta name="flags" content="dom">
 <meta name="assert" content="Test that :focus-within applies to a focused element inside the shadow DOM.">
 <body>
 <p>Test passes if there is a green rectangle below.</p>
@@ -23,18 +23,17 @@ div:focus-within {
   border: solid 15px green;
 }
 </style>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+<div id="focusme" tabindex="1"></div>
 </template>
 
 <script>
-var shadow = document.getElementById('shadow-host').createShadowRoot();
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
 var template = document.getElementById('shadow-template');
 var instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
-window.setTimeout(function() {
 var focusme = shadow.getElementById('focusme');
 focusme.focus();
-}, 0);
+document.documentElement.classList.remove('reftest-wait');
 </script>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-002.html
similarity index 80%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-002.html
index b02a3f9a1474..50b30df424e2 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-002.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within with shadow DOM</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-shadow-001-ref.html">
-<meta name="flags" content="interact dom">
+<meta name="flags" content="dom">
 <meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element.">
 <style>
 div:focus-within {
@@ -24,18 +24,17 @@ div:focus-within {
   outline: none;
 }
 </style>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+<div id="focusme" tabindex="1"></div>
 </template>
 
 <script>
-var shadow = document.getElementById('shadow-host').createShadowRoot();
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
 var template = document.getElementById('shadow-template');
 var instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
-window.setTimeout(function() {
 var focusme = shadow.getElementById('focusme');
 focusme.focus();
-}, 0);
+document.documentElement.classList.remove('reftest-wait');
 </script>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-003.html
similarity index 80%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-003.html
index 5887194245f1..48901b215b56 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-003.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within with shadow DOM</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-shadow-001-ref.html">
-<meta name="flags" content="interact dom">
+<meta name="flags" content="dom">
 <meta name="assert" content="Test that :focus-within applies to the parent of a shadow host containing a focused element.">
 <style>
 #target:focus-within {
@@ -26,18 +26,17 @@
   outline: none;
 }
 </style>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+<div id="focusme" tabindex="1"></div>
 </template>
 
 <script>
-var shadow = document.getElementById('shadow-host').createShadowRoot();
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
 var template = document.getElementById('shadow-template');
 var instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
-window.setTimeout(function() {
 var focusme = shadow.getElementById('focusme');
 focusme.focus();
-}, 0);
+document.documentElement.classList.remove('reftest-wait');
 </script>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-004.html
similarity index 81%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-004.html
index 8348adc357a5..6beed1fc131a 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-004.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within with shadow DOM</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-shadow-001-ref.html">
-<meta name="flags" content="interact dom">
+<meta name="flags" content="dom">
 <meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element.">
 <style>
 #target:focus-within {
@@ -32,18 +32,17 @@
   outline: none;
 }
 </style>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+<div id="focusme" tabindex="1"></div>
 </template>
 
 <script>
-var shadow = document.getElementById('shadow-host').createShadowRoot();
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
 var template = document.getElementById('shadow-template');
 var instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
-window.setTimeout(function() {
 var focusme = shadow.getElementById('focusme');
 focusme.focus();
-}, 0);
+document.documentElement.classList.remove('reftest-wait');
 </script>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-005.html
similarity index 79%
rename from layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
rename to layout/reftests/w3c-css/received/selectors4/focus-within-shadow-005.html
index 6c486fa48372..c645d62f7604 100644
--- a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-005.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang=en>
+<html lang=en class="reftest-wait">
 <meta charset="utf-8">
 <title>Selectors Level 4: focus-within with shadow DOM</title>
 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-shadow-001-ref.html">
-<meta name="flags" content="interact dom">
+<meta name="flags" content="dom">
 <meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element.">
 <style>
 #target:focus-within {
@@ -35,26 +35,23 @@
   outline: none;
 }
 </style>
-<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+<div id="focusme" tabindex="1"></div>
 </template>
 
 <script>
-var shadow = document.getElementById('shadow-host').createShadowRoot();
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
 var template = document.getElementById('shadow-template');
 var instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
 
-window.setTimeout(function() {
-shadow = shadow.getElementById('nested-shadow-host').createShadowRoot();
+shadow = shadow.getElementById('nested-shadow-host').attachShadow({mode: 'open'});
 template = document.getElementById('nested-shadow-template');
 instance = document.importNode(template.content, true);
 shadow.appendChild(instance);
-}, 0);
 
-window.setTimeout(function() {
 var focusme = shadow.getElementById('focusme');
 focusme.focus();
-}, 0);
+document.documentElement.classList.remove('reftest-wait');
 </script>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-006.html b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-006.html
new file mode 100644
index 000000000000..39a2f706102d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors4/focus-within-shadow-006.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="help" href="https://dom.spec.whatwg.org/#shadow-trees">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="dom">
+<meta name="assert" content="Checks that ':focus-within' is propagated to the flat tree ancestors, even if it comes from a slotted element.">
+<style>
+  /* Suppress things that cannot be reproduced in the reference file */
+  :focus {
+    outline: none;
+  }
+  :focus-within {
+      border-color: green;
+  }
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+
+<div id="log"></div>
+<script>
+  if (!document.body.attachShadow)
+    document.getElementById("log").innerHTML = "<strong>Skip this test, shadow DOM is not supported.</strong>";
+</script>
+
+<div id="shadow-host">
+  <div id="focusme" tabindex="1"></div>
+</div>
+
+<script>
+  var shadowHost = document.getElementById("shadow-host");
+  shadowHost.attachShadow({ mode: "open"}).innerHTML =
+    "<style>" +
+    "  #shadow-div:focus-within { border: solid 15px green; }" +
+    "</style>" +
+    "<div id='shadow-div'>" +
+    "  <slot></slot>" +
+    "</div>";
+  var focusme = document.getElementById("focusme");
+  focusme.focus();
+  document.documentElement.classList.remove("reftest-wait");
+</script>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml b/layout/reftests/w3c-css/received/selectors4/of-type-selectors-ref.xhtml
similarity index 100%
rename from layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
rename to layout/reftests/w3c-css/received/selectors4/of-type-selectors-ref.xhtml
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml b/layout/reftests/w3c-css/received/selectors4/of-type-selectors.xhtml
similarity index 100%
rename from layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
rename to layout/reftests/w3c-css/received/selectors4/of-type-selectors.xhtml
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html b/layout/reftests/w3c-css/received/selectors4/selector-required-ref.html
similarity index 100%
rename from layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
rename to layout/reftests/w3c-css/received/selectors4/selector-required-ref.html
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required.html b/layout/reftests/w3c-css/received/selectors4/selector-required.html
similarity index 100%
rename from layout/reftests/w3c-css/received/selectors-4/selector-required.html
rename to layout/reftests/w3c-css/received/selectors4/selector-required.html
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html b/layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-ltr-001.html
similarity index 81%
rename from layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
rename to layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-ltr-001.html
index c11f42f627ac..9b90832a218d 100644
--- a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
+++ b/layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-ltr-001.html
@@ -4,7 +4,7 @@
     <title>CSS Selectors Level 4 Test: basic support for dir(ltr)</title>
     <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
     <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
-    <link rel="match" href="selectors-dir-selector-ref.html">
+    <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
     <meta name="flags" content="">
     <meta name="assert" content="The :dir(ltr) pseudo-class matches an element that has a directionality of (ltr). Since the div element has dir=ltr, the selector matches.">
     <style type="text/css">
@@ -20,7 +20,7 @@
     </style>
 </head>
 <body>
-    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     <div dir="ltr"></div>
 </body>
 </html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html b/layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-rtl-001.html
similarity index 82%
rename from layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
rename to layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-rtl-001.html
index df2c6349422c..9b7bfd090a3c 100644
--- a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
+++ b/layout/reftests/w3c-css/received/selectors4/selectors-dir-selector-rtl-001.html
@@ -4,7 +4,7 @@
     <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title>
     <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
     <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
-    <link rel="match" href="selectors-dir-selector-ref.html">
+    <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
     <meta name="flags" content="">
     <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches.">
     <style type="text/css">
@@ -20,7 +20,7 @@
     </style>
 </head>
 <body>
-    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     <div dir="rtl"></div>
 </body>
 </html>