part 10 - Add block box inside of inline-box so it can be an anchor f…

…or 'start-edge-in-block' scroll-anchoring test.

The scroll anchoring test 'start-edge-in-block-direction.html' relies on #anchorbeing selected as an anchor node.

However #anchor is 'display: inline-block' and the specification states that
only block boxes [0] or text nodes may be selected as anchor nodes [1].
There's a spec issue open here trying to resolve this [2].

In the meantime, adding a block box inside of the inline-block should be spec
compliant, and keep the test working.

[0] "block boxes" are defined as "A block-level box that is also a block
    container" https://drafts.csswg.org/css-display-3/#block-box
[1] https://drafts.csswg.org/css-scroll-anchoring-1/#anchor-node-selection
[2] w3c/csswg-drafts#3478 (comment)

Differential Revision: https://phabricator.services.mozilla.com/D16072

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1305957
gecko-commit: bfca5019a9cca1bf03af412521c223e85f08e647
gecko-integration-branch: central
gecko-reviewers: dholbert

css/css-scroll-anchoring/start-edge-in-block-layout-direction.html

@@ -32,9 +32,11 @@
 .vpush { height: 80px !important; }
 .hpush { width: 70px !important; }
 
+#anchor-container {
+  display: inline-block;
+}
 #anchor {
   position: relative;
-  display: inline-block;
   background-color: #8e8;
   min-width: 100px;
   min-height: 100px;
@@ -49,8 +51,10 @@
 </style>
 <div id="container">
   <div id="block_pusher"></div><br>
-  <div id="inline_pusher"></div><div id="anchor">
-    <div id="grower"></div>
+  <div id="inline_pusher"></div><div id="anchor-container">
+    <div id="anchor">
+      <div id="grower"></div>
+    </div>
   </div>
 </div>
 <script>