Issue #2852608 by Manuel Garcia, DyanneNova, markconroy, tim.plunkett,...

Issue #2852608 by Manuel Garcia, DyanneNova, markconroy, tim.plunkett, joelpittet, DickJohnson, Scorpid: Review layout CSS and markup

core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php

@@ -50,7 +50,7 @@ public function testNodeView() {
     // By default, the one-column layout is used.
     $this->drupalGet('node/1');
     $this->assertSession()->elementExists('css', '.layout--onecol');
-    $this->assertSession()->elementExists('css', '.layout-region--content .field--name-body');
+    $this->assertSession()->elementExists('css', '.layout__region--content .field--name-body');
 
     $this->drupalGet('admin/structure/types/manage/article/display');
     $this->assertEquals(['Content', 'Disabled'], $this->getRegionTitles());

core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php

@@ -47,9 +47,9 @@ protected function setUp() {
   public function testEntityViewModes() {
     // By default, the field is not visible.
     $this->drupalGet('entity_test/1/test');
-    $this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
+    $this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
     $this->drupalGet('entity_test/1');
-    $this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
+    $this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
 
     // Change the layout for the "test" view mode. See
     // core.entity_view_mode.entity_test.test.yml.
@@ -65,9 +65,9 @@ public function testEntityViewModes() {
 
     // Each view mode has a different layout.
     $this->drupalGet('entity_test/1/test');
-    $this->assertSession()->elementExists('css', '.layout-region--content .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout__region--content .field--name-field-test-text');
     $this->drupalGet('entity_test/1');
-    $this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
+    $this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
   }
 
   /**
@@ -90,46 +90,46 @@ public function testEntityForm() {
 
     // The field is moved to the default region for the new layout.
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/manage/1/edit');
     // No fields are visible, and the regions don't display when empty.
-    $this->assertFieldInRegion('field_test_text[0][value]', 'left');
-    $this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'first');
+    $this->assertSession()->elementExists('css', '.layout__region--first .field--name-field-test-text');
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/form-display');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
-    // Drag the field to the right region.
+    // Drag the field to the second region.
     $field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
-    $right_region_row = $this->getSession()->getPage()->find('css', '.region-right-message');
-    $field_test_text_row->find('css', '.handle')->dragTo($right_region_row);
+    $second_region_row = $this->getSession()->getPage()->find('css', '.region-second-message');
+    $field_test_text_row->find('css', '.handle')->dragTo($second_region_row);
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The new layout is used.
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
 
-    // Move the field to the right region without tabledrag.
+    // Move the field to the second region without tabledrag.
     $this->drupalGet('entity_test/structure/entity_test/form-display');
     $this->getSession()->getPage()->pressButton('Show row weights');
-    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The updated region is used.
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
 
     // The layout is still in use without Field UI.
     $this->container->get('module_installer')->uninstall(['field_ui']);
     $this->drupalGet('entity_test/manage/1/edit');
-    $this->assertFieldInRegion('field_test_text[0][value]', 'right');
+    $this->assertFieldInRegion('field_test_text[0][value]', 'second');
   }
 
   /**
@@ -147,23 +147,23 @@ public function testEntityView() {
     $this->submitForm([], 'Save');
 
     $this->assertSession()->pageTextContains('Your settings have been saved.');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
     $this->drupalGet('entity_test/1');
     // No fields are visible, and the regions don't display when empty.
     $this->assertSession()->elementNotExists('css', '.layout--twocol');
-    $this->assertSession()->elementNotExists('css', '.layout-region');
+    $this->assertSession()->elementNotExists('css', '.layout__region');
     $this->assertSession()->elementNotExists('css', '.field--name-field-test-text');
 
     // After a refresh the new regions are still there.
     $this->drupalGet('entity_test/structure/entity_test/display');
-    $this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
+    $this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
 
-    // Drag the field to the left region.
+    // Drag the field to the first region.
     $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
     $field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
-    $left_region_row = $this->getSession()->getPage()->find('css', '.region-left-message');
-    $field_test_text_row->find('css', '.handle')->dragTo($left_region_row);
+    $first_region_row = $this->getSession()->getPage()->find('css', '.region-first-message');
+    $field_test_text_row->find('css', '.handle')->dragTo($first_region_row);
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->assertFalse($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
     $this->submitForm([], 'Save');
@@ -172,25 +172,25 @@ public function testEntityView() {
     // The new layout is used.
     $this->drupalGet('entity_test/1');
     $this->assertSession()->elementExists('css', '.layout--twocol');
-    $this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout__region--first .field--name-field-test-text');
 
-    // Move the field to the right region without tabledrag.
+    // Move the field to the second region without tabledrag.
     $this->drupalGet('entity_test/structure/entity_test/display');
     $this->getSession()->getPage()->pressButton('Show row weights');
-    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->submitForm([], 'Save');
     $this->assertSession()->pageTextContains('Your settings have been saved.');
 
     // The updated region is used.
     $this->drupalGet('entity_test/1');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
 
     // The layout is still in use without Field UI.
     $this->container->get('module_installer')->uninstall(['field_ui']);
     $this->drupalGet('entity_test/1');
     $this->assertSession()->elementExists('css', '.layout--twocol');
-    $this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
+    $this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
   }
 
   /**
@@ -258,7 +258,7 @@ protected function getRegionTitles() {
    *   The machine name of the region.
    */
   protected function assertFieldInRegion($field_selector, $region_name) {
-    $region_element = $this->getSession()->getPage()->find('css', ".layout-region--$region_name");
+    $region_element = $this->getSession()->getPage()->find('css', ".layout__region--$region_name");
     $this->assertNotNull($region_element);
     $this->assertSession()->fieldExists($field_selector, $region_element);
   }

core/modules/layout_discovery/layout_discovery.layouts.yml

@@ -15,14 +15,14 @@ layout_twocol:
   template: layout--twocol
   library: layout_discovery/twocol
   category: 'Columns: 2'
-  default_region: left
+  default_region: first
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
     bottom:
       label: Bottom
 
@@ -36,16 +36,16 @@ layout_twocol_bricks:
   regions:
     top:
       label: Top
-    left_above:
-      label: 'Left above'
-    right_above:
-      label: 'Right above'
+    first_above:
+      label: 'First above'
+    second_above:
+      label: 'Second above'
     middle:
       label: Middle
-    left_below:
-      label: 'Left below'
-    right_below:
-      label: 'Right below'
+    first_below:
+      label: 'First below'
+    second_below:
+      label: 'Second below'
     bottom:
       label: Bottom
 
@@ -55,16 +55,16 @@ layout_threecol_25_50_25:
   template: layout--threecol-25-50-25
   library: layout_discovery/threecol_25_50_25
   category: 'Columns: 3'
-  default_region: left
+  default_region: second
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    middle:
-      label: Middle
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
     bottom:
       label: Bottom
 
@@ -74,15 +74,15 @@ layout_threecol_33_34_33:
   template: layout--threecol-33-34-33
   library: layout_discovery/threecol_33_34_33
   category: 'Columns: 3'
-  default_region: left
+  default_region: first
   regions:
     top:
       label: Top
-    left:
-      label: Left
-    middle:
-      label: Middle
-    right:
-      label: Right
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third
     bottom:
       label: Bottom

core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig

@@ -11,14 +11,15 @@
  */
 #}
 {%
-set classes = [
-'layout--onecol',
-]
+  set classes = [
+    'layout',
+    'layout--onecol',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--content">
-    {{ content.content }}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="layout__region layout__region--content">
+      {{ content.content }}
+    </div>
   </div>
-</div>
 {% endif %}

core/modules/layout_discovery/layouts/onecol/onecol.css

-.layout--onecol .layout-region {
+/*
+ * @file
+ * Provides the layout styles for layout_onecol.
+ */
+.layout--onecol .layout__region {
   width: 100%;
 }

core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig

@@ -14,34 +14,41 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol',
-]
+  set classes = [
+    'layout',
+    'layout--threecol-25-50-25',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
-    </div>
-  {% endif %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout__region layout__region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.left }}
-  </div>
+    {% if content.first %}
+      <div class="layout__region layout__region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.second %}
+      <div class="layout__region layout__region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--side">
-    {{ content.right }}
-  </div>
+    {% if content.third %}
+      <div class="layout__region layout__region--third">
+        {{ content.third }}
+      </div>
+    {% endif %}
 
-  {% if content.bottom %}
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
-  {% endif %}
-</div>
+    {% if content.bottom %}
+      <div class="layout__region layout__region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
 {% endif %}

core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css

-.layout--threecol {
+/*
+ * @file
+ * Provides the layout styles for layout_threecol_25_50_25.
+ *
+ * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
+ * in before this can be marked as stable.
+ */
+.layout--threecol-25-50-25 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--threecol > .layout-region {
-  flex: 0 1 25%;
-}
-
-.layout--threecol > .layout-region--fullwidth {
+.layout--threecol-25-50-25 > .layout__region,
+.layout--threecol-25-50-25 > .layout__region--second {
   flex: 0 1 100%;
 }
 
-.layout--threecol > .layout-region--middle {
-  flex: 0 1 50%;
+@media screen and (min-width: 40em) {
+  .layout--threecol-25-50-25 > .layout__region--first,
+  .layout--threecol-25-50-25 > .layout__region--third {
+    flex: 0 1 25%;
+  }
+  .layout--threecol-25-50-25 > .layout__region--second {
+    flex: 0 1 50%;
+  }
 }

core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig

@@ -14,34 +14,41 @@
  */
 #}
 {%
-set classes = [
-'layout--threecol-33',
-]
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  {% if content.top %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
-  {% endif %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout__region layout__region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.left }}
-  </div>
+    {% if content.first %}
+      <div class="layout__region layout__region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.middle }}
-  </div>
+    {% if content.second %}
+      <div class="layout__region layout__region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region">
-    {{ content.right }}
-  </div>
+    {% if content.third %}
+      <div class="layout__region layout__region--third">
+        {{ content.third }}
+      </div>
+    {% endif %}
 
-  {% if content.bottom %}
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout__region layout__region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-  {% endif %}
-</div>
 {% endif %}

core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css

-.layout--threecol-33 {
+/*
+ * @file
+ * Provides the layout styles for layout_threecol_33_34_33.
+ *
+ * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
+ * in before this can be marked as stable.
+ */
+
+.layout--threecol-33-34-33 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--threecol-33 > .layout-region {
-  flex: 0 1 33%;
+.layout--threecol-33-34-33 > .layout__region {
+  flex: 0 1 100%;
 }
 
-.layout--threecol-33 > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--threecol-33-34-33 > .layout__region--first,
+  .layout--threecol-33-34-33 > .layout__region--second,
+  .layout--threecol-33-34-33 > .layout__region--third {
+    flex: 0 1 33%;
+  }
 }

core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig

@@ -11,26 +11,35 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol',
-]
+  set classes = [
+    'layout',
+    'layout--twocol',
+  ]
 %}
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.top }}
-    </div>
+    {% if content.top %}
+      <div class="layout__region layout__region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--left">
-      {{ content.left }}
-    </div>
+    {% if content.first %}
+      <div class="layout__region layout__region--first">
+        {{ content.first }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--right">
-      {{ content.right }}
-    </div>
+    {% if content.second %}
+      <div class="layout__region layout__region--second">
+        {{ content.second }}
+      </div>
+    {% endif %}
 
-    <div class="layout-region layout-region--fullwidth">
-      {{ content.bottom }}
-    </div>
+    {% if content.bottom %}
+      <div class="layout__region layout__region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
 {% endif %}

core/modules/layout_discovery/layouts/twocol/twocol.css

+/*
+ * @file
+ * Provides the layout styles for layout_twocol.
+ *
+ * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
+ * in before this can be marked as stable.
+ */
+
 .layout--twocol {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--twocol > .layout-region {
-  flex: 0 1 50%;
+.layout--twocol > .layout__region {
+  flex: 0 1 100%;
 }
 
-.layout--twocol > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol > .layout__region--first,
+  .layout--twocol > .layout__region--second {
+    flex: 0 1 50%;
+  }
 }

core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig

@@ -14,38 +14,53 @@
  */
 #}
 {%
-set classes = [
-'layout--twocol-bricks',
-]
+  set classes = [
+    'layout',
+    'layout--twocol-bricks',
+  ]
 %}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.top }}
-  </div>
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div class="layout__region layout__region--top">
+        {{ content.top }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_above">
-    {{ content.left_above }}
-  </div>
+    {% if content.first_above %}
+      <div class="layout__region layout__region--first-above">
+        {{ content.first_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_above">
-    {{ content.right_above }}
-  </div>
+    {% if content.second_above %}
+      <div class="layout__region layout__region--second-above">
+        {{ content.second_above }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--middle">
-    {{ content.middle }}
-  </div>
+    {% if content.middle %}
+      <div class="layout__region layout__region--middle">
+        {{ content.middle }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--left_below">
-    {{ content.left_below }}
-  </div>
+    {% if content.first_below %}
+      <div class="layout__region layout__region--first-below">
+        {{ content.first_below }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--right_below">
-    {{ content.right_below }}
-  </div>
+    {% if content.second_below %}
+      <div class="layout__region layout__region--second-below">
+        {{ content.second_below }}
+      </div>
+    {% endif %}
 
-  <div class="layout-region layout-region--fullwidth">
-    {{ content.bottom }}
+    {% if content.bottom %}
+      <div class="layout__region layout__region--bottom">
+        {{ content.bottom }}
+      </div>
+    {% endif %}
   </div>
-</div>
 {% endif %}

core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css

+/*
+ * @file
+ * Provides the layout styles for layout_twocol_bricks.
+ *
+ * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
+ * in before this can be marked as stable.
+ */
+
 .layout--twocol-bricks {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--twocol-bricks > .layout-region {
-  flex: 0 1 50%;
+.layout--twocol-bricks > .layout__region {
+  flex: 0 1 100%;
 }
 
-.layout--twocol-bricks > .layout-region--fullwidth {
-  flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol-bricks > .layout__region--first-above,
+  .layout--twocol-bricks > .layout__region--second-above,
+  .layout--twocol-bricks > .layout__region--first-below,
+  .layout--twocol-bricks > .layout__region--second-below {
+    flex: 0 1 50%;
+  }
 }

core/modules/layout_discovery/templates/layout.html.twig

@@ -4,15 +4,20 @@
  * Template for a generic layout.
  */
 #}
-{% set classes = [
-  'layout--' ~ layout.id|clean_class,
-] %}
+{%
+  set classes = [
+    'layout',
+    'layout--' ~ layout.id|clean_class,
+  ]
+%}
 {% if content %}
-<div{{ attributes.addClass(classes) }}>
-{% for region in layout.getRegionNames %}
-  <div class="{{ 'region--' ~ region|clean_class }}">
-    {{ content[region] }}
+  <div{{ attributes.addClass(classes) }}>
+    {% for region in layout.getRegionNames %}
+      {% if content[region] %}
+        <div class="{{ 'layout__region layout__region--' ~ region|clean_class }}">
+          {{ content[region] }}
+        </div>
+      {% endif %}
+    {% endfor %}
   </div>
-{% endfor %}
-</div>
 {% endif %}

core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php

@@ -38,12 +38,11 @@ protected function setUp() {
    *
    * @dataProvider renderLayoutData
    */
-  public function testRenderLayout($layout_id, $config, $regions, $html) {
+  public function testRenderLayout($layout_id, $config, $regions, array $html) {
     $layout = $this->layoutPluginManager->createInstance($layout_id, $config);
     $built['layout'] = $layout->build($regions);
-    $built['layout']['#prefix'] = 'Test prefix';
-    $built['layout']['#suffix'] = 'Test suffix';
-    $html = 'Test prefix' . $html . "\n" . 'Test suffix';
+    $built['layout']['#prefix'] = 'Test prefix' . "\n";
+    $built['layout']['#suffix'] = 'Test suffix' . "\n";
 
     // Assume each layout is contained by a form, in order to ensure the
     // building of the layout does not interfere with form processing.
@@ -53,14 +52,40 @@ public function testRenderLayout($layout_id, $config, $regions, $html) {
     $form_builder->processForm('the_form_id', $built, $form_state);
 
     $this->render($built);
-    $this->assertRaw($html);
-    $this->assertRaw('<input data-drupal-selector="edit-the-form-id" type="hidden" name="form_id" value="the_form_id" />');
+
+    // Add in the wrapping form elements and prefix/suffix.
+    array_unshift($html, 'Test prefix');
+    array_unshift($html, '<form data-drupal-selector="the-form-id" action="/" method="post" id="the-form-id" accept-charset="UTF-8">');
+    // Retrieve the build ID from the rendered HTML since the string is random.
+    $build_id_input = $this->cssSelect('input[name="form_build_id"]')[0]->asXML();
+    $form_id_input = '<input data-drupal-selector="edit-the-form-id" type="hidden" name="form_id" value="the_form_id"/>';
+    $html[] = 'Test suffix';
+    $html[] = $build_id_input . $form_id_input . '</form>';
+
+    // Match the HTML to the full form element.
+    $this->assertSame(implode("\n", $html), $this->cssSelect('#the-form-id')[0]->asXML());
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function render(array &$elements) {
+    $content = parent::render($elements);
+    // Strip leading whitespace from every line.
+    $this->content = preg_replace('/^\s+/m', '', $content);
+    return $this->content;
   }
 
   /**
    * Data provider for testRenderLayout().
    */
   public function renderLayoutData() {
+    $html = [];
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout layout--onecol">';
+    $html[] = '<div class="layout__region layout__region--content">';
+    $html[] = 'This is the content';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_onecol'] = [
       'layout_onecol',
       [],
@@ -69,7 +94,18 @@ public function renderLayoutData() {
           '#markup' => 'This is the content',
         ],
       ],
+      $html,
     ];
+
+    $html = [];
+    $html[] = '<div class="layout-example-1col clearfix">';
+    $html[] = '<div class="region-top">';
+    $html[] = 'This string added by #process.';
+    $html[] = '</div>';
+    $html[] = '<div class="region-bottom">';
+    $html[] = 'This is the bottom';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_test_1col_with_form'] = [
       'layout_test_1col',
       [],
@@ -81,8 +117,18 @@ public function renderLayoutData() {
           '#markup' => 'This is the bottom',
         ],
       ],
+      $html,
     ];
 
+    $html = [];
+    $html[] = '<div class="layout-example-1col clearfix">';
+    $html[] = '<div class="region-top">';
+    $html[] = 'This is the top';
+    $html[] = '</div>';
+    $html[] = '<div class="region-bottom">';
+    $html[] = 'This is the bottom';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_test_1col'] = [
       'layout_test_1col',
       [],
@@ -94,8 +140,18 @@ public function renderLayoutData() {
           '#markup' => 'This is the bottom',
         ],
       ],
+      $html,
     ];
 
+    $html = [];
+    $html[] = '<div data-drupal-selector="edit-layout" class="layout layout--layout-test-1col-no-template">';
+    $html[] = '<div class="layout__region layout__region--top">';
+    $html[] = 'This is the top';
+    $html[] = '</div>';
+    $html[] = '<div class="layout__region layout__region--bottom">';
+    $html[] = 'This is the bottom';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_test_1col_no_template'] = [
       'layout_test_1col_no_template',
       [],
@@ -107,8 +163,18 @@ public function renderLayoutData() {
           '#markup' => 'This is the bottom',
         ],
       ],
+      $html,
     ];
 
+    $html = [];
+    $html[] = '<div class="layout-example-2col clearfix">';
+    $html[] = '<div class="region-left">';
+    $html[] = 'This is the left';
+    $html[] = '</div>';
+    $html[] = '<div class="region-right">';
+    $html[] = 'This is the right';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_test_2col'] = [
       'layout_test_2col',
       [],
@@ -120,8 +186,19 @@ public function renderLayoutData() {
           '#markup' => 'This is the right',
         ],
       ],
+      $html,
     ];
 
+    $html = [];
+    $html[] = '<div class="layout-test-plugin clearfix">';
+    $html[] = '<div>';
+    $html[] = '<span class="setting-1-label">Blah: </span>';
+    $html[] = 'Config value';
+    $html[] = '</div>';
+    $html[] = '<div class="region-main">';
+    $html[] = 'Main region';
+    $html[] = '</div>';
+    $html[] = '</div>';
     $data['layout_test_plugin'] = [
       'layout_test_plugin',
       [
@@ -132,72 +209,9 @@ public function renderLayoutData() {
           '#markup' => 'Main region',
         ],
       ],
+      $html,
     ];
 
-    $data['layout_onecol'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--onecol">
-  <div class="layout-region layout-region--content">
-    This is the content
-  </div>
-</div>
-EOD;
-
-    $data['layout_test_1col_with_form'][] = <<<'EOD'
-<div class="layout-example-1col clearfix">
-  <div class="region-top">
-    This string added by #process.
-  </div>
-  <div class="region-bottom">
-    This is the bottom
-  </div>
-</div>
-EOD;
-
-    $data['layout_test_1col'][] = <<<'EOD'
-<div class="layout-example-1col clearfix">
-  <div class="region-top">
-    This is the top
-  </div>
-  <div class="region-bottom">
-    This is the bottom
-  </div>
-</div>
-EOD;
-
-    $data['layout_test_1col_no_template'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
-  <div class="region--top">
-    This is the top
-  </div>
-  <div class="region--bottom">
-    This is the bottom
-  </div>
-</div>
-EOD;
-
-    $data['layout_test_2col'][] = <<<'EOD'
-<div class="layout-example-2col clearfix">
-  <div class="region-left">
-    This is the left
-  </div>
-  <div class="region-right">
-    This is the right
-  </div>
-</div>
-EOD;
-
-    $data['layout_test_plugin'][] = <<<'EOD'
-<div class="layout-test-plugin clearfix">
-  <div>
-    <span class="setting-1-label">Blah: </span>
-    Config value
-  </div>
-  <div class="region-main">
-    Main region
-  </div>
-</div>
-EOD;
-
     return $data;
   }