diff options
Diffstat (limited to 'tests/wpt/tests/css/css-inline/text-box-trim')
78 files changed, 954 insertions, 477 deletions
diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/inheritance.html b/tests/wpt/tests/css/css-inline/text-box-trim/inheritance.html deleted file mode 100644 index a37a40e976d..00000000000 --- a/tests/wpt/tests/css/css-inline/text-box-trim/inheritance.html +++ /dev/null @@ -1,14 +0,0 @@ -<!DOCTYPE html> -<title>Inheritance of CSS Inline Layout properties</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/inheritance-testcommon.js"></script> -<div id="container"> - <div id="target"></div> -</div> -<script> -assert_inherited('text-box-edge', 'leading', 'text'); -assert_not_inherited('text-box-trim', 'none', 'start'); -</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/inheritance.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/inheritance.html new file mode 100644 index 00000000000..4cfb7f41643 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/inheritance.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Inheritance of CSS Inline Layout Text Edge properties</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('text-box-edge', 'auto', 'cap'); +assert_not_inherited('text-box-trim', 'none', 'trim-start'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-computed.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-computed.html new file mode 100644 index 00000000000..406a1639f78 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-computed.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>text-box getComputedStyle() returns correctly resolved values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> +// initial values +test_computed_value('text-box', 'normal'); +test_computed_value('text-box', 'none', 'normal'); +test_computed_value('text-box', 'none auto', 'normal'); +test_computed_value('text-box', 'auto none', 'normal'); +test_computed_value('text-box', 'auto', 'trim-both'); + +// `<text-box-trim>`: `none | trim-start | trim-end | trim-both` +test_computed_value('text-box', 'trim-start'); +test_computed_value('text-box', 'trim-end'); +test_computed_value('text-box', 'trim-both'); + +// `<text-edge>` +test_computed_value('text-box', 'text'); +test_computed_value('text-box', 'cap'); +test_computed_value('text-box', 'ideographic'); +test_computed_value('text-box', 'cap alphabetic'); +test_computed_value('text-box', 'text alphabetic'); + +// Mix initial and non-initial values +test_computed_value('text-box', 'trim-start auto', 'trim-start'); +test_computed_value('text-box', 'trim-both auto', 'trim-both'); +test_computed_value('text-box', 'auto trim-both', 'trim-both'); +test_computed_value('text-box', 'none text', 'none text'); +test_computed_value('text-box', 'text text none', 'none text'); +test_computed_value('text-box', 'none cap', 'none cap'); +test_computed_value('text-box', 'cap ideographic none', 'none cap ideographic'); +test_computed_value('text-box', 'ideographic none', 'none ideographic'); + +// Both `<text-box-trim>` and `<text-box-edge>` +test_computed_value('text-box', 'trim-both text', 'text'); +test_computed_value('text-box', 'trim-start text'); +test_computed_value('text-box', 'text text trim-both', 'text'); +test_computed_value('text-box', 'text text trim-end', 'trim-end text'); +test_computed_value('text-box', 'cap alphabetic trim-start', 'trim-start cap alphabetic'); +test_computed_value('text-box', 'trim-start cap alphabetic'); +test_computed_value('text-box', 'trim-both cap alphabetic', 'cap alphabetic'); +test_computed_value('text-box', 'trim-start ideographic ideographic', 'trim-start ideographic'); +test_computed_value('text-box', 'trim-start ideographic-ink ideographic-ink', 'trim-start ideographic-ink'); +test_computed_value('text-box', 'trim-end cap text', 'trim-end cap'); +test_computed_value('text-box', 'trim-end ex text', 'trim-end ex'); +test_computed_value('text-box', 'cap text trim-end', 'trim-end cap'); +test_computed_value('text-box', 'ex text trim-end', 'trim-end ex'); +test_computed_value('text-box', 'cap text trim-both', 'cap'); +test_computed_value('text-box', 'ex text trim-both', 'ex'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-computed.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-computed.html new file mode 100644 index 00000000000..b5b6f0c5cf7 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>text-box getComputedStyle() returns correctly resolved values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +test_computed_value('text-box-edge', 'auto'); +test_computed_value('text-box-edge', 'text'); +test_computed_value('text-box-edge', 'cap'); +test_computed_value('text-box-edge', 'ex'); +test_computed_value('text-box-edge', 'ideographic'); +test_computed_value('text-box-edge', 'ideographic-ink'); + +test_computed_value('text-box-edge', 'text text', 'text'); +test_computed_value('text-box-edge', 'text alphabetic'); +test_computed_value('text-box-edge', 'text ideographic'); +test_computed_value('text-box-edge', 'text ideographic-ink'); + +test_computed_value('text-box-edge', 'cap text', 'cap'); +test_computed_value('text-box-edge', 'cap alphabetic'); +test_computed_value('text-box-edge', 'cap ideographic'); +test_computed_value('text-box-edge', 'cap ideographic-ink'); + +test_computed_value('text-box-edge', 'ex text', 'ex'); +test_computed_value('text-box-edge', 'ex alphabetic'); +test_computed_value('text-box-edge', 'ex ideographic'); +test_computed_value('text-box-edge', 'ex ideographic-ink'); + +test_computed_value('text-box-edge', 'ideographic text'); +test_computed_value('text-box-edge', 'ideographic alphabetic'); +test_computed_value('text-box-edge', 'ideographic ideographic', 'ideographic'); +test_computed_value('text-box-edge', 'ideographic ideographic-ink'); + +test_computed_value('text-box-edge', 'ideographic-ink text'); +test_computed_value('text-box-edge', 'ideographic-ink alphabetic'); +test_computed_value('text-box-edge', 'ideographic-ink ideographic'); +test_computed_value('text-box-edge', 'ideographic-ink ideographic-ink', 'ideographic-ink'); +</script> +</body> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-invalid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-invalid.html new file mode 100644 index 00000000000..0c1e2d19a3b --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-invalid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>text-box-edge rejects invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +// invalid keyword +test_invalid_value('text-box-edge', 'none'); +test_invalid_value('text-box-edge', 'normal'); +test_invalid_value('text-box-edge', 'leading'); +test_invalid_value('text-box-edge', 'auto leading'); +test_invalid_value('text-box-edge', 'leading auto'); +test_invalid_value('text-box-edge', 'normal text'); +test_invalid_value('text-box-edge', 'text none'); + +test_invalid_value('text-box-edge', 'leading leading'); +test_invalid_value('text-box-edge', 'leading text'); +test_invalid_value('text-box-edge', 'leading cap'); +test_invalid_value('text-box-edge', 'leading ex'); +test_invalid_value('text-box-edge', 'leading ideographic'); +test_invalid_value('text-box-edge', 'leading ideographic-ink'); + +test_invalid_value('text-box-edge', 'text leading'); +test_invalid_value('text-box-edge', 'cap leading'); +test_invalid_value('text-box-edge', 'ex leading'); +test_invalid_value('text-box-edge', 'ideographic leading'); +test_invalid_value('text-box-edge', 'ideographic-ink leading'); + +// invalid grammar +test_invalid_value('text-box-edge', 'alphabetic'); +test_invalid_value('text-box-edge', 'alphabetic text'); +test_invalid_value('text-box-edge', 'text cap'); +test_invalid_value('text-box-edge', 'text ex'); +test_invalid_value('text-box-edge', 'auto auto'); +test_invalid_value('text-box-edge', 'auto text'); +test_invalid_value('text-box-edge', 'text auto'); +test_invalid_value('text-box-edge', 'text text text'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-valid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-valid.html new file mode 100644 index 00000000000..27917c02922 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-edge-valid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>text-box-edge parses valid values according to its grammar</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value('text-box-edge', 'auto'); +test_valid_value('text-box-edge', 'text'); +test_valid_value('text-box-edge', 'cap'); +test_valid_value('text-box-edge', 'ex'); +test_valid_value('text-box-edge', 'ideographic'); +test_valid_value('text-box-edge', 'ideographic-ink'); + +test_valid_value('text-box-edge', 'text text', 'text'); +test_valid_value('text-box-edge', 'text alphabetic'); +test_valid_value('text-box-edge', 'text ideographic'); +test_valid_value('text-box-edge', 'text ideographic-ink'); + +test_valid_value('text-box-edge', 'cap text', 'cap'); +test_valid_value('text-box-edge', 'cap alphabetic'); +test_valid_value('text-box-edge', 'cap ideographic'); +test_valid_value('text-box-edge', 'cap ideographic-ink'); + +test_valid_value('text-box-edge', 'ex text', 'ex'); +test_valid_value('text-box-edge', 'ex alphabetic'); +test_valid_value('text-box-edge', 'ex ideographic'); +test_valid_value('text-box-edge', 'ex ideographic-ink'); + +test_valid_value('text-box-edge', 'ideographic text'); +test_valid_value('text-box-edge', 'ideographic alphabetic'); +test_valid_value('text-box-edge', 'ideographic ideographic', 'ideographic'); +test_valid_value('text-box-edge', 'ideographic ideographic-ink'); + +test_valid_value('text-box-edge', 'ideographic-ink text'); +test_valid_value('text-box-edge', 'ideographic-ink alphabetic'); +test_valid_value('text-box-edge', 'ideographic-ink ideographic'); +test_valid_value('text-box-edge', 'ideographic-ink ideographic-ink', 'ideographic-ink'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-invalid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-invalid.html new file mode 100644 index 00000000000..b874c3148fe --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>text-box rejects invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +// invalid keyword +test_invalid_value('text-box', 'em'); +test_invalid_value('text-box', 'leading'); +test_invalid_value('text-box', 'trim-both leading'); + +// invalid grammars +test_invalid_value('text-box', 'normal normal'); +test_invalid_value('text-box', 'normal none'); +test_invalid_value('text-box', 'auto normal'); +test_invalid_value('text-box', 'auto auto'); +test_invalid_value('text-box', 'none none'); +test_invalid_value('text-box', 'normal text'); +test_invalid_value('text-box', 'text normal'); +test_invalid_value('text-box', 'text cap'); +test_invalid_value('text-box', 'text ex'); +test_invalid_value('text-box', 'alphabetic text'); +test_invalid_value('text-box', 'alphabetic cap'); +test_invalid_value('text-box', 'cap none alphabetic'); +test_invalid_value('text-box', 'cap trim-both alphabetic'); +test_invalid_value('text-box', 'text none text'); +test_invalid_value('text-box', 'text trim-both text'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-shorthand.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-shorthand.html new file mode 100644 index 00000000000..46c05163c3b --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-shorthand.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>text-box shorthand defaults omitted values per spec</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<script> +test_shorthand_value('text-box', 'normal', { + 'text-box-trim': 'none', + 'text-box-edge': 'auto', +}); + +test_shorthand_value('text-box', 'none', { + 'text-box-trim': 'none', + 'text-box-edge': 'auto', +}); + +test_shorthand_value('text-box', 'trim-start', { + 'text-box-trim': 'trim-start', + 'text-box-edge': 'auto', +}); + +test_shorthand_value('text-box', 'ex', { + 'text-box-trim': 'trim-both', + 'text-box-edge': 'ex', +}); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-computed.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-computed.html new file mode 100644 index 00000000000..dbc30fede26 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-computed.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>text-box getComputedStyle() returns correctly resolved values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +test_computed_value('text-box-trim', 'none'); +test_computed_value('text-box-trim', 'trim-start'); +test_computed_value('text-box-trim', 'trim-end'); +test_computed_value('text-box-trim', 'trim-both'); +</script> +</body> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-invalid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-invalid.html new file mode 100644 index 00000000000..d0bc05459ee --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-invalid.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>text-box-trim rejects invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value('text-box-trim', 'trim-start trim-end'); +test_invalid_value('text-box-trim', 'auto'); +test_invalid_value('text-box-trim', 'normal'); +test_invalid_value('text-box-trim', 'start'); +test_invalid_value('text-box-trim', 'end'); +test_invalid_value('text-box-trim', 'both'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-valid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-valid.html index 61622774f6f..0f93b3f36de 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-valid.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-trim-valid.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<title>text-box-trim parses valid values according to its grammar</title> <link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> @@ -6,7 +7,7 @@ <script> test_valid_value('text-box-trim', 'none'); -test_valid_value('text-box-trim', 'start'); -test_valid_value('text-box-trim', 'end'); -test_valid_value('text-box-trim', 'both'); +test_valid_value('text-box-trim', 'trim-start'); +test_valid_value('text-box-trim', 'trim-end'); +test_valid_value('text-box-trim', 'trim-both'); </script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-valid.html b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-valid.html new file mode 100644 index 00000000000..67894ca71f9 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/parsing/text-box-valid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>text-box parses valid values according to its grammar</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +// initial values +test_valid_value('text-box', 'normal'); +test_valid_value('text-box', 'none', 'normal'); +test_valid_value('text-box', 'none auto', 'normal'); +test_valid_value('text-box', 'auto none', 'normal'); +test_valid_value('text-box', 'auto', 'trim-both'); + +// `<text-box-trim>`: `none | trim-start | trim-end | trim-both` +test_valid_value('text-box', 'trim-start'); +test_valid_value('text-box', 'trim-end'); +test_valid_value('text-box', 'trim-both'); + +// `<text-edge>` +test_valid_value('text-box', 'text'); +test_valid_value('text-box', 'cap'); +test_valid_value('text-box', 'ideographic'); +test_valid_value('text-box', 'cap alphabetic'); +test_valid_value('text-box', 'text alphabetic'); + +// Mix initial and non-initial values +test_valid_value('text-box', 'trim-start auto', 'trim-start'); +test_valid_value('text-box', 'trim-both auto', 'trim-both'); +test_valid_value('text-box', 'auto trim-both', 'trim-both'); +test_valid_value('text-box', 'none text', 'none text'); +test_valid_value('text-box', 'text text none', 'none text'); +test_valid_value('text-box', 'none cap', 'none cap'); +test_valid_value('text-box', 'cap ideographic none', 'none cap ideographic'); +test_valid_value('text-box', 'ideographic none', 'none ideographic'); + +// Both `<text-box-trim>` and `<text-box-edge>` +test_valid_value('text-box', 'trim-both text', 'text'); +test_valid_value('text-box', 'trim-start text'); +test_valid_value('text-box', 'text text trim-both', 'text'); +test_valid_value('text-box', 'text text trim-end', 'trim-end text'); +test_valid_value('text-box', 'cap alphabetic trim-start', 'trim-start cap alphabetic'); +test_valid_value('text-box', 'trim-start cap alphabetic'); +test_valid_value('text-box', 'trim-both cap alphabetic', 'cap alphabetic'); +test_valid_value('text-box', 'trim-start ideographic ideographic', 'trim-start ideographic'); +test_valid_value('text-box', 'trim-start ideographic-ink ideographic-ink', 'trim-start ideographic-ink'); +test_valid_value('text-box', 'trim-end cap text', 'trim-end cap'); +test_valid_value('text-box', 'trim-end ex text', 'trim-end ex'); +test_valid_value('text-box', 'cap text trim-end', 'trim-end cap'); +test_valid_value('text-box', 'ex text trim-end', 'trim-end ex'); +test_valid_value('text-box', 'cap text trim-both', 'cap'); +test_valid_value('text-box', 'ex text trim-both', 'ex'); +</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/support/MetricsTestFont.css b/tests/wpt/tests/css/css-inline/text-box-trim/support/MetricsTestFont.css new file mode 100644 index 00000000000..5b69d96e4ac --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/support/MetricsTestFont.css @@ -0,0 +1,4 @@ +@font-face { + font-family: MetricsTestFont; + src: url(cap-x-height.ttf); +} diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/resources/README.md b/tests/wpt/tests/css/css-inline/text-box-trim/support/README.md index e00b13c17dc..e00b13c17dc 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/resources/README.md +++ b/tests/wpt/tests/css/css-inline/text-box-trim/support/README.md diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/resources/cap-x-height.ttf b/tests/wpt/tests/css/css-inline/text-box-trim/support/cap-x-height.ttf Binary files differindex d1fc9e42850..d1fc9e42850 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/resources/cap-x-height.ttf +++ b/tests/wpt/tests/css/css-inline/text-box-trim/support/cap-x-height.ttf diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/resources/variant-class.js b/tests/wpt/tests/css/css-inline/text-box-trim/support/variant-class.js index d1ca547cfd7..d1ca547cfd7 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/resources/variant-class.js +++ b/tests/wpt/tests/css/css-inline/text-box-trim/support/variant-class.js diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-computed.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-computed.html deleted file mode 100644 index 50a963297ce..00000000000 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-computed.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<title>Tests parsing of the text-box-edge property</title> -<link rel="author" title="Google LLC" href="https://www.google.com/"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> -<meta name="assert" content="text-box-edge supports the full grammar leading | [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/computed-testcommon.js"></script> -<body> -<div id="target"></div> -<script> -test_computed_value('text-box-edge', 'leading'); -test_computed_value('text-box-edge', 'text'); -test_computed_value('text-box-edge', 'ex'); -test_computed_value('text-box-edge', 'cap'); -test_computed_value('text-box-edge', 'text alphabetic'); -test_computed_value('text-box-edge', 'text text', 'text'); -test_computed_value('text-box-edge', 'cap alphabetic'); -test_computed_value('text-box-edge', 'cap text', 'cap'); -test_computed_value('text-box-edge', 'ex alphabetic'); -test_computed_value('text-box-edge', 'ex text', 'ex'); -</script> -</body> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-invalid.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-invalid.html deleted file mode 100644 index 401f8c61a39..00000000000 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-invalid.html +++ /dev/null @@ -1,26 +0,0 @@ -<!DOCTYPE html> -<title>Tests parsing of the text-box-edge property</title> -<link rel="author" title="Google LLC" href="https://www.google.com/"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> -<meta name="assert" content="text-box-edge supports the full grammar leading | [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> - -<script> -// invalid keyword -test_invalid_value('text-box-edge', 'auto'); -test_invalid_value('text-box-edge', 'auto leading'); -test_invalid_value('text-box-edge', 'leading auto'); - -// invalid grammar -test_invalid_value('text-box-edge', 'alphabetic'); -test_invalid_value('text-box-edge', 'alphabetic text'); -test_invalid_value('text-box-edge', 'text cap'); -test_invalid_value('text-box-edge', 'text ex'); -test_invalid_value('text-box-edge', 'leading leading'); -test_invalid_value('text-box-edge', 'leading text'); -test_invalid_value('text-box-edge', 'text leading'); -test_invalid_value('text-box-edge', 'text text text'); - -</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-valid.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-valid.html deleted file mode 100644 index 36f37715b99..00000000000 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-edge-valid.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<title>Tests parsing of the text-box-edge property</title> -<link rel="author" title="Google LLC" href="https://www.google.com/"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-edges"> -<meta name="assert" content="text-box-edge supports the full grammar leading | [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/css/support/parsing-testcommon.js"></script> - -<script> -test_valid_value('text-box-edge', 'leading'); -test_valid_value('text-box-edge', 'text'); -test_valid_value('text-box-edge', 'ex'); -test_valid_value('text-box-edge', 'cap'); -test_valid_value('text-box-edge', 'text alphabetic'); -test_valid_value('text-box-edge', 'text text', 'text'); -test_valid_value('text-box-edge', 'cap alphabetic'); -test_valid_value('text-box-edge', 'cap text', 'cap'); -test_valid_value('text-box-edge', 'ex alphabetic'); -test_valid_value('text-box-edge', 'ex text', 'ex'); -</script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html index 08eedbdbfeb..5ff9c7181f8 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html @@ -1,32 +1,34 @@ <!DOCTYPE html> <title>Test choosing the innermost for `text-box-trim` for requested trim metric</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<meta name="assert" + content="If multiple ancestors specify trimming on the same line box, + the text-box-edge value used is that of the innermost block container + that requests trimming on that side of the line box." +> <!-- https://github.com/w3c/csswg-drafts/issues/5426 --> <link rel="match" href="text-box-trim-start-001-ref.html?class=text"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { block-size: 100px; background: lightgray; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - text-box-trim: start; - text-box-edge: leading; + font: 100px/2 MetricsTestFont; } -.inner { - text-box-edge: text; +.target, .outer { + text-box-trim: trim-start; +} +.outer, .inner { + text-box-edge: ex; } </style> <div class="spacer"></div> -<div class="target"> - <!-- - When the element that has `text-box-trim` and `.inner` has different - `text-box-edge` values, use the innermost one. - https://github.com/w3c/csswg-drafts/issues/5426 - --> - <div class="inner">A</div> +<div class="outer"> + <div class="target"> + <div class="inner">ApÉx</div> + </div> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html index 7614329e2e5..8df34274346 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html @@ -1,14 +1,14 @@ <!DOCTYPE html> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; + font: 100px/2 MetricsTestFont; position: relative; top: -50px; height: 100px; @@ -20,6 +20,6 @@ </style> <div class="spacer"></div> <div class="target"> - <span class="atomic">X</span> + <span class="atomic">ApÉx</span> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html index 5f2d01c7dc7..e81a072445b 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html @@ -1,19 +1,18 @@ <!DOCTYPE html> <title>Test the `text-box-trim` isn't propagated into atomic inlines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-atomic-inline-001-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - text-box-trim: both; + font: 100px/2 MetricsTestFont; + text-box-trim: trim-both; text-box-edge: text; } .atomic { @@ -23,6 +22,6 @@ </style> <div class="spacer"></div> <div class="target"> - <span class="atomic">X</span> + <span class="atomic">ApÉx</span> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html index ef0c90d6644..6eff49558ec 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001-ref.html @@ -6,9 +6,7 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; + font: 50px/2 Ahem; height: 275px; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html index 7b008a21f04..37d5ff0bb82 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-001.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line, +even if it's after a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html index a1711e309cc..78f461d6355 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-002.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line, +even if it's within a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html index 8ace67f78f6..03faacbdbb2 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-003.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line only, +even if it's within a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html index 3c682a211f9..7e5b03c15f0 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-end-004.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line, +even if it's within a block-in-inline inside another block</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-end-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text; } </style> @@ -29,6 +29,5 @@ <div>C</div> </span> </div> - <div></div> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001-ref.html index dd288036917..450744a61f7 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001-ref.html @@ -6,9 +6,7 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; + font: 50px/2 Ahem; position: relative; top: -25px; height: 275px; @@ -19,9 +17,9 @@ <span> <div> A<br> - A + B </div> </span> - A + C </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001.html index 9d14a08bc2a..312265b41e8 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-001.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-start is propagated to the last formatted line, +even if it's within a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: start; + font: 50px/2 Ahem; + text-box-trim: trim-start; text-box-edge: text; } </style> @@ -21,9 +21,9 @@ <span> <div> A<br> - A + B </div> </span> - A + C </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-002.html index 67bfa343781..c3fa558e548 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-002.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line, +even if it's followed by a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: start; + font: 50px/2 Ahem; + text-box-trim: trim-start; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html index 5227a4d13aa..507a558d308 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-block-in-inline-start-003.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end is propagated to the last formatted line only, +even if it's within a block-in-inline</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-block-in-inline-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 50px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: start; + font: 50px/2 Ahem; + text-box-trim: trim-start; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001-ref.html index 8f089635fae..5a759de72be 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001-ref.html @@ -1,15 +1,16 @@ <!DOCTYPE html> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; + font: 100px/1 MetricsTestFont; + margin-block: -60px -20px; } </style> <div class="spacer"></div> -<div class="target">A</div> +<div class="target">ApÉx</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001.html index 5cd25060934..363fed4b039 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-001.html @@ -1,27 +1,29 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<html class=reftest-wait> +<title>Dynamically adding text-box-trim</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-dynamic-001-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - text-box-edge: text; + font: 100px/2 MetricsTestFont; + text-box-edge: ex alphabetic; } -.trim { text-box-trim: both; } +.trim { text-box-trim: trim-both; } </style> <div class="spacer"></div> -<div class="target">A</div> +<div class="target">ApÉx</div> <div class="spacer"></div> <script> document.body.offsetTop; for (const target of document.getElementsByClassName('target')) { target.classList.add('trim'); } +document.documentElement.class = ""; </script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-002.html index a921d4d0caa..f07b3930286 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-dynamic-002.html @@ -1,27 +1,29 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<html class=reftest-wait> +<title>Dynamically adding text-box-edge</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> <link rel="match" href="text-box-trim-dynamic-001-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - text-box-trim: both; + font: 100px/2 MetricsTestFont; + text-box-trim: trim-both; } -.text { text-box-edge: text; } +.trim { text-box-edge: ex alphabetic; } </style> <div class="spacer"></div> -<div class="target">A</div> +<div class="target">ApÉx</div> <div class="spacer"></div> <script> document.body.offsetTop; for (const target of document.getElementsByClassName('target')) { - target.classList.add('text'); + target.classList.add('trim'); } +document.documentElement.class = ""; </script> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001-ref.html index 433670fda11..fb31970c5cd 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001-ref.html @@ -1,26 +1,22 @@ <!DOCTYPE html> -<script src="resources/variant-class.js"></script> +<script src="support/variant-class.js"></script> <style> -@font-face { - font-family: test-font; - src: url(resources/cap-x-height.ttf); -} +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: test-font; - font-size: 100px; - line-height: 2; + font: 100px/2 MetricsTestFont; } .offset { position: relative; } .vrl { writing-mode: vertical-rl; } .vlr { writing-mode: vertical-lr; } -.text .target { line-height: 150px; } -.text .offset { inset-block-start: 25px; } +.auto .target, .text .target { line-height: 150px; } +.auto .offset, .text .offset { inset-block-start: 25px; } .alphabetic .target { line-height: 130px; } .alphabetic .offset { inset-block-start: 35px;} .cap .target { line-height: 130px; } @@ -32,6 +28,6 @@ </style> <div class="spacer"></div> <div class="target"> - <span class="offset">A</span> + <span class="offset">ApÉx</span> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001.html index 0bca8de8088..dbd44c814b6 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-001.html @@ -1,41 +1,38 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>Test text-box-trim: trim-end on various writing modes</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> <link rel="match" href="text-box-trim-end-001-ref.html"> -<script src="resources/variant-class.js"></script> -<meta name="variant" content="?class=leading"> +<script src="support/variant-class.js"></script> +<meta name="variant" content="?class=auto"> <meta name="variant" content="?class=text"> <meta name="variant" content="?class=alphabetic"> -<meta name="variant" content="?class=vrl,leading"> +<meta name="variant" content="?class=vrl,auto"> <meta name="variant" content="?class=vrl,text"> <meta name="variant" content="?class=vrl,alphabetic"> -<meta name="variant" content="?class=vlr,leading"> +<meta name="variant" content="?class=vlr,auto"> <meta name="variant" content="?class=vlr,text"> <meta name="variant" content="?class=vlr,cap"> <meta name="variant" content="?class=vlr,ex"> <style> -@font-face { - font-family: test-font; - src: url(resources/cap-x-height.ttf); -} +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: test-font; - font-size: 100px; - line-height: 2; - text-box-trim: end; + font: 100px/2 MetricsTestFont; + text-box-trim: trim-end; } .vrl { writing-mode: vertical-rl; } .vlr { writing-mode: vertical-lr; } -.leading .target { text-box-edge: leading; } -.text .target { text-box-edge: text; } +.auto .target { text-box-edge: auto; } +.text .target { text-box-edge: text; } .alphabetic .target { text-box-edge: text alphabetic; } -.cap .target { text-box-edge: cap; } -.ex .target { text-box-edge: ex; } +.cap .target { text-box-edge: cap; } +.ex .target { text-box-edge: ex; } </style> <div class="spacer"></div> -<div class="target">A</div> +<div class="target">ApÉx</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001-ref.html index 5c0dd61f7a4..8f281b5c730 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001-ref.html @@ -6,9 +6,7 @@ block-size: 100px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; + font: 50px/2 Ahem; } </style> <div class="target" style="height: 65px"> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001.html index 30061b208d6..e9f8613e44f 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-end-empty-line-001.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim skips "invisible line boxes"</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes"> <link rel="match" href="text-box-trim-end-empty-line-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 100px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text alphabetic; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001-ref.html index dd66e5a732d..f928601d753 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001-ref.html @@ -1,14 +1,13 @@ <!DOCTYPE html> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } -.target { - font-family: Ahem; - font-size: 50px; - line-height: 1; +.target, .float { + font: 50px/1 MetricsTestFont; } .float { float: left; @@ -18,9 +17,9 @@ } .clear { clear: both; } </style> -<div class="float"></div> +<div class="float">F<br>F</div> <div class="target"> - A + ApÉx <br class="clear"> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001.html index 985ae60c46d..6694d98421d 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-001.html @@ -1,31 +1,32 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim does not interfere with positive clearance</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-float-clear-br-001-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } +.target, .float { + font: 50px/1 MetricsTestFont; +} .target { - font-family: Ahem; - font-size: 50px; - line-height: 1; - text-box-trim: end; + text-box-trim: trim-end; text-box-edge: text; } .float { float: left; width: 100px; - height: 100px; background: yellow; } .clear { clear: both; } </style> -<div class="float"></div> +<div class="float">F<br>F</div> <div class="target"> - A + ApÉx <br class="clear"> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002-ref.html index d4275a8df5f..e97c45026c1 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002-ref.html @@ -1,14 +1,13 @@ <!DOCTYPE html> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 1; + font: 100px/1 MetricsTestFont; } .float { float: left; @@ -20,6 +19,6 @@ </style> <div class="float"></div> <div class="target"> - A + ApÉx </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002.html index 5798525e476..883a1de3a35 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-002.html @@ -1,32 +1,31 @@ <!DOCTYPE html> -<title>Test if the zero clearance is honored for `text-box-trim`</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim does not interfere with zero clearance</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-float-clear-br-002-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } +.target, .float { + font: 100px/1 MetricsTestFont; +} .target { - font-family: Ahem; - font-size: 100px; - line-height: 1; - text-box-trim: end; + text-box-trim: trim-end; text-box-edge: text alphabetic; } .float { float: left; - width: 100px; - height: 100px; - background: yellow; + color: yellow; } .clear { clear: both; } </style> -<div class="float"></div> +<div class="float">F</div> <div class="target"> - A + ApÉx <br class="clear"> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003-ref.html new file mode 100644 index 00000000000..8c14770034a --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<style> +@import "support/MetricsTestFont.css"; + +.spacer { + margin-top: -10px; + background: lightgray; + block-size: 100px; +} +.target { + font-family: MetricsTestFont; + font-size: 100px; + line-height: 1; +} +.float { + float: left; + width: 100px; + height: 100px; + background: yellow; +} +.clear { clear: both; } +</style> +<div class="float"></div> +<div class="target"> + ApÉx +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003.html new file mode 100644 index 00000000000..e04d18ec109 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-clear-br-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>text-box-trim does not interfere with clearance less than trim amount</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="match" href="text-box-trim-float-clear-br-002-ref.html"> +<style> +@import "support/MetricsTestFont.css"; + +.spacer { + background: lightgray; + block-size: 100px; +} +.target, .float { + font: 100px/1 MetricsTestFont; +} +.target { + text-box-trim: trim-end; + text-box-edge: text alphabetic; +} +.float { + float: left; + width: 100px; + height: 90px; + background: yellow; +} +.clear { clear: both; } +</style> +<div class="float"></div> +<div class="target"> + ApÉx + <br class="clear"> +</div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001-ref.html index 1b1941c96f1..9032be6178e 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001-ref.html @@ -5,13 +5,11 @@ float: left; width: 100px; height: 50px; - background: blue; + background: yellow; } .text { margin-top: 100px; - font-family: Ahem; - font-size: 50px; - line-height: 1; + font: 50px/1 Ahem; } </style> <div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001.html index 99e4736baf0..3d87a82d7db 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-float-start-001.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <title>Tests BFC resolves at the box trimmed by `text-box-trim`.</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-float-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,14 +9,12 @@ float: left; width: 100px; height: 50px; - background: blue; + background: yellow; } .text { margin-top: 100px; - font-family: Ahem; - font-size: 50px; - line-height: 3; - text-box-trim: start; + font: 50px/3 Ahem; + text-box-trim: trim-start; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html index fac58768281..4aaf3375abb 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001-ref.html @@ -1,17 +1,16 @@ <!DOCTYPE html> -<title>Reference for trimming block-boxes at their first/last formatted lines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> +<title>Untrimmed 3-line Reference</title> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .div-parent { outline: 1px solid orange; - font-family: Ahem; - font-size: 20px; - line-height: 1; + font: 20px/3 Ahem; } </style> -<div class ="div-parent""> - <div>Testline1<br><br><br>Testline2<br><br><br>Testline3</div> +<div class="div-parent"> + <div>Testline1</div> + <div>Testline2</div> + <div>Testline3</div> </div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html index 92ec181c51f..4eda7e48827 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html @@ -1,24 +1,23 @@ <!DOCTYPE html> -<title>Tests block boxes's edges are trimmed at text-over/text-under baselines of their first/last formatted lines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> +<title>text-box-trim propagation is blocked by empty block boxes</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#first-text-line"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="match" href="text-box-trim-half-leading-block-box-001-ref.html"> <style> .div-parent { outline: 1px solid orange; - font-family: Ahem; - font-size: 20px; - line-height: 3; - text-box-trim: both; + font: 20px/3 Ahem; + text-box-trim: trim-both; text-box-edge: text; } </style> -<div class ="div-parent"> - <div id="0"></div> - <div id="1">Testline1</div> - <div id="2">Testline2</div> - <div id="3">Testline3</div> +<div class="div-parent"> + <div></div> + <div>Testline1</div> + <div>Testline2</div> + <div>Testline3</div> <div></div> </div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html index 8c10a803706..c6b6f0e16bd 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html @@ -1,17 +1,13 @@ <!DOCTYPE html> -<title>Reference for trimming block-boxes at their first/last formatted lines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .div-parent { outline: 1px solid orange; - font-family: Ahem; - font-size: 20px; - line-height: 1; + font: 20px/1 Ahem; writing-mode:vertical-lr; } </style> -<div class ="div-parent"> +<div class="div-parent"> Test<br><br> </div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html index e095a2d49c2..62c734405a0 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html @@ -1,19 +1,18 @@ <!DOCTYPE html> -<title>Tests block boxes's edges are trimmed at text-over/text-under baselines of their first/last formatted lines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> +<title>text-box-trim trims the block-start (not over) side of a line box</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="match" href="text-box-trim-half-leading-block-box-002-ref.html"> <style> .div-parent { outline: 1px solid orange; - font-family: Ahem; - font-size: 20px; - line-height: 3; - writing-mode:vertical-lr; - text-box-trim: start; + font: 20px/3 Ahem; + writing-mode: vertical-lr; + text-box-trim: trim-start; text-box-edge: text; } </style> -<div class ="div-parent">Test</div> +<div class="div-parent">Test</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003-ref.html new file mode 100644 index 00000000000..176526e55b2 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Trimmed 3-line Reference</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.div-parent { + outline: 1px solid orange; + font: 20px/1 Ahem; +} +</style> + +<div class="div-parent"> + <div>Testline1<br><br><br>Testline2<br><br><br>Testline3</div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html index 916afde8905..dc5e3204c98 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html @@ -1,22 +1,24 @@ <!DOCTYPE html> -<title>Tests block boxes's edges are trimmed at text-over/text-under baselines of their first/last formatted lines</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim"> +<title>text-box-trim trims through invisible line boxes</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> -<link rel="match" href="text-box-trim-half-leading-block-box-001-ref.html"> +<link rel="match" href="text-box-trim-half-leading-block-box-003-ref.html"> <style> .div-parent { outline: 1px solid orange; - font-family: Ahem; - font-size: 20px; - line-height: 3; - text-box-trim: both; + font: 20px/3 Ahem; + text-box-trim: trim-both; text-box-edge: text; } +span { + border-block: solid red; +} </style> -<div class ="div-parent"> - <div id="0"></div> - <div id="1">Testline1<br>Testline2<br>Testline3</div> - <div id="2"></div> +<div class="div-parent"> + <span> </span> + <div>Testline1<br>Testline2<br>Testline3</div> + <span> </span> </div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-004.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-004.html new file mode 100644 index 00000000000..3e24919fd7f --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>text-box-trim does not propagate through padding</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="text-box-trim-half-leading-block-box-001-ref.html"> + +<style> +.div-parent { + outline: 1px solid orange; + font: 20px/3 Ahem; + text-box-trim: trim-both; + text-box-edge: text; +} +.inner { + margin: -10px; + padding: 10px; +} +</style> + +<div class="div-parent"> + <div class="inner">Testline1<br>Testline2<br>Testline3</div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-005.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-005.html new file mode 100644 index 00000000000..fd6b18d052b --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>text-box-trim does not propagate through borders</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="text-box-trim-half-leading-block-box-001-ref.html"> + +<style> +.div-parent { + outline: 1px solid orange; + font: 20px/3 Ahem; + text-box-trim: trim-both; + text-box-edge: text; +} +.inner { + margin: -10px; + border: 10px solid white; +} +</style> + +<div class="div-parent"> + <div class="inner">Testline1<br>Testline2<br>Testline3</div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006.html new file mode 100644 index 00000000000..ad6059ed7d8 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>text-box-trim does propagate through margins</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="match" href="text-box-trim-half-leading-block-box-003-ref.html"> + +<style> +.div-parent { + outline: 1px solid orange; + font: 20px/3 Ahem; + text-box-trim: trim-both; + text-box-edge: text; + padding: 10px; +} +.inner { + margin: -10px; +} +</style> + +<div class="div-parent"> + <div class="inner">Testline1<br>Testline2<br>Testline3</div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001-ref.html index 9bd12cb0bdf..7564a8c1b78 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001-ref.html @@ -3,15 +3,36 @@ <style> .spacer { background: lightgray; - block-size: 100px; + block-size: 20px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 1; + font: 100px/1 Ahem; +} + +.height > .target, +.min-height > .target { height: 120px; } + +.max-height > .target { + height: 10px; +} </style> -<div class="spacer"></div> -<div class="target">A</div> -<div class="spacer"></div> + +<div class="height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="min-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="max-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001.html index d732592e51a..e240f2343a9 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-001.html @@ -1,23 +1,47 @@ <!DOCTYPE html> -<title>Tests the `height` is the specified value when `text-box-trim` is applied</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim does not interfere with height and vice versa (start edge)</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-height-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .spacer { background: lightgray; - block-size: 100px; + block-size: 20px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - height: 120px; - text-box-trim: both; + font: 100px/2 Ahem; + text-box-trim: trim-both; text-box-edge: text alphabetic; } + +.height > .target { + height: 120px; +} + +.min-height > .target { + min-height: 120px; +} + +.max-height > .target { + max-height: 10px; +} </style> -<div class="spacer"></div> -<div class="target">A</div> -<div class="spacer"></div> + +<div class="height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="min-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="max-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002-ref.html new file mode 100644 index 00000000000..61378327c75 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.spacer { + background: lightgray; + block-size: 20px; +} +.max-height > .spacer:first-child { + margin-top: 80px; /* avoid overlap */ +} + +.target { + font: 100px/1 Ahem; +} + +.height > .target, +.min-height > .target { + padding-top: 40px; + height: 80px; +} + +.max-height > .target { + margin-top: -80px; + height: 90px; +} +</style> + +<div class="height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="min-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="max-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002.html index 1249627f838..113dabc83f0 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-height-002.html @@ -1,23 +1,53 @@ <!DOCTYPE html> -<title>Tests the `height` is the specified value when `text-box-trim` is applied</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim does not interfere with height and vice versa (end edge)</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link ref="help" href="https://www.w3.org/TR/css-align-3/#distribution-block"> <link rel="match" href="text-box-trim-height-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> .spacer { background: lightgray; - block-size: 100px; + block-size: 20px; } +.max-height > .spacer:first-child { + margin-top: 80px; /* avoid overlap */ +} + .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - min-height: 120px; - text-box-trim: both; + font: 100px/2 Ahem; + text-box-trim: trim-both; text-box-edge: text alphabetic; + align-content: end; +} + +.height > .target { + height: 120px; +} + +.min-height > .target { + min-height: 120px; +} + +.max-height > .target { + max-height: 10px; } </style> -<div class="spacer"></div> -<div class="target">A</div> -<div class="spacer"></div> + +<div class="height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="min-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> + +<div class="max-height"> + <div class="spacer"></div> + <div class="target">ApÉx</div> + <div class="spacer"></div> +</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001-ref.html index f6f227e11d0..9d12d38d572 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001-ref.html @@ -7,10 +7,7 @@ position: relative; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - width: 200px; + font: 40px/1 Ahem; } .target::first-letter { initial-letter: 3; @@ -20,5 +17,5 @@ } </style> <div class="spacer"></div> -<div class="target">XX É</div> +<div class="target">ApÉx</div> <div class="spacer offset"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001.html index 809666ee0d0..473b9e6bf09 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-end-001.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-end works even in the presence of initial-letter</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-initial-letter-end-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -10,11 +11,8 @@ position: relative; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - width: 200px; - text-box-trim: end; + font: 40px/1 Ahem; + text-box-trim: trim-end; text-box-edge: text alphabetic; } .target::first-letter { @@ -22,5 +20,5 @@ } </style> <div class="spacer"></div> -<div class="target">XX É</div> +<div class="target">ApÉx</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001-ref.html index 84a80e160c7..7a3adc8b7e2 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001-ref.html @@ -6,15 +6,13 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 1; + font: 40px/1 Ahem; position: relative; - top: -50px; + top: -40px; } .target::first-letter { - initial-letter: 2 1; + font-size: 90px; } </style> <div class="spacer"></div> -<div class="target">ÉÉ</div> +<div class="target">ApÉx</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001.html index 4f8d3a33e5b..ad7442d4b47 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-initial-letter-start-001.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim: trim-start works even in the presence of initial-letter</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-initial-letter-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +10,8 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 1; - text-box-trim: start; + font: 40px/1 Ahem; + text-box-trim: trim-start; text-box-edge: text; } .target::first-letter { @@ -20,4 +19,4 @@ } </style> <div class="spacer"></div> -<div class="target">ÉÉ</div> +<div class="target">ApÉx</div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html index e8d6ba60b18..31b11cb6843 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001-ref.html @@ -6,9 +6,7 @@ block-size: 100px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; + font-family: 50px/2 Ahem; height: 275px; } .clamp { diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html index e0af246db0e..88cd7454c54 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html @@ -1,6 +1,8 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim applies to the last line after line-clamp</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link ref="help" href="https://www.w3.org/TR/css-overflow-4/#line-clamp"> <link rel="match" href="text-box-trim-line-clamp-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +11,8 @@ block-size: 100px; } .target { - font-family: Ahem; - font-size: 50px; - line-height: 2; - text-box-trim: end; + font-family: 50px/2 Ahem; + text-box-trim: trim-end; text-box-edge: text; } .clamp { diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001.html index 69323e0aeff..80f897aa4b6 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <title>Test when a box with `text-box-trim` is multi-column</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-multicol-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002.html index dbba108b16d..f15746d3d6a 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <title>Test when a box with `text-box-trim` is block fragmented</title> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> <link rel="match" href="text-box-trim-multicol-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html index da66de00555..4184dcb6388 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-om-001.html @@ -1,12 +1,12 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> @font-face { font-family: test-font; - src: url(resources/cap-x-height.ttf); + src: url(support/cap-x-height.ttf); } .spacer { background: lightgray; diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-end-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-end-001.html index 5d0229fa373..5494b00d17e 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-end-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-end-001.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim ignores ruby annotations under</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-ruby/"> <link rel="match" href="text-box-trim-ruby-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,11 +10,8 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - ruby-position: under; - text-box-trim: end; + font: 40px/1 Ahem; + text-box-trim: trim-end; text-box-edge: text; } rt { @@ -23,5 +21,5 @@ rt { } </style> <div class="spacer"></div> -<div class="target">A <ruby>BASE<rt>RUBY</rt></ruby> B</div> +<div class="target">A <ruby>BASE<rt style="ruby-position: over">RUBY</rt></ruby> <ruby>BASE<rt style="ruby-position: under">RUBY</rt></ruby> B</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001-ref.html index dc1115d3bf8..8abe7616ec4 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001-ref.html @@ -12,5 +12,5 @@ } </style> <div class="spacer"></div> -<div class="target">A BASE B</div> +<div class="target">A BASE BASE B</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001.html index d673d0ab02d..b64c5c49e0c 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-001.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim ignores ruby annotations over</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-ruby/"> <link rel="match" href="text-box-trim-ruby-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +10,8 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - text-box-trim: start; + font: 40px/1 Ahem; + text-box-trim: trim-start; text-box-edge: text; } rt { @@ -22,5 +21,5 @@ rt { } </style> <div class="spacer"></div> -<div class="target">A <ruby>BASE<rt>RUBY</rt></ruby> B</div> +<div class="target">A <ruby>BASE<rt style="ruby-position: over">RUBY</rt></ruby> <ruby>BASE<rt style="ruby-position: under">RUBY</rt></ruby> B</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-002.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-002.html index 9fd8be7dfc5..c4430278ada 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-002.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-ruby-start-002.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim ignores ruby annotations combined with emphasis marks</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-ruby/"> <link rel="match" href="text-box-trim-ruby-start-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +10,8 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - text-box-trim: start; + font: 40px/1 Ahem; + text-box-trim: trim-start; text-box-edge: text; text-emphasis: dot transparent; } diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001-ref.html index 40067cc5925..a03255c46b6 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001-ref.html @@ -1,26 +1,22 @@ <!DOCTYPE html> -<script src="resources/variant-class.js"></script> +<script src="support/variant-class.js"></script> <style> -@font-face { - font-family: test-font; - src: url(resources/cap-x-height.ttf); -} +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: test-font; - font-size: 100px; - line-height: 2; + font: 100px/2 MetricsTestFont; } .offset { position: relative; } .vrl { writing-mode: vertical-rl; } .vlr { writing-mode: vertical-lr; } -.text .target { line-height: 150px; } -.text .offset { inset-block-start: -25px; } +.auto .target, .text .target { line-height: 150px; } +.auto .offset, .text .offset { inset-block-start: -25px; } .cap .target { line-height: 130px; } .cap .offset { inset-block-start: -35px; } .ex .target { line-height: 90px; } @@ -30,6 +26,6 @@ </style> <div class="spacer"></div> <div class="target"> - <span class="offset">A</span> + <span class="offset">ApÉx</span> </div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001.html index 35ac848aa62..106f027688c 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-start-001.html @@ -1,42 +1,40 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>Test text-box-trim: trim-end on various writing modes</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> <link rel="match" href="text-box-trim-start-001-ref.html"> <script src="resources/variant-class.js"></script> -<meta name="variant" content="?class=leading"> +<meta name="variant" content="?class=auto"> <meta name="variant" content="?class=text"> <meta name="variant" content="?class=cap"> <meta name="variant" content="?class=ex"> -<meta name="variant" content="?class=vrl,leading"> +<meta name="variant" content="?class=vrl,auto"> <meta name="variant" content="?class=vrl,text"> <meta name="variant" content="?class=vrl,cap"> <meta name="variant" content="?class=vrl,ex"> -<meta name="variant" content="?class=vlr,leading"> +<meta name="variant" content="?class=vlr,auto"> <meta name="variant" content="?class=vlr,text"> <meta name="variant" content="?class=vlr,alphabetic"> <style> -@font-face { - font-family: test-font; - src: url(resources/cap-x-height.ttf); -} +@import "support/MetricsTestFont.css"; + .spacer { background: lightgray; block-size: 100px; } .target { - font-family: test-font; - font-size: 100px; - line-height: 2; - text-box-trim: start; + font: 100px/2 MetricsTestFont; + text-box-trim: trim-start; } .vrl { writing-mode: vertical-rl; } .vlr { writing-mode: vertical-lr; } -.leading .target { text-box-edge: leading; } +.auto .target { text-box-edge: auto; } .text .target { text-box-edge: text; } -.cap .target { text-box-edge: cap; } -.ex .target { text-box-edge: ex; } -.vlr.alphabetic .target { text-box-edge: text alphabetic; } +.cap .target { text-box-edge: cap; } +.ex .target { text-box-edge: ex; } +.vlr.alphabetic + .target { text-box-edge: text alphabetic; } </style> <div class="spacer"></div> -<div class="target">A</div> +<div class="target">ApÉx</div> <div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-tall-line-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-tall-line-001.html index 9a86e394cc0..3534d36e0b4 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-tall-line-001.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-tall-line-001.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> +<title>text-box-trim references the block container metrics, not inline descendants</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> <link rel="match" href="text-box-trim-tall-line-001-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> @@ -9,10 +10,8 @@ block-size: 100px; } .target { - font-family: Ahem; - font-size: 100px; - line-height: 2; - text-box-trim: both; + font: 100px/2 Ahem; + text-box-trim: trim-both; text-box-edge: text; } </style> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-start-001-ref.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-001-ref.html index 96e0c5a3208..f34c29f491a 100644 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-start-001-ref.html +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-001-ref.html @@ -6,12 +6,9 @@ background: lightgray; } .target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - text-box-trim: start; - text-box-edge: text; + font: 40px/1 Ahem; } </style> <div class="spacer"></div> -<div class="target">It is important!</div> +<div class="target"><span>super</span> <span>important</span></div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-001.html new file mode 100644 index 00000000000..174472365e6 --- /dev/null +++ b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>text-box-trim ignores emphasis marks</title> +<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> +<link rel="help" href="https://www.w3.org/TR/css-text-decor/#emphasis-marks"> +<link rel="match" href="text-box-trim-text-emphasis-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> +<style> +.spacer { + height: 40px; + background: lightgray; +} +.target { + font: 40px/2 Ahem; + text-box-trim: trim-both; + text-box-edge: text; +} +em { + text-emphasis: dot; + text-emphasis-position: over; +} +em + em { + text-emphasis-position: under; +} +</style> +<div class="spacer"></div> +<div class="target"><span>super</span> <span>important</span></div> +<div class="spacer"></div> diff --git a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-start-001.html b/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-start-001.html deleted file mode 100644 index 2c38611ee32..00000000000 --- a/tests/wpt/tests/css/css-inline/text-box-trim/text-box-trim-text-emphasis-start-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge"> -<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim"> -<link rel="match" href="text-box-trim-text-emphasis-start-001-ref.html"> -<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> -<style> -.spacer { - height: 40px; - background: lightgray; -} -.target { - font-family: Ahem; - font-size: 40px; - line-height: 1; - text-box-trim: start; - text-box-edge: text; - text-emphasis: dot transparent; -} -</style> -<div class="spacer"></div> -<div class="target">It is important!</div> |