mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision b'e89b6eb4952b217c1a7b6540b0fe2613b0b09c54'
This commit is contained in:
WPT Sync Bot
parent
5f0ef9c561
commit
8f33a04929
112 changed files with 3185 additions and 790 deletions
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc { columns: 2;}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in RTL.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
direction: rtl;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: rtl;
|
||||
height: 500px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: right;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in RTL.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="Initial-letter-breaking-rtl-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
direction: rtl;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: rtl;
|
||||
height: 500px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in vertical-lr.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: ltr;
|
||||
height: 500px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-left: 8px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in vertical-lr.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="Initial-letter-breaking-vlr-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: ltr;
|
||||
height: 500px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in vertical-rl.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: ltr;
|
||||
height: 500px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-right: 8px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample"><div class="fake-initial-letter"></div>BC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation in vertical-rl.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="Initial-letter-breaking-vrl-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc {
|
||||
columns: 2;
|
||||
direction: ltr;
|
||||
height: 500px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests interaction with fragmentation.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#Initial-letter-breaking">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="Initial-letter-breaking-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mc { columns: 2;}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mc">
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
<div class="sample initial-letter">ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests parsing of the initial-letter property</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials">
|
||||
<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
|
||||
<div id="target"></div>
|
||||
<div id="scratch"></div>
|
||||
|
||||
<script>
|
||||
test_computed_value('initial-letter', 'normal');
|
||||
test_computed_value('initial-letter', '1.23');
|
||||
test_computed_value('initial-letter', '1.23 456');
|
||||
test_computed_value('initial-letter', '1.23 calc(45.6)', '1.23 46');
|
||||
test_computed_value('initial-letter', '1.23 drop');
|
||||
test_computed_value('initial-letter', '1.23 raise');
|
||||
test_computed_value('initial-letter', 'drop 1.23', '1.23 drop');
|
||||
test_computed_value('initial-letter', 'raise 1.23', '1.23 raise');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample"><div class="float"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in RTL</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
direction: rtl;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: right;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample"><div class="float"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in RTL</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-float-001-rtl-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
direction: rtl;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter"><div class="float"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in vertical-lr</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-left: 8px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample"><div class="float"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in vertical-lr</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-float-001-vlr-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter"><div class="float"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in vertical-rl</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-right: 8px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample"><div class="float"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line in vertical-rl</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-float-001-vrl-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
height: 230px;
|
||||
line-height: 24px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter"><div class="float"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests initial letter should be part of the line</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-float-001-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter"><div class="float"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests adding the initial-letter to the exclusion-space</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.surrounding {
|
||||
display: inline-block;
|
||||
margin-left: -20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.surrounding2 {
|
||||
display: block;
|
||||
margin-left: 50px;
|
||||
margin-top: -4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample"><div class="float"></div><div class="float"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
<div class="surrounding">bc<br>def<br>ghi<br>jkl<br></div>
|
||||
<div class="surrounding2">mno</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests adding the initial-letter to the exclusion-space</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-float-002-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter"><div class="float"></div><div class="float"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests float-avoidance in the block-direction</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
margin-top: -36px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample">
|
||||
<div class="float"></div><div class="float" style="width:80px"></div>
|
||||
<div class="fake-initial-letter"></div>
|
||||
<div style="display:inline-block; margin-left:-10px;">
|
||||
bc<br>def<br>ghi<br>jkl<br></div>
|
||||
mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests float-avoidance in the block-direction</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-floats-003-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter">
|
||||
<div class="float"></div><div class="float" style="width:80px"></div>
|
||||
Abc<br>def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests left floats should clear left initial-letters and visa-versa.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample">
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc<br>
|
||||
<div class="float" style="clear:left"></div>
|
||||
def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests left floats should clear left initial-letters and visa-versa.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-floats-004-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: none;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter">
|
||||
Abc<br>
|
||||
<div class="float"></div>
|
||||
def<br>ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests right float should be pushed on to next line.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.fake-initial-letter {
|
||||
background: lime;
|
||||
float: left;
|
||||
height: 80px;
|
||||
margin-top: 14px;
|
||||
width: 80px;
|
||||
}
|
||||
.float { margin-top: -70px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample">
|
||||
<div class="fake-initial-letter"></div>
|
||||
bc def<div class="float" style="clear:left"></div><br>
|
||||
ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests right float should be pushed on to next line.</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-floats">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
||||
<link rel="match" href="initial-letter-floats-005-ref.html">
|
||||
<style>
|
||||
.sample {
|
||||
border: solid 1px green;
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.float {
|
||||
background: cyan;
|
||||
clear: left;
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.initial-letter::first-letter {
|
||||
initial-letter: 3 drop;
|
||||
color: lime;
|
||||
font-size: 100px; /* should be ignored in rendering */
|
||||
line-height: 50px; /* should be ignored in rendering */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sample initial-letter">
|
||||
Abc def<div class="float"></div><br>
|
||||
ghi<br>jkl<br>mno<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests parsing of the initial-letter property</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials">
|
||||
<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
||||
<script>
|
||||
test_invalid_value('initial-letter', 'foobar');
|
||||
test_invalid_value('initial-letter', 'drop');
|
||||
test_invalid_value('initial-letter', 'raise');
|
||||
test_invalid_value('initial-letter', 'drop 1 2');
|
||||
test_invalid_value('initial-letter', 'raise 1 2');
|
||||
test_invalid_value('initial-letter', '-1');
|
||||
test_invalid_value('initial-letter', '0');
|
||||
test_invalid_value('initial-letter', '0.5');
|
||||
test_invalid_value('initial-letter', '1 -1');
|
||||
test_invalid_value('initial-letter', '1 0');
|
||||
test_invalid_value('initial-letter', '1 0.5');
|
||||
test_invalid_value('initial-letter', '1 1.5');
|
||||
test_invalid_value('initial-letter', '1 2 3');
|
||||
test_invalid_value('initial-letter', '1 drop 3');
|
||||
test_invalid_value('initial-letter', '1 raise 3');
|
||||
test_invalid_value('initial-letter', '1 foobar 3');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Tests parsing of the initial-letter property</title>
|
||||
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
||||
<link rel="help" href="https://https://w3c.github.io/csswg-drafts/css-inline-3/#sizing-drop-initials">
|
||||
<meta name="assert" content="initial-letter supports the full grammar 'normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
||||
<script>
|
||||
test_valid_value('initial-letter', 'normal');
|
||||
test_valid_value('initial-letter', '1.23');
|
||||
test_valid_value('initial-letter', '1.23 456');
|
||||
test_valid_value('initial-letter', '1.23 calc(45.6)');
|
||||
test_valid_value('initial-letter', '1.23 drop');
|
||||
test_valid_value('initial-letter', '1.23 raise');
|
||||
test_valid_value('initial-letter', 'drop 1.23', '1.23 drop');
|
||||
test_valid_value('initial-letter', 'raise 1.23', '1.23 raise');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue