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

[mathml] Update WPT tests that assume CSS width/height are ignored #38361

Merged
merged 1 commit into from
Feb 9, 2023
Merged

[mathml] Update WPT tests that assume CSS width/height are ignored #38361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 0 additions & 3 deletions mathml/relations/css-styling/ignored-properties-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,6 @@
"align-content: end; justify-content: end;",
"align-self: end; justify-self: end;",
];
if (tag !== "mtable") {
ignoredProperties.push("width: 100px !important; height: 200px !important;");
}

ignoredProperties.forEach(ignoredStyle => {
document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
Expand Down
33 changes: 21 additions & 12 deletions mathml/relations/css-styling/width-height-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/mathml-fragments.js"></script>
<script src="/mathml/support/box-comparison.js"></script>
<style>
/* Revert style specified in the UA style sheet that changes box size. */
merror { border: 0; }
mfrac { padding: 0; }
</style>
<script>
var epsilon = 1;

Expand All @@ -22,25 +27,29 @@
if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtable")
continue;

document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`);
let div = document.body.lastElementChild;
let element = FragmentHelper.element(div.firstElementChild);

test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
var style = "width: 500px; height: 400px;";
var s = compareSizeWithAndWithoutStyle(tag, style);
assert_approx_equals(s.width_delta, 0, epsilon, "width");
assert_approx_equals(s.height_delta, 0, epsilon, "height");
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
var style = `width: 500px; height: 400px;`;
element.setAttribute("style", style);
let box = element.getBoundingClientRect();
assert_approx_equals(box.width, 500, epsilon, "width");
assert_approx_equals(box.height, 400, epsilon, "height");
}, `width and height properties on ${tag}`);

test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
var style = "inline-size: 500px; block-size: 400px;";
var s = compareSizeWithAndWithoutStyle(tag, style);
assert_approx_equals(s.width_delta, 0, epsilon, "width");
assert_approx_equals(s.height_delta, 0, epsilon, "height");
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
var style = `inline-size: 600px; block-size: 700px;`;
element.setAttribute("style", style);
let box = element.getBoundingClientRect();
assert_approx_equals(box.width, 600, epsilon, "width");
assert_approx_equals(box.height, 700, epsilon, "height");
}, `inline-size and block-size properties on ${tag}`);

div.style = "display: none;"; // Hide the div after measurement.
}

done();
Expand Down
11 changes: 7 additions & 4 deletions mathml/relations/html5-tree/display-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,16 @@
var after_block_and_specified_width = getBox("after_block_and_specified_width");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals(before_block_and_specified_width.left, content.left, 1,
let math = getBox("math_with_specified_width");
assert_approx_equals(before_block_and_specified_width.left, math.left, 1,
"content before must be left aligned");
assert_approx_equals(math.width, 100, 1,
"math uses specified width.");
assert_approx_equals((mspace_width.left + mspace_width.right) / 2,
(content.left + content.right) / 2,
(math.left + math.right) / 2,
1,
"math must be centered.");
assert_approx_equals(after_block_and_specified_width.left, content.left, 1,
assert_approx_equals(after_block_and_specified_width.left, math.left, 1,
"content after must be left aligned");
assert_less_than_equal(before_block_and_specified_width.bottom, mspace_width.top,
"new line before math");
Expand Down Expand Up @@ -154,7 +157,7 @@
<span id="after_inline" class="square"></span>
<br/>
<span id="before_block_and_specified_width" class="square"></span>
<math display="block" style="width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math>
<math display="block" id="math_with_specified_width" style="background: pink; width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math>
<span id="after_block_and_specified_width" class="square"></span>
<br/>
<div>
Expand Down