diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html')
-rw-r--r-- | testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html new file mode 100644 index 0000000000..bbb71dfa70 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<title>fieldset and CSS Grid</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#test, #ref, #test-inline, #ref-inline { + display: grid; + grid-template-columns: auto 50px auto; + grid-template-rows: auto 50px auto; + margin: 0; + padding: 0; + border: none +} +#test-inline, #ref-inline { display: inline-grid } +legend { + float: left; /* Makes it not the "rendered legend" */ + padding: 0; +} +</style> +<fieldset id=test> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<hr> +<div id=ref> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<hr> +<fieldset id=test-inline> + <legend>1</legend> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</fieldset> +<div id=ref-inline> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> + <div>6</div> + <div>7</div> + <div>8</div> + <div>9</div> +</div> +<script> + test(() => { + const testElm = document.getElementById('test'); + const refElm = document.getElementById('ref'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + }, "Grid"); + + test(() => { + const testElm = document.getElementById('test-inline'); + const refElm = document.getElementById('ref-inline'); + assert_equals(getComputedStyle(testElm).height, + getComputedStyle(refElm).height, 'height'); + assert_equals(testElm.querySelector('legend').offsetTop, + testElm.querySelector('div').offsetTop, 'offsetTop') + + }, "Inline grid"); +</script> |