Bug 1484683 [wpt PR 12569] - HTML: test inline margin on fieldset's l…

…egend, a=testonly Automatic update from web-platform-testsHTML: test inline margin on fieldset's legend See whatwg/html#3929 -- wpt-commits: c033091462612c88abe00a81162e230ce2069b24 wpt-pr: 12569
mozilla · Sep 20, 2018 · feaf82e · feaf82e
1 parent 14a5563
commit feaf82e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
@@ -361231,6 +361231,12 @@
      {}
     ]
    ],
+   "html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html": [
+    [
+     "/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html",
+     {}
+    ]
+   ],
    "html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html": [
     [
      "/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-sans-fieldset-display.html",
@@ -608354,6 +608360,10 @@
    "c26b50ce662cbea50a69e8e718b9b2b889568f64",
    "reftest"
   ],
+  "html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html": [
+   "8daf78db999c8c437d311c8bb2f7b36f590ae277",
+   "testharness"
+  ],
   "html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/legend-position-relative-ref.html": [
    "fd6c11a00566759fbf1e749d49ad396cf1a7ee08",
    "support"

diff --git a/...endering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html b/...endering/non-replaced-elements/the-fieldset-and-legend-elements/legend-margin-inline.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<title>legend and margin (inline direction)</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ fieldset { margin: 0 0 10px 0; padding: 20px; border: 10px solid; width: 500px; }
+ legend { height: 10px; width: 200px; padding: 0; }
+
+ #legend-center { margin-left: auto; margin-right: auto; }
+ #legend-right { margin-left: auto; }
+ #legend-10 { margin-left: 10px; }
+</style>
+<fieldset>
+  <legend id=legend-left>left</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-center>center</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-right>right</legend>
+</fieldset>
+<fieldset>
+  <legend id=legend-10>10px</legend>
+</fieldset>
+
+<script>
+ const legends = document.getElementsByTagName('legend');
+ const [legendLeft, legendCenter, legendRight, legend10] = legends;
+
+ const expectedLeft = 8 + 10 + 20;
+ const expectedCenter = expectedLeft + (500 / 2) - (200 / 2);
+ const expectedRight = expectedLeft + 500 - 200;
+ const expected10 = expectedLeft + 10;
+
+ test(() => {
+   assert_equals(legendLeft.offsetLeft, expectedLeft);
+ }, 'left');
+
+ test(() => {
+   assert_equals(legendCenter.offsetLeft, expectedCenter);
+ }, 'center');
+
+ test(() => {
+   assert_equals(legendRight.offsetLeft, expectedRight);
+ }, 'right');
+
+ test(() => {
+   assert_equals(legend10.offsetLeft, expected10);
+ }, '10px');
+</script>