diff --git a/mathml/relations/css-styling/width-height-001.html b/mathml/relations/css-styling/width-height-001.html index 2deedc3f0b84d4..57cbc1b0ab2788 100644 --- a/mathml/relations/css-styling/width-height-001.html +++ b/mathml/relations/css-styling/width-height-001.html @@ -4,7 +4,7 @@ width, height, inline-size and block-size - + @@ -30,6 +30,7 @@ document.body.insertAdjacentHTML("beforeend", `
${MathMLFragments[tag]}
`); let div = document.body.lastElementChild; let element = FragmentHelper.element(div.firstElementChild); + FragmentHelper.forceNonEmptyDescendants(element); test(function() { assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); @@ -49,6 +50,35 @@ assert_approx_equals(box.height, 700, epsilon, "height"); }, `inline-size and block-size properties on ${tag}`); + // Test that if we specify a size smaller than the content, then + // it is used too. Note that we skip mtable, which follows CSS + // tables rules and behave differently in that case. + if (tag != "mtable") { + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var style = `width: 2px; height: 1px;`; + element.setAttribute("style", style); + let box = element.getBoundingClientRect(); + assert_approx_equals(box.width, 2, epsilon, "width"); + assert_approx_equals(box.height, 1, epsilon, "height"); + }, `width and height properties on ${tag} (content overflowing)`); + } + + div.style = "display: none;"; // Hide the div after measurement. + + document.body.insertAdjacentHTML("beforeend", `
${MathMLFragments[tag]}
`); + let shrinkWrapDiv = document.body.lastElementChild.firstElementChild; + element = FragmentHelper.element(shrinkWrapDiv.firstElementChild); + FragmentHelper.forceNonEmptyDescendants(element); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var style = `width: 300px;`; + element.setAttribute("style", style); + let box = shrinkWrapDiv.getBoundingClientRect(); + assert_approx_equals(box.width, 300, epsilon); + }, `width property on ${tag} (preferred width)`); + div.style = "display: none;"; // Hide the div after measurement. } diff --git a/mathml/relations/css-styling/width-height-004.html b/mathml/relations/css-styling/width-height-004.html index 10ece249ca0b51..e26ebe9682328b 100644 --- a/mathml/relations/css-styling/width-height-004.html +++ b/mathml/relations/css-styling/width-height-004.html @@ -20,7 +20,6 @@ } [data-name] { width: 7em; - height: 3em; border: 1px solid blue; } @@ -64,6 +63,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -79,6 +90,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -94,6 +117,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -109,6 +144,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -126,6 +173,20 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + XXXXXXXXXXXX + +
diff --git a/mathml/relations/css-styling/width-height-005.html b/mathml/relations/css-styling/width-height-005.html new file mode 100644 index 00000000000000..a6ea8d82deb904 --- /dev/null +++ b/mathml/relations/css-styling/width-height-005.html @@ -0,0 +1,541 @@ + + + + +content position with width/height + + + + + + + + + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + X + X + + + + + X + X + X + + X + X + + + + + X + X + X + + X + X + + +
+ +
+ + + X + X + X + + X + X + + + + + X + X + X + + X + X + + + + + X + X + X + + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ + + diff --git a/mathml/relations/css-styling/width-height-006.html b/mathml/relations/css-styling/width-height-006.html new file mode 100644 index 00000000000000..d5427051974a0d --- /dev/null +++ b/mathml/relations/css-styling/width-height-006.html @@ -0,0 +1,406 @@ + + + + +content position with width/height + + + + + + + + + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + X + X + + + + + + X + X + X + + X + X + + + + + + X + X + X + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ + +