<!doctype html>
<meta charset=utf-8>
<title>offset* properties on tables</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id="test-target" style="position: absolute"></div>
<script>
  test(function() {
    // Each test consists of four elements: the markup to use, the expected
    // value of offsetWidth on the table, the expected value of offsetHeight
    // on the table, and the description string.
    var tests = [
      [ `<table style="width: 20px; height: 30px">`,
        20, 30,
        "Basic table" ],
      [ `<table><caption style="width: 40px; height: 50px">`,
        40, 50,
        "Basic caption" ],
      [ `<table style="width: 20px; height: 30px">
           <caption style="width: 10px; height: 20px">`,
        20, 50,
        "Table and narrower caption" ],
      [ `<table style="width: 20px; height: 30px">
           <caption style="width: 40px; height: 20px">`,
        40, 50,
        "Table and wider caption" ],
      [ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px">`,
        20, 30,
        "Table with padding" ],
      [ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px;
                       box-sizing: content-box">`,
        26, 34,
        "Table with padding and content-box sizing" ],
      [ `<table style="width: 20px; height: 30px;
                       border-width: 1px 2px 3px 4px; border-style: solid;
                       border-collapse: separate; box-sizing: content-box">`,
        26, 34,
        "Table with separated border" ],
      [ `<table style="width: 20px; height: 30px;
                       border-width: 2px 4px 6px 8px; border-style: solid;
                       border-collapse: collapse; box-sizing: content-box">
           <tr><td>`,
        26, 34,
        "Table with collapsed border" ],
      [ `<table>
           <caption style="width: 40px; height: 50px; padding: 1px 2px 3px 4px">`,
        46, 54,
        "Caption with padding" ],
      [ `<table>
           <caption style="width: 40px; height: 50px;
                           border-width: 1px 2px 3px 4px; border-style: solid">`,
        46, 54,
        "Caption with border" ],
      [ `<table>
           <caption style="width: 40px; height: 50px; margin: 1px 2px 3px 4px;">`,
        46, 54,
        "Caption with margin" ],
      [ `<table style="caption-side: bottom">
           <caption style="width: 40px; height: 50px;">`,
        40, 50,
        "Bottom caption" ],
    ];

    function target() {
      return document.getElementById("test-target");
    }

    function table() {
      return target().querySelector("table");
    }

    for (var t of tests) {
      test(function() {
        target().innerHTML = t[0];
        assert_equals(table().offsetWidth, t[1], t[3] + " offsetWidth");
        assert_equals(table().offsetHeight, t[2], t[3] + " offsetHeight");
        assert_equals(table().offsetLeft, 0, t[3] + " offsetLeft");
        assert_equals(table().offsetTop, 0, t[3] + " offsetTop");
      }, t[3]);
    }
  }, "Overall test to make sure there are no exceptions");
</script>