diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0')
8 files changed, 237 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html new file mode 100644 index 0000000000..9e4283e208 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html @@ -0,0 +1,31 @@ + +<!doctype html> +<meta charset=utf-8> +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; + width: 100px; +} + +.left { + margin-left: 0; +} + +.right { + margin-right: 0; +} +</style> +<div class='hr'></div> +<div class='hr left'></div> +<div class='hr'></div> +<div class='hr right'></div> +<div class='hr'></div> + +<div class='hr'></div> +<div class='hr left'></div> +<div class='hr'></div> +<div class='hr right'></div> +<div class='hr'></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html new file mode 100644 index 0000000000..1657f2458d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/align.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="match" href="align-ref.html"> +<style> +hr { + width: 100px; +} +</style> + +<hr align=> +<hr align=left> +<hr align=center> +<hr align=right> +<hr align=foobar> + +<script> +// Test the IDL attribute +const values = ['', 'left', 'center', 'right', 'foobar']; +values.forEach(value => { + const hr = document.createElement('hr'); + hr.align = value; + document.body.appendChild(hr); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html new file mode 100644 index 0000000000..5cd35c83ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; +} + +.green { + color: green; +} + +.no-inset { + border-style: solid; +} +</style> +<div class='hr'></div> +<div class='hr no-inset'></div> +<div class='hr no-inset'></div> +<div class='hr green no-inset'></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html new file mode 100644 index 0000000000..750f77e5fb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/color.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<link rel=match href="color-ref.html"> +<hr> +<hr color=""> +<hr color=transparent> +<hr color=green> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html new file mode 100644 index 0000000000..e852216494 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/hr.html @@ -0,0 +1,55 @@ +<!doctype html> +<title>The hr element</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#ref { + display: block; + unicode-bidi: isolate; + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; + /* TODO: uncomment this when these properties are widely supported + margin-block-start: 0.5em; + margin-inline-end: auto; + margin-block-end: 0.5em; + margin-inline-start: auto; + */ + overflow: hidden; +} +</style> + +<hr id=test> +<div id=ref></div> + +<script> +setup(() => { + self.testStyle = getComputedStyle(document.getElementById('test')); + self.refStyle = getComputedStyle(document.getElementById('ref')); +}); +['display', + 'unicodeBidi', + 'color', + 'borderTopStyle', + 'borderRightStyle', + 'borderBottomStyle', + 'borderLeftStyle', + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'overflow', + // Extra tests + 'height', + 'box-sizing', +].forEach(prop => { + test(() => { + assert_equals(testStyle[prop], refStyle[prop]); + }, prop); +}); +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html new file mode 100644 index 0000000000..11e3d63e34 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/setting-overflow-visible.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>The hr element: setting 'overflow: visible'</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +/* Use 0 margin for hr instead of default 0.5em to make things simpler */ +hr { + margin-top: 0; + margin-bottom: 0; +} +.wrapper { + height: 150px; + position: relative; +} +#test-visible { + overflow: visible; +} +.float, hr::before { + content: ""; + float: left; + width: 50px; + height: 50px; + background-color: orange; +} +.clear { + clear: left; +} +</style> + +<div class=wrapper> + <div class=float></div> + <hr id=test-control> + <div class=float></div> +</div> + +<div class=wrapper> + <div class=float></div> + <hr id=test-visible> + <div class=float></div> +</div> + +<script> + +test(() => { + const hr = document.getElementById('test-control'); + assert_equals(hr.offsetLeft, 50, 'hr.offsetLeft'); + assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); + assert_equals(hr.clientHeight, 50, 'hr.clientHeight'); + const divAfter = hr.nextElementSibling; + assert_equals(divAfter.offsetLeft, 0, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 50 + 1 + 1 /* hr border */, 'divAfter.offsetTop'); +}, 'control'); + +test(() => { + const hr = document.getElementById('test-visible'); + assert_equals(hr.offsetLeft, 0, 'hr.offsetLeft'); + assert_equals(hr.offsetTop, 0, 'hr.offsetTop'); + assert_equals(hr.clientHeight, 0, 'hr.clientHeight'); + const divAfter = hr.nextElementSibling; + assert_equals(divAfter.offsetLeft, 50 + 50, 'divAfter.offsetLeft'); + assert_equals(divAfter.offsetTop, 1 + 1 /* hr border */, 'divAfter.offsetTop'); +}, 'overflow: visible'); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html new file mode 100644 index 0000000000..71e7651c1a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width-ref.html @@ -0,0 +1,19 @@ +<style> +.hr { + color: gray; + border-style: inset; + border-width: 1px; + margin: 0.5em auto; +} +</style> +<div class=hr></div> +<div class=hr style="width: 50%"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100px"></div> +<div class=hr style="width: 100.99px"></div> +<div class=hr style="width: 0%"></div> +<div class=hr style="width: 0%"></div> +<div class=hr></div> +<div class=hr></div> +<div class=hr></div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html new file mode 100644 index 0000000000..a436d2ae25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-hr-element-0/width.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title></title> +<link rel="match" href="width-ref.html"> +<hr> +<hr width='50%'> +<hr width='100'> +<hr width='100foo'> +<hr width=' 100 '> +<hr width='100.99'> +<hr width='0'> +<hr width='00'> +<hr width='+0'> +<hr width='+00'> +<hr width='++0'> |