Ensure inline elements in an empty linebox as having zero BSize and n…

…o baseline. Also add meta viewport tag to the setup of `/FileAPI/url/url-in-tags.window.js` WPT - This test passes now, but without this change, the test's viewport gets automatically zoomed out when run on Android; and that zoom factor can lead to off-by-one test failures from pixel-rounding discrepancies. Differential Revision: https://phabricator.services.mozilla.com/D229191 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1931466 gecko-commit: e2242ed908c0f7637c2b9277a674d5d0e1bcd09f gecko-reviewers: layout-reviewers, dholbert, jfkthame
web-platform-tests · Nov 20, 2024 · 7391b51 · 7391b51
1 parent d91cd50
commit 7391b51
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 0 deletions.
diff --git a/FileAPI/url/url-in-tags.window.js b/FileAPI/url/url-in-tags.window.js
@@ -1,3 +1,10 @@
+setup(() => {
+  const viewport_meta = document.createElement('meta');
+  viewport_meta.name = "viewport";
+  viewport_meta.content = "width=device-width,initial-scale=1";
+  document.head.appendChild(viewport_meta);
+});
+
 async_test(t => {
   const run_result = 'test_script_OK';
   const blob_contents = 'window.test_result = "' + run_result + '";';

diff --git a/css/css-inline/empty-span-size-001-ref.html b/css/css-inline/empty-span-size-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="author" title="David Shin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466">
+<style>
+.container {
+  border: 1px solid;
+}
+
+ul {
+  margin: 0;
+}
+
+.button {
+  box-sizing: border-box;
+  border-left: 1px solid;
+  width: 1px;
+  height: 11px;
+  display: inline-block;
+  vertical-align: top;
+}
+</style>
+<div class="container"></div><br>
+<div class="container"><span style="border: 1px solid; border-right: 2px solid;"></span></div><br>
+<div class="container"><ul><li>&nbsp;</li><li>&nbsp;</li></ul></div><br>
+<div class="container"><div class="button"></div><span>&nbsp;</span></div><br>
diff --git a/css/css-inline/empty-span-size-001.html b/css/css-inline/empty-span-size-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="author" title="David Shin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466">
+<link rel="match" href="empty-span-size-001-ref.html">
+<style>
+.container, .has-height {
+  border: 1px solid;
+}
+
+.inline {
+  outline: 1px solid;
+}
+
+input {
+  outline: 1px solid;
+  background: transparent;
+  padding: 0;
+  border: 0;
+  line-height: 10px;
+  vertical-align: top;
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  width: 0;
+}
+</style>
+<!-- Empty inline element in empty line has a height of zero. -->
+<div class="container"><span class="inline"></span></div><br>
+<!-- ... But not if the line has a meaningful height. -->
+<div class="container"><span class="inline"></span><span class="has-height"></span><span class="inline"></span></div><br>
+<!-- ... Or if the line is present in some kind of context that gives a meaningful height. -->
+<div class="container"><ul><li></li><li></li></ul></div><br>
+<div class="container"><input type="button" value=""></div><br>
diff --git a/css/css-inline/empty-span-size-002-ref.html b/css/css-inline/empty-span-size-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="David Shin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466">
+<style>
+.container {
+  border: 1px solid;
+}
+
+ul {
+  margin: 0;
+}
+</style>
+<div class="container"></div><br>
+<div class="container"><span style="border: 1px solid; border-right: 2px solid;"></span></div><br>
diff --git a/css/css-inline/empty-span-size-002.html b/css/css-inline/empty-span-size-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="author" title="David Shin" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1931466">
+<link rel="match" href="empty-span-size-002-ref.html">
+<style>
+.container, .has-height {
+  border: 1px solid;
+}
+
+.inline {
+  outline: 1px solid;
+}
+</style>
+<!-- Empty inline element in empty line has a height of zero. -->
+<div class="container"><ruby class="inline"></ruby></div><br>
+<!-- ... But not if the line has a meaningful height. -->
+<div class="container"><ruby class="inline"></ruby><ruby class="has-height"></ruby><ruby class="inline"></ruby></div><br>