Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML: test -webkit-appearance: fieldset and legend: auto #12677

Closed
wants to merge 9 commits into from
Closed

HTML: test -webkit-appearance: fieldset and legend: auto #12677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1e3f741
HTML: test -webkit-appearance: fieldset and fieldset-legend
zcorpan Aug 24, 2018
8b60edb
Test default style for fieldset
zcorpan Aug 27, 2018
1dc2367
Rename legend.html
zcorpan Aug 27, 2018
5ea7223
Test -webkit-apperarance default style on legend
zcorpan Aug 27, 2018
236293d
Move legend-default-style.html
zcorpan Aug 27, 2018
bd5ecc9
Move remaining files
zcorpan Aug 27, 2018
036b7bf
Update to legend: auto
zcorpan Aug 31, 2018
968859e
Fix test for default style
zcorpan Sep 7, 2018
676c178
Fix legend-default-style.html
zcorpan Sep 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions ...replaced-elements/the-fieldset-and-legend-elements/fieldset-block-formatting-context.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
padding: 0;
}
fieldset { border: none; }
.fieldset { -webkit-appearance: fieldset; }
.float {
float: left;
width: 50px;
Expand All @@ -19,11 +20,17 @@
<div class=float></div>
<fieldset><div class=float></div></fieldset>

<div class=float></div>
<div class=fieldset><div class=float></div></div>

<script>
test(() => {
const fieldset = document.querySelector('fieldset');
assert_equals(fieldset.offsetTop, 0, 'fieldset.offsetTop');
assert_equals(fieldset.offsetLeft, 50, 'fieldset.offsetLeft');
assert_equals(fieldset.clientHeight, 50, 'fieldset.clientHeight');
});
let expectedTop = 0;
for (const fieldset of [document.querySelector('fieldset'), document.querySelector('.fieldset')]) {
test(() => {
assert_equals(fieldset.offsetTop, expectedTop, 'fieldset.offsetTop');
assert_equals(fieldset.offsetLeft, 50, 'fieldset.offsetLeft');
assert_equals(fieldset.clientHeight, 50, 'fieldset.clientHeight');
});
expectedTop += 50;
}
</script>
9 changes: 9 additions & 0 deletions ...on-replaced-elements/the-fieldset-and-legend-elements/fieldset-border-gap-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!doctype html>
<title>fieldset border gap</title>
<link rel=match href=fieldset-border-gap-ref.html>
<style>
.fieldset { -webkit-appearance: fieldset; border-top: 100px solid red; width: 100px; }
.legend { legend: auto; width: 100px; height: 50px; background: lime; }
</style>
<p>There should be no red.</p>
<div class=fieldset><div class=legend></div></div>
13 changes: 13 additions & 0 deletions ...laced-elements/the-fieldset-and-legend-elements/fieldset-containing-block-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>fieldset containing block</title>
<link rel=match href=fieldset-containing-block-ref.html>
<style>
p { margin: 0; height: 100px }
.fieldset { -webkit-appearance: fieldset; position: relative; }
.legend { legend: auto; width: 100px; height: 50px; background: lime; }
.inner { position: absolute; top: 0; width: 100px; height: 50px; background: lime; }
.behind { height:100px; top: 108px; background: red; }
</style>
<p>There should be no red.</p>
<div class="behind"></div>
<div class=fieldset><div class=legend></div><div class=inner></div></div>
38 changes: 17 additions & 21 deletions ...dering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,19 @@
<title>fieldset default style</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<link rel=stylesheet href=resources/fieldset-default-style.css>
<style>
#ref {
display: block;
margin-left: 2px;
margin-right: 2px;
/* TODO replace above declarations with these when they are widely supported.
margin-inline-start: 2px;
margin-inline-end: 2px;
*/
border: groove 2px ThreeDFace;
padding: 0.35em 0.75em 0.625em 0.75em;
/* TODO replace above declarations with these when they are widely supported.
padding-block-start: 0.35em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
*/
min-width: min-content;
/* TODO change the above to min-inline-size when it's widely supported. */
}
#appearance-test, #ref { -webkit-appearance: fieldset; }
</style>
<fieldset id=test></fieldset>
<div id=ref></div>
<div id=ref class=fieldset-default-style></div>
<div id=appearance-test></div>
<div id=appearance-ref></div>
<script>
const testElm = document.querySelector('#test');
const refElm = document.querySelector('#ref');
const appearanceTestElm = document.querySelector('#appearance-test');
const appearanceRefElm = document.querySelector('#appearance-ref');
const props = ['display',
'margin-top',
'margin-right',
Expand All @@ -53,9 +40,18 @@
];
const testStyle = getComputedStyle(testElm);
const refStyle = getComputedStyle(refElm);
const appearanceTestStyle = getComputedStyle(appearanceTestElm);
const appearanceRefStyle = getComputedStyle(appearanceRefElm);
props.forEach(prop => {
test(() => {
assert_equals(testStyle[prop], refStyle[prop]);
}, `${prop}`);
}, `${prop} for fieldset`);

test(() => {
assert_equals(appearanceTestStyle[prop], appearanceRefStyle[prop]);
}, `${prop} for div with -webkit-appearance: fieldset`);
});
test(() => {
assert_equals(testStyle['-webkit-appearance'], 'fieldset');
}, "-webkit-appearance for fieldset");
</script>
27 changes: 19 additions & 8 deletions html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,50 @@
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#inline-ref { display: inline-block; }
#inline-ref, #appearance-inline-ref { display: inline-block; }
#appearance-test { -webkit-appearance: fieldset; }
</style>
<fieldset id="block-ref">x</fieldset>
<fieldset id="inline-ref">x</fieldset>
<fieldset id="test">x</fieldset>

<div id="appearance-block-ref">x</div>
<div id="appearance-inline-ref">x</div>
<div id="appearance-test">x</div>
<script>
const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width;
const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width;
const testElm = document.querySelector('#test');
const appearanceTestElm = document.querySelector('#appearance-test');
const appearanceBlockWidth = getComputedStyle(document.querySelector('#appearance-block-ref')).width;
const appearanceInlineWidth = getComputedStyle(document.querySelector('#appearance-inline-ref')).width;
const blocks = ['block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell',
'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root','run-in'];
const inlines = ['inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container'];

function test_display(val, expectedWidth) {
function test_display(elm, val, expectedWidth) {
const prefix = elm.localName === 'div' ? 'div with -webkit-appearance: fieldset and' : 'fieldset with';
test(() => {
testElm.style.removeProperty('display');
testElm.style.display = val;
const computed = getComputedStyle(testElm);
elm.style.removeProperty('display');
elm.style.display = val;
const computed = getComputedStyle(elm);
// Note that computed value is different from the used value.
// E.g., if ruby is not supported, the following assertion will
// fail as the computed value of display will be block.
// If ruby is supported, computed.display will return "ruby",
// but the used value is supposed to be "inline".
assert_equals(computed.display, val, `display: ${val} is not supported`);
assert_equals(computed.width, expectedWidth);
}, `fieldset with display: ${val}`);
}, `${prefix} display: ${val}`);
}

for (const val of blocks) {
test_display(val, blockWidth);
test_display(testElm, val, blockWidth);
test_display(appearanceTestElm, val, appearanceBlockWidth);
}

for (const val of inlines) {
test_display(val, inlineWidth);
test_display(testElm, val, inlineWidth);
test_display(appearanceTestElm, val, appearanceInlineWidth);
}
</script>
15 changes: 15 additions & 0 deletions ...d-elements/the-fieldset-and-legend-elements/fieldset-div-display-contents-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>fieldset and div with display: contents</title>
<link rel=fieldset-foo-ref.html>
<link rel=stylesheet href=resources/fieldset-default-style.css>
<style>
.fieldset-default-style { -webkit-appearance: fieldset; }
.legend-default-style { legend: auto; }
.contents { display: contents; }
</style>
<p>There should be a normal fieldset below with the legend "Foo".</p>
<div class=fieldset-default-style>
<div class=contents>
<div class=legend-default-style>Foo</div>
</div>
</div>
40 changes: 38 additions & 2 deletions html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#test, #ref, #test-inline, #ref-inline {
#test, #ref, #test-inline, #ref-inline,
#appearance-test, #appearance-ref, #appearance-test-inline, #appearance-ref-inline {
display: flex;
justify-content: space-around;
margin: 0;
padding: 0;
border: none
}
#test-inline, #ref-inline { display: inline-flex }
legend {
float: left; /* Makes it not the "rendered legend" */
padding: 0;
}
#test-inline, #ref-inline, #appearance-test-inline, #appearance-ref-inline { display: inline-flex }
#appearance-test, #appearance-test-inline { -webkit-appearance: fieldset; }
</style>
<fieldset id=test>
<legend>1</legend>
Expand Down Expand Up @@ -62,6 +64,30 @@
<div>8</div>
<div>9</div>
</div>
<hr>
<div id=appearance-test>
<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>
<div id=appearance-test-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');
Expand All @@ -81,4 +107,14 @@
testElm.querySelector('div').offsetTop, 'offsetTop')

}, "Inline flex");

test(() => {
assert_equals(getComputedStyle(document.getElementById('appearance-test')).height,
getComputedStyle(document.getElementById('ref')).height);
}, "Flex and -webkit-appearance: fieldset");

test(() => {
assert_equals(getComputedStyle(document.getElementById('appearance-test-inline')).height,
getComputedStyle(document.getElementById('ref-inline')).height);
}, "Inline flex and -webkit-appearance: fieldset");
</script>
40 changes: 38 additions & 2 deletions html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,21 @@
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#test, #ref, #test-inline, #ref-inline {
#test, #ref, #test-inline, #ref-inline,
#appearance-test,#appearance-test-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;
}
#test-inline, #ref-inline, #appearance-test-inline { display: inline-grid }
#appearance-test, #appearance-test-inline { -webkit-appearance: fieldset; }
</style>
<fieldset id=test>
<legend>1</legend>
Expand Down Expand Up @@ -63,6 +65,30 @@
<div>8</div>
<div>9</div>
</div>
<hr>
<div id=appearance-test>
<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>
<div id=appearance-test-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');
Expand All @@ -82,4 +108,14 @@
testElm.querySelector('div').offsetTop, 'offsetTop')

}, "Inline grid");

test(() => {
assert_equals(getComputedStyle(document.getElementById('appearance-test')).height,
getComputedStyle(document.getElementById('ref')).height);
}, "Grid and -webkit-appearance: fieldset");

test(() => {
assert_equals(getComputedStyle(document.getElementById('appearance-test-inline')).height,
getComputedStyle(document.getElementById('ref-inline')).height);
}, "Inline grid and -webkit-appearance: fieldset");
</script>
15 changes: 14 additions & 1 deletion html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-multicol.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
<script src=/resources/testharnessreport.js></script>
<style>
#test { margin: 0; padding: 0; border: none }
#test, #ref { columns: 5 }
#test, #ref, #appearance-test { columns: 5 }
p { margin: 0 }
#appearance-test { -webkit-appearance: fieldset; }
</style>
<fieldset id=test>
<p>1
Expand All @@ -21,9 +22,21 @@
<p>4
<p>5
</div>
<div id=appearance-test>
<p>1
<p>2
<p>3
<p>4
<p>5
</div>
<script>
test(() => {
assert_equals(getComputedStyle(document.getElementById('test')).height,
getComputedStyle(document.getElementById('ref')).height);
});

test(() => {
assert_equals(getComputedStyle(document.getElementById('appearance-test')).height,
getComputedStyle(document.getElementById('ref')).height);
}, '-webkit-appearance: fieldset and multicol');
</script>
13 changes: 13 additions & 0 deletions ...placed-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>fieldset and overflow</title>
<link rel=match href=fieldset-overflow-hidden-ref.html>
<style>
.fieldset { -webkit-appearance: fieldset; overflow: hidden; border-top: 1em solid transparent; }
.legend { legend: auto; }
.over { position: absolute; top: 4em; height: 1em; left: 0; right: 0; background: white; }
</style>
<p>It should say PASS below.</p>
<div class=fieldset>
<div class=legend>PASS</div>
</div>
<div class=over></div>
2 changes: 2 additions & 0 deletions ...ring/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow-hidden.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
<style>
fieldset { margin:0; padding: 0; overflow: hidden; border: none; border-top: 1em solid transparent; }
legend { padding: 0; }
.over { position: absolute; top: 4em; height: 1em; left: 0; right: 0; background: white; }
</style>
<p>It should say PASS below.</p>
<fieldset>
<legend>PASS</legend>
</fieldset>
<div class=over></div>
Loading