mirror of
https://github.com/servo/servo.git
synced 2025-06-24 17:14:33 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -23,7 +23,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br>
|
||||
|
|
@ -34,4 +34,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,11 +18,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -25,11 +25,12 @@
|
|||
<li>Test passes if the text you typed is displayed at the cursor position between the
|
||||
two markers and the lines of text wrap inside the black border.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p contenteditable="true" class="content">This is some text content. It contains two colored
|
||||
markers: <span class="inline-marker green"></span> <span id="marked">foobar bazquux</span> <span class="inline-marker blue"></span>.<br>
|
||||
Follow the instructions above to test CSS Regions and <code>contentEditable</code></p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<div class="container">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em>.
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> foobar bazquux <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,4 +62,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
First line of editable content.<br>
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
|
|
@ -49,4 +49,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -37,14 +37,15 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content">
|
||||
<!-- On a single line since new lines in contentEditable elements are messy :( -->
|
||||
This is some text that should be editable. Even the text between <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span>.</em>
|
||||
|
||||
|
||||
Likewise, this text <em><span class="inline-marker green"></span> <span id="marked-two">foobar bazquux</span> <span class="inline-marker blue"></span></em> should be editable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
in the black rectangle. The expected results are the same as for the previous step.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div contenteditable="true" class="editable-container">
|
||||
<p class="editable">
|
||||
This text should be displayed outside of the black border and <span id="marked-outside">foobar bazquux</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true">
|
||||
<p class="editable">
|
||||
|
|
@ -55,4 +55,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,12 +28,13 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div contenteditable="true" class="region">
|
||||
<div class="content flowed">
|
||||
This is some text that should not be editable. Not even the text between
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
<em><span class="inline-marker green"></span> <span id="marked-one">these two markers</span> <span class="inline-marker blue"></span></em>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="content">
|
||||
This is some text that should not be editable.<br>
|
||||
|
|
@ -35,4 +35,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,11 +28,12 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div contenteditable="true" class="content flowed">
|
||||
This is some text that should be editable. Just like the <em><span class="inline-marker green"></span> <span id="marked-one">foobar bazquux</span> <span class="inline-marker blue"></span></em> text between these markers.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-1 ol,
|
||||
#outer-ordered-2 ol {
|
||||
color: blue;
|
||||
}
|
||||
|
|
@ -67,4 +67,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ol class="roman">
|
||||
<li>Numbered sub-list, item I</li>
|
||||
<li>Numbered sub-list, item I</li>
|
||||
</ol>
|
||||
<ul class="circle">
|
||||
<li>Bullet sub-list, item 1</li>
|
||||
|
|
@ -74,4 +74,5 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* We use visibility:hidden and height:0 to visually skip list items
|
||||
while forcing the counter to increse its value. */
|
||||
.hide {
|
||||
|
|
@ -52,4 +52,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div id="region2" class="region">
|
||||
<ol class="double" id="list21">
|
||||
<li>List 2-1, item B</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item D</li>
|
||||
<li>List 2-1, item F</li>
|
||||
</ol>
|
||||
<ol start="4" class="double" id="list22">
|
||||
|
|
@ -91,4 +91,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
.disc>li::before {
|
||||
content: counter(items, disc) " ";
|
||||
}
|
||||
|
||||
|
||||
.slim-wrap {
|
||||
counter-reset: items 2;
|
||||
padding-left: 0;
|
||||
|
|
@ -98,4 +98,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
ol.chapter>li::after {
|
||||
content: "\2026\ " counter(chapter, decimal);
|
||||
}
|
||||
|
||||
|
||||
ol.section {
|
||||
counter-reset: section 0;
|
||||
}
|
||||
|
|
@ -111,4 +111,5 @@
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
color: blue;
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
border-color: green;
|
||||
|
|
@ -66,4 +66,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
Test passes if you see four green squares separated by a small horizontal space.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
<div class="float green"></div>
|
||||
|
|
@ -42,4 +42,5 @@
|
|||
<div class="float green">div>
|
||||
</div></article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
Test passes if you see a green square with a thick black outline.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
<div class="float">
|
||||
|
|
@ -33,4 +33,5 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
wide as the page.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article class="flow">
|
||||
<div class="inner-flow float">
|
||||
|
|
@ -49,4 +49,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
should be blue and they should be flush to one another.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="sized left region">
|
||||
<article>
|
||||
<div class="green">
|
||||
|
|
@ -52,4 +52,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
margin: 2px 4px 6px 8px;
|
||||
}
|
||||
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -63,4 +63,5 @@
|
|||
<article class="flow">
|
||||
</article>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -56,4 +56,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -29,8 +29,9 @@
|
|||
<div class="region">
|
||||
<div class="flow">
|
||||
<div class="float"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,8 +36,9 @@
|
|||
<div class="flow">
|
||||
<div class="float right"></div>
|
||||
<div class="float left"></div>
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -46,8 +46,9 @@
|
|||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
<div class="floater left"></div>
|
||||
filler text. This is filler text. This is filler text. This is filler text. This is
|
||||
filler text. This is filler text. This is filler text. This is filler text.
|
||||
filler text. This is filler text. This is filler text. This is filler text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow right-floater">xxx<br>xxx<br>xxx</div>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -52,9 +52,10 @@
|
|||
<div class="flow">
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
xxx
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<article>
|
||||
</article>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="float">
|
||||
|
|
@ -48,4 +48,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
Test fails is you see any red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="region">
|
||||
<article>
|
||||
<div class="flow">
|
||||
|
|
@ -66,4 +66,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
Test passes if you see a blue square and no red.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="region-parent">
|
||||
<div class="region">
|
||||
<article>
|
||||
|
|
@ -44,4 +44,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
clear: left;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.bordered {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
|
@ -60,4 +60,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
margin: 1em 2em 3em 5em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
|
|
@ -64,4 +64,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.spaced {
|
||||
margin: 0 2em 3em 5em;
|
||||
color: green;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares each inside a black-bordered rectangle:
|
||||
</p><ul>
|
||||
|
|
@ -65,4 +65,5 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br>
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
|
|
@ -64,4 +64,5 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
|
||||
the issue on www-style/css3-break -->
|
||||
Test passes if you see two colored squares inside a black-bordered rectangle.<br>
|
||||
The first (top to bottom) square should be blue, while the second should be green.<br>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
near the bottom left corner of the rectangle. Neither square should touch the black border.<br>
|
||||
You should see no red.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="outer-container">
|
||||
<div class="regions-container">
|
||||
<div>
|
||||
|
|
@ -65,4 +65,5 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
color: blue;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</ul>
|
||||
You should see no red.
|
||||
<p></p>
|
||||
|
||||
|
||||
<div class="regions-container">
|
||||
<div class="region">
|
||||
<article>
|
||||
|
|
@ -73,4 +73,5 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -6,11 +6,11 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.result{
|
||||
color: green;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<style type="text/css">
|
||||
body{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.sourceWrapper{
|
||||
background-color: lightgreen;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<title>CSS Regions region-fragment-break-1 reference</title>
|
||||
<link href="mailto:andhall@adobe.com" rel="author" title="Andy Hall">
|
||||
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns">
|
||||
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
|
|
@ -18,4 +18,5 @@
|
|||
</p>
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is one green square and two vertical
|
||||
<p>The test passes if there is one green square and two vertical
|
||||
green rectangles to the right of it and no red.</p>
|
||||
<div id="square" class="green"></div>
|
||||
<div id="rect-1" class="green"></div>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
}
|
||||
.full {
|
||||
height: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.half {
|
||||
height: 100px;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<p>The test passes if:
|
||||
</p><ul>
|
||||
<li>There is a dark green vertical rectangle on the left</li>
|
||||
<li>There is a dark green square in the middle with a light green
|
||||
<li>There is a dark green square in the middle with a light green
|
||||
square below it</li>
|
||||
<li>There is a light green vertical rectangle on the right</li>
|
||||
<li>There is no red
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<div id="bar-1" class="green"></div>
|
||||
<div id="bar-2" class="green"></div>
|
||||
<div id="bar-3" class="green"></div>
|
||||
<div id="bar-4" class="green"></div>
|
||||
<div id="bar-4" class="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<div id="bar-1" class="green"></div>
|
||||
<div id="bar-2" class="green"></div>
|
||||
<div id="bar-3" class="green"></div>
|
||||
<div id="bar-4" class="green"></div>
|
||||
<div id="bar-4" class="green"></div>
|
||||
<div id="square" class="green"></div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a 4x4 black and gray checkerboard and no red.</p>
|
||||
<p>The test passes if there is a 4x4 black and gray checkerboard and no red.</p>
|
||||
<div id="box">
|
||||
<div class="black"></div>
|
||||
<div id="r1c3" class="black"></div>
|
||||
|
|
@ -61,4 +61,5 @@
|
|||
<div id="r4c4" class="black"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -33,10 +33,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a square with four vertical
|
||||
stripes alternating green and blue, and no red.</p>
|
||||
stripes alternating green and blue, and no red.</p>
|
||||
<div id="bar-1" class="green bar"></div>
|
||||
<div id="bar-2" class="blue bar"></div>
|
||||
<div id="bar-3" class="green bar"></div>
|
||||
<div id="bar-4" class="blue bar"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
<p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
|
||||
There should be no red.</p>
|
||||
<div id="square-1" class="green block"></div>
|
||||
<div id="square-2" class="green block"></div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
|
||||
<p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
|
||||
There should be no red.</p>
|
||||
<div id="rect-1" class="green block"></div>
|
||||
<div id="rect-2" class="green block"></div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
line-height: 1em;
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
|
|
@ -63,4 +63,5 @@
|
|||
xxxxx
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if:</p>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>The two squares each contain five green horizontal stripes</li>
|
||||
<li>There are two green horizontal stripes below the square on right</li>
|
||||
<li>There is no red</li>
|
||||
|
|
@ -32,4 +32,5 @@
|
|||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
height: 100px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#failure {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -51,4 +51,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -6,7 +6,7 @@ body {
|
|||
color: blue;
|
||||
}
|
||||
/* Set the width of the content div so that the blocks will wrap downward when they're not flowing into a region */
|
||||
#content {
|
||||
#content {
|
||||
flow-into: content;
|
||||
width: 125px;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ body {
|
|||
background-color: gray;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
/* Set color on the target to be different than the others */
|
||||
#target-block {
|
||||
|
|
@ -46,4 +46,4 @@ input:focus {
|
|||
}
|
||||
#log {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
#source
|
||||
#source
|
||||
{
|
||||
flow-into: content;
|
||||
}
|
||||
#region
|
||||
{
|
||||
flow-from: content;
|
||||
#region
|
||||
{
|
||||
flow-from: content;
|
||||
}
|
||||
#start-select
|
||||
{
|
||||
|
|
@ -18,5 +18,5 @@
|
|||
{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
var testTimeout = 10000;
|
||||
|
||||
|
||||
setup({timeout: testTimeout});
|
||||
|
||||
// This block is excecuted if running in WebKit's harness
|
||||
|
|
@ -14,7 +14,7 @@ var DEFAULT_MOUSE_VALUE = true;
|
|||
/*
|
||||
* Main test function that defines the testharness test() functions
|
||||
*/
|
||||
function runSelectionTest(inSelectionTests, useMouse)
|
||||
function runSelectionTest(inSelectionTests, useMouse)
|
||||
{
|
||||
var selectionTests = inSelectionTests || [];
|
||||
var useMouse = (useMouse === undefined) ? DEFAULT_MOUSE_VALUE : useMouse;
|
||||
|
|
@ -22,18 +22,18 @@ function runSelectionTest(inSelectionTests, useMouse)
|
|||
if( isRegionsEnabled() )
|
||||
{
|
||||
var selectionTest = async_test("Text was selected", {timeout: testTimeout});
|
||||
selectionTest.step( function()
|
||||
selectionTest.step( function()
|
||||
{
|
||||
var endSelect = document.getElementById("end-select");
|
||||
endSelect.onmouseup = selectionTest.step_func( function(evt)
|
||||
{
|
||||
/* Verify something got selected */
|
||||
var selectedText = getCurrentSelectedText();
|
||||
var selectedText = getCurrentSelectedText();
|
||||
assert_not_equals(selectedText, "");
|
||||
|
||||
/* Verify the selected text is everything between the start and end points */
|
||||
test( function() { verifySelectedText() }, "Selected text is correct" );
|
||||
|
||||
|
||||
/* Check for specific things in the selection */
|
||||
for(var i=0; i < selectionTests.length; i++)
|
||||
{
|
||||
|
|
@ -52,7 +52,7 @@ function runSelectionTest(inSelectionTests, useMouse)
|
|||
test( function(){ assert_equals(isStringInSelection(strToCheck), strExp) }, msg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Update the message stating the tests are complete
|
||||
var msg = document.getElementById("msg");
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ function runSelectionTest(inSelectionTests, useMouse)
|
|||
/*
|
||||
* Set the document selection in an automated way
|
||||
* If running in Webkit's testRunner, uses internal WebKit APIs to simulate mouse movement.
|
||||
* Has option to bypass the mouse movement and set the selection range object directly
|
||||
* Has option to bypass the mouse movement and set the selection range object directly
|
||||
* If not running in Webkit, the function exits, leaving the selection to be done manually.
|
||||
*/
|
||||
function setSelection(start, end, useMouse)
|
||||
|
|
@ -85,7 +85,7 @@ function setSelection(start, end, useMouse)
|
|||
{
|
||||
// This block is executed if running in the Webkit harness
|
||||
var startNode = document.getElementById(start);
|
||||
var endNode = document.getElementById(end);
|
||||
var endNode = document.getElementById(end);
|
||||
|
||||
var xStartPosition = startNode.getBoundingClientRect().left
|
||||
var yStartPosition = startNode.getBoundingClientRect().top
|
||||
|
|
@ -112,8 +112,8 @@ function setSelection(start, end, useMouse)
|
|||
|
||||
eventSender.mouseMoveTo(xEndPosition, yEndPosition);
|
||||
eventSender.mouseUp();
|
||||
|
||||
// Need to manually dispatch this event - it doesn't get
|
||||
|
||||
// Need to manually dispatch this event - it doesn't get
|
||||
// sent otherwise when running in testRunner
|
||||
var mouseUpEvt = document.createEvent('MouseEvents');
|
||||
mouseUpEvt.initMouseEvent( 'mouseup',true,true,window,1,0,0,
|
||||
|
|
@ -140,7 +140,7 @@ function isRegionsEnabled()
|
|||
{
|
||||
var style = document.getElementById("region").style
|
||||
|
||||
if (typeof style["flow-from"] == 'string')
|
||||
if (typeof style["flow-from"] == 'string')
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
|
|
@ -162,7 +162,7 @@ function isTopToBottom(startPoint, endPoint)
|
|||
|
||||
if( start.compareBoundaryPoints(Range.START_TO_END, end) < 0)
|
||||
return true;
|
||||
else
|
||||
else
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -191,21 +191,21 @@ function getTextRange(start, end)
|
|||
|
||||
/*
|
||||
* Returns just the text that is currently selected in the document, with newlines removed
|
||||
*/
|
||||
*/
|
||||
function getCurrentSelectedText()
|
||||
{
|
||||
var currentSelection = "";
|
||||
|
||||
var sel = window.getSelection();
|
||||
if (sel.rangeCount)
|
||||
if (sel.rangeCount)
|
||||
{
|
||||
for (var i = 0, len = sel.rangeCount; i < len; ++i)
|
||||
for (var i = 0, len = sel.rangeCount; i < len; ++i)
|
||||
{
|
||||
currRange = sel.getRangeAt(i);
|
||||
currentSelection += sel.getRangeAt(i).toString();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return currentSelection.replace(/\n/g,"");
|
||||
}
|
||||
|
||||
|
|
@ -239,21 +239,21 @@ function isStringInSelection(strToCheck)
|
|||
function isNodeInSelection(toCheck)
|
||||
{
|
||||
var sel = window.getSelection().getRangeAt(0);
|
||||
|
||||
|
||||
// If it's a node in the document, check the start & end points
|
||||
var nodeToCheck = document.getElementById(toCheck);
|
||||
var range = document.createRange()
|
||||
range.setStart(nodeToCheck, 0);
|
||||
range.setEnd(nodeToCheck, nodeToCheck.childNodes.length);
|
||||
|
||||
|
||||
var startToStart = sel.compareBoundaryPoints(Range.START_TO_START, range);
|
||||
var startToEnd = sel.compareBoundaryPoints(Range.START_TO_END, range);
|
||||
var startToEnd = sel.compareBoundaryPoints(Range.START_TO_END, range);
|
||||
var endToEnd = sel.compareBoundaryPoints(Range.END_TO_END, range);
|
||||
var endToStart = sel.compareBoundaryPoints(Range.END_TO_START, range);
|
||||
|
||||
if(startToStart == startToEnd == endToEnd == endToStart)
|
||||
return false;
|
||||
else
|
||||
else
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue