Auto merge of #25433 - servo-wpt-sync:wpt_update_05-01-2020, r=servo-wpt-sync

Sync WPT with upstream (05-01-2020)

Automated downstream sync of changes from upstream as of 05-01-2020.
[no-wpt-sync]
r? @servo-wpt-sync
This commit is contained in:
bors-servo 2020-01-05 10:24:00 -05:00 committed by GitHub
commit 0d142bea9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
123 changed files with 2917 additions and 221 deletions

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,2 @@
[image-orientation-default.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-composited-dynamic1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-composited-dynamic2.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-composited.html]
expected: FAIL

View file

@ -0,0 +1,4 @@
[image-orientation-from-image-computed-style.html]
[image-orientation:from-image computed style reports correct values]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-content-images.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-dynamic1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-dynamic2.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image-image-document.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-from-image.html]
expected: FAIL

View file

@ -0,0 +1,4 @@
[image-orientation-none-computed-style.html]
[image-orientation:none computed style reports correct values]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-none-content-images.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-none-image-document.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[image-orientation-none.html]
expected: FAIL

View file

@ -9,6 +9,3 @@
[throws if handleEvent is thruthy and not callable]
expected: NOTRUN
[looks up handleEvent method on every event dispatch]
expected: FAIL

View file

@ -1,4 +0,0 @@
[elementFromPoint-001.html]
[CSSOM View - 5 - extensions to the Document interface]
expected: FAIL

View file

@ -1,4 +0,0 @@
[elementsFromPoint-invalid-cases.html]
[The root element is the last element returned for otherwise empty queries within the viewport]
expected: FAIL

View file

@ -0,0 +1,2 @@
[remove-from-shadow-host-and-adopt-into-iframe.html]
expected: TIMEOUT

View file

@ -1,7 +1,7 @@
[response.window.html]
expected: TIMEOUT
[fetch(): combined response Content-Type: text/plain ]
expected: FAIL
expected: NOTRUN
[Response: combined response Content-Type: text/plain;charset=gbk text/plain;charset=windows-1252]
expected: NOTRUN
@ -64,7 +64,7 @@
expected: NOTRUN
[fetch(): combined response Content-Type: text/html text/plain]
expected: FAIL
expected: NOTRUN
[Request: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: NOTRUN
@ -76,13 +76,13 @@
expected: NOTRUN
[Response: combined response Content-Type: text/plain ]
expected: FAIL
expected: NOTRUN
[fetch(): combined response Content-Type: text/plain;charset=gbk text/plain]
expected: NOTRUN
[Request: combined response Content-Type: text/html text/plain]
expected: FAIL
expected: NOTRUN
[<iframe>: combined response Content-Type: text/plain;charset=gbk text/html;charset=windows-1254]
expected: FAIL
@ -115,7 +115,7 @@
expected: NOTRUN
[Response: combined response Content-Type: text/html text/plain]
expected: TIMEOUT
expected: NOTRUN
[<iframe>: combined response Content-Type: text/plain;charset=gbk text/plain]
expected: FAIL
@ -139,7 +139,7 @@
expected: FAIL
[Response: combined response Content-Type: text/plain]
expected: FAIL
expected: TIMEOUT
[<iframe>: combined response Content-Type: text/plain;charset=gbk text/plain;charset=windows-1252]
expected: FAIL
@ -235,7 +235,7 @@
expected: FAIL
[Request: combined response Content-Type: text/plain ]
expected: FAIL
expected: NOTRUN
[Response: combined response Content-Type: text/html */*;charset=gbk]
expected: NOTRUN
@ -271,7 +271,7 @@
expected: FAIL
[fetch(): separate response Content-Type: text/html text/plain]
expected: FAIL
expected: NOTRUN
[Request: combined response Content-Type: text/html;" text/plain]
expected: NOTRUN
@ -309,18 +309,30 @@
[<iframe>: separate response Content-Type: */* text/html]
expected: FAIL
[<iframe>: combined response Content-Type: */* text/html]
expected: FAIL
[<iframe>: separate response Content-Type: text/html;" text/plain]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: FAIL
[<iframe>: combined response Content-Type: text/html */*]
expected: FAIL
[fetch(): separate response Content-Type: text/plain ]
expected: NOTRUN
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
expected: FAIL

View file

@ -0,0 +1,4 @@
[resources-with-0x00-in-header.window.html]
[Expect network error for frame navigation to resource with 0x00 in a header]
expected: FAIL

View file

@ -5,14 +5,11 @@
expected: FAIL
[Embedded credentials are treated as network errors in frames.]
expected: TIMEOUT
expected: FAIL
[Embedded credentials are treated as network errors in new windows.]
expected: TIMEOUT
[Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for relative URLs.]
expected: TIMEOUT
expected: FAIL

View file

@ -1,4 +0,0 @@
[traverse_the_history_1.html]
[Multiple history traversals from the same task]
expected: FAIL

View file

@ -1,4 +0,0 @@
[traverse_the_history_3.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

View file

@ -0,0 +1,4 @@
[cross-origin-due-to-document-domain-only.html]
[Cross-origin due to document.domain]
expected: FAIL

View file

@ -1,4 +0,0 @@
[creating_browsing_context_test_01.html]
[first argument: absolute url]
expected: FAIL

View file

@ -1,4 +1,8 @@
[skip-document-with-fragment.html]
expected: TIMEOUT
[Autofocus elements in iframed documents with URL fragments should be skipped.]
expected: FAIL
[Autofocus elements in top-level browsing context's documents with URI fragments should be skipped.]
expected: TIMEOUT

View file

@ -0,0 +1,2 @@
[link-type-attribute.html]
expected: FAIL

View file

@ -1,5 +1,6 @@
[iframe_sandbox_popups_nonescaping-3.html]
type: testharness
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox]
expected: FAIL
expected: NOTRUN

View file

@ -1,4 +1,5 @@
[crossorigin-sandwich-TAO.sub.html]
expected: ERROR
[There should be one entry.]
expected: FAIL

View file

@ -1,5 +0,0 @@
[018.html]
expected: TIMEOUT
[origin of the script that invoked the method, javascript:]
expected: TIMEOUT

View file

@ -1,5 +0,0 @@
[017.html]
expected: TIMEOUT
[origin of the script that invoked the method, about:blank]
expected: TIMEOUT

View file

@ -143,7 +143,7 @@ For examples of spec JSON files, see [referrer-policy/spec.src.json](../../refer
* **`excluded_tests`**
List of ```test_expansion``` patterns expanding into selections which get skipped when generating the tests (aka. blacklisting/suppressing)
List of ```test_expansion``` patterns expanding into selections which get skipped when generating the tests (aka. blocklisting/suppressing)
* **`test_expansion_schema`**
@ -188,9 +188,9 @@ A **selection** is a single **test instance** (scenario) with explicit values th
Taking the spec JSON, the generator follows this algorithm:
* Expand all ```excluded_tests``` to create a blacklist of selections
* Expand all ```excluded_tests``` to create a blocklist of selections
* For each specification requirement: Expand the ```test_expansion``` pattern into selections and check each against the blacklist, if not marked as suppresed, generate the test resources for the selection
* For each specification requirement: Expand the ```test_expansion``` pattern into selections and check each against the blocklist, if not marked as suppresed, generate the test resources for the selection
### Source Contexts

View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation defaults to from-image</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-default-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
}
img {
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
no image-orientation property is given.</p>
<div>
<img src="support/exif-orientation-1-ul.jpg"/>
<br>Normal
</div>
<div>
<img src="support/exif-orientation-2-ur.jpg"/>
<br>Flipped horizontally
</div>
<div>
<img src="support/exif-orientation-3-lr.jpg"/>
<br>Rotated 180&deg;
</div>
<div>
<img src="support/exif-orientation-4-lol.jpg"/>
<br>Flipped vertically
</div>
<div>
<img src="support/exif-orientation-5-lu.jpg"/>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-6-ru.jpg"/>
<br>Rotated 90&deg; CW
</div>
<div>
<img src="support/exif-orientation-7-rl.jpg"/>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-8-llo.jpg"/>
<br>Rotated 90&deg; CCW
</div>
<div>
<img src="support/exif-orientation-9-u.jpg"/>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: change from image-orientation: none to from-image with will-change: transform</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;}
img {
will-change: transform;
border: 1px solid black;
image-orientation: none;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function runTest() {
for (var i = 1; i <= 9; i++) {
document.getElementById("img" + i).style.imageOrientation = "from-image";
}
}
</script>
</head>
<body onload="runTest()">
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div>
<img id="img1" src="support/exif-orientation-1-ul.jpg"/>
<br>Normal
</div>
<div>
<img id="img2" src="support/exif-orientation-2-ur.jpg"/>
<br>Flipped horizontally
</div>
<div>
<img id="img3" src="support/exif-orientation-3-lr.jpg"/>
<br>Rotated 180&deg;
</div>
<div>
<img id="img4" src="support/exif-orientation-4-lol.jpg"/>
<br>Flipped vertically
</div>
<div>
<img id="img5" src="support/exif-orientation-5-lu.jpg"/>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
<br>Rotated 90&deg; CW
</div>
<div>
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
<br>Rotated 90&deg; CCW
</div>
<div>
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: change from image-orientation: from-image to none with will-change: transform</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-none-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
}
img {
will-change: transform;
border: 1px solid black;
image-orientation: from-image;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function runTest() {
for (var i = 1; i <= 9; i++) {
document.getElementById("img" + i).style.imageOrientation = "none";
}
}
</script>
</head>
<body onload="runTest()">
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div>
<img id="img1" src="support/exif-orientation-1-ul.jpg"/>
</div>
<div>
<img id="img2" src="support/exif-orientation-2-ur.jpg"/>
</div>
<div>
<img id="img3" src="support/exif-orientation-3-lr.jpg"/>
</div>
<div>
<img id="img4" src="support/exif-orientation-4-lol.jpg"/>
</div>
<div>
<img id="img5" src="support/exif-orientation-5-lu.jpg"/>
</div>
<div>
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
</div>
<div>
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
</div>
<div>
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
</div>
<div>
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
</div>
</body>
</html>

View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image with will-change: transform</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
image-orientation: from-image;
}
img {
will-change: transform;
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div>
<img src="support/exif-orientation-1-ul.jpg"/>
<br>Normal
</div>
<div>
<img src="support/exif-orientation-2-ur.jpg"/>
<br>Flipped horizontally
</div>
<div>
<img src="support/exif-orientation-3-lr.jpg"/>
<br>Rotated 180&deg;
</div>
<div>
<img src="support/exif-orientation-4-lol.jpg"/>
<br>Flipped vertically
</div>
<div>
<img src="support/exif-orientation-5-lu.jpg"/>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-6-ru.jpg"/>
<br>Rotated 90&deg; CW
</div>
<div>
<img src="support/exif-orientation-7-rl.jpg"/>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-8-llo.jpg"/>
<br>Rotated 90&deg; CCW
</div>
<div>
<img src="support/exif-orientation-9-u.jpg"/>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation:none computed style</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
overflow: hidden;
image-orientation: from-image;}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function run_tests() {
test(function() {
for (var i = 1; i <= 4; i++) {
var el = document.getElementById("img" + i);
var computedStyle = window.getComputedStyle(el);
assert_equals(computedStyle.width, "100px");
assert_equals(computedStyle.height, "50px");
assert_equals(computedStyle.imageOrientation, "from-image");
}
for (var i = 5; i <= 8; i++) {
var el = document.getElementById("img" + i);
var computedStyle = window.getComputedStyle(el);
assert_equals(computedStyle.width, "50px");
assert_equals(computedStyle.height, "100px");
assert_equals(computedStyle.imageOrientation, "from-image");
}
var el = document.getElementById("img9");
var computedStyle = window.getComputedStyle(el);
assert_equals(computedStyle.width, "100px");
assert_equals(computedStyle.height, "50px");
assert_equals(computedStyle.imageOrientation, "from-image");
}, "image-orientation:from-image computed style reports correct values");
}
</script>
</head>
<body onload="run_tests()">
<div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
<div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
<div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
<div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
<div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
<div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
<div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
<div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
<div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
</body>
</html>

View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-content-images-ref.html">
<meta name=fuzzy content="10;100">
<style>
div.image {
display: inline-block;
border: 1px solid black;
}
div.container {
display: inline-block;
width: 100px;
vertical-align: top;
image-orientation: from-image;
}
img {
width: 100px;
height: 100px;
background-repeat: no-repeat;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
<br>Normal
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
<br>Flipped horizontally
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
<br>Rotated 180&deg;
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
<br>Flipped vertically
</div>
<br>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
<br>Rotated 90&deg; CW
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
<br>Rotated 90&deg; CCW
</div>
<br>
<div class="container">
<img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
<br>Rotated 90&deg; CW
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
<br>Rotated 90&deg; CCW
</div>
<br>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: change from image-orientation: none to from-image</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
}
img {
border: 1px solid black;
image-orientation: none;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function runTest() {
for (var i = 1; i <= 9; i++) {
document.getElementById("img" + i).style.imageOrientation = "from-image";
}
}
</script>
</head>
<body onload="runTest()">
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div>
<img id="img1" src="support/exif-orientation-1-ul.jpg"/>
<br>Normal
</div>
<div>
<img id="img2" src="support/exif-orientation-2-ur.jpg"/>
<br>Flipped horizontally
</div>
<div>
<img id="img3" src="support/exif-orientation-3-lr.jpg"/>
<br>Rotated 180&deg;
</div>
<div>
<img id="img4" src="support/exif-orientation-4-lol.jpg"/>
<br>Flipped vertically
</div>
<div>
<img id="img5" src="support/exif-orientation-5-lu.jpg"/>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
<br>Rotated 90&deg; CW
</div>
<div>
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
<br>Rotated 90&deg; CCW
</div>
<div>
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: change from image-orientation: from-image to none</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-none-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
}
img {
border: 1px solid black;
image-orientation: from-image;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function runTest() {
for (var i = 1; i <= 9; i++) {
document.getElementById("img" + i).style.imageOrientation = "none";
}
}
</script>
</head>
<body onload="runTest()">
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div>
<img id="img1" src="support/exif-orientation-1-ul.jpg"/>
</div>
<div>
<img id="img2" src="support/exif-orientation-2-ur.jpg"/>
</div>
<div>
<img id="img3" src="support/exif-orientation-3-lr.jpg"/>
</div>
<div>
<img id="img4" src="support/exif-orientation-4-lol.jpg"/>
</div>
<div>
<img id="img5" src="support/exif-orientation-5-lu.jpg"/>
</div>
<div>
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
</div>
<div>
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
</div>
<div>
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
</div>
<div>
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
</div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image in image documents</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-image-document-ref.html">
<meta name=fuzzy content="10;100">
<style>
iframe {
display: inline-block;
width: 120px;
height: 110px;
vertical-align: top;
border: 1px solid black;
image-orientation: from-image;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because image
documents always respect the orientation, regardless of the image-orientation
property.</p>
<iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
<br>
<iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
<br>
<iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
</body>
</html>

View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-from-image-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
image-orientation: from-image;
}
img {
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div>
<img src="support/exif-orientation-1-ul.jpg"/>
<br>Normal
</div>
<div>
<img src="support/exif-orientation-2-ur.jpg"/>
<br>Flipped horizontally
</div>
<div>
<img src="support/exif-orientation-3-lr.jpg"/>
<br>Rotated 180&deg;
</div>
<div>
<img src="support/exif-orientation-4-lol.jpg"/>
<br>Flipped vertically
</div>
<div>
<img src="support/exif-orientation-5-lu.jpg"/>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-6-ru.jpg"/>
<br>Rotated 90&deg; CW
</div>
<div>
<img src="support/exif-orientation-7-rl.jpg"/>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img src="support/exif-orientation-8-llo.jpg"/>
<br>Rotated 90&deg; CCW
</div>
<div>
<img src="support/exif-orientation-9-u.jpg"/>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none computed style</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
overflow: hidden;
image-orientation: none;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
<script>
function run_tests() {
test(function() {
for (var i = 1; i <= 9; i++) {
var el = document.getElementById("img" + i);
var computedStyle = window.getComputedStyle(el);
assert_equals(computedStyle.width, "100px");
assert_equals(computedStyle.height, "50px");
assert_equals(computedStyle.imageOrientation, "none");
}
}, "image-orientation:none computed style reports correct values");
}
</script>
</head>
<body onload="run_tests()">
<div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
<div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
<div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
<div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
<div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
<div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
<div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
<div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
<div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
</body>
</html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none for content images</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-none-content-images-ref.html">
<meta name=fuzzy content="10;100">
<style>
div.image {
display: inline-block;
border: 1px solid black;
}
div.container {
display: inline-block;
width: 100px;
vertical-align: top;
image-orientation: none;
}
img {
width: 100px;
height: 100px;
background-repeat: no-repeat;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
</div>
<br>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
</div>
<br>
<div class="container">
<img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
</div>
<br>
<div class="container">
<div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-none-image-document-ref.html">
<meta name=fuzzy content="10;100">
<style>
iframe {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
width: 120px;
height: 110px;
vertical-align: top;
border: 1px solid black;
image-orientation: none;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because image
documents always respect the orientation, regardless of the image-orientation
property.</p>
<iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
<br>
<iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe>
<iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
<br>
<iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<link rel="match" href="reference/image-orientation-none-ref.html">
<meta name=fuzzy content="10;100">
<style>
body {
overflow: hidden;
image-orientation: none;
}
img {
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img src="support/exif-orientation-1-ul.jpg"/></div>
<div><img src="support/exif-orientation-2-ur.jpg"/></div>
<div><img src="support/exif-orientation-3-lr.jpg"/></div>
<div><img src="support/exif-orientation-4-lol.jpg"/></div>
<div><img src="support/exif-orientation-5-lu.jpg"/></div>
<div><img src="support/exif-orientation-6-ru.jpg"/></div>
<div><img src="support/exif-orientation-7-rl.jpg"/></div>
<div><img src="support/exif-orientation-8-llo.jpg"/></div>
<div><img src="support/exif-orientation-9-u.jpg"/></div>
</body>
</html>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Images Module Level 3: image-orientation: from-image</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
body {
overflow: hidden;
}
img {
border: 1px
solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
no image-orientation property is given.</p>
<div>
<img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
<br>Normal
</div>
<div>
<img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
<br>Flipped horizontally
</div>
<div>
<img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
<br>Rotated 180&deg;
</div>
<div>
<img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
<br>Flipped vertically
</div>
<div>
<img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
<br>Rotated 90&deg; CW
</div>
<div>
<img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
<br>Rotated 90&deg; CCW
</div>
<div>
<img src="../support/exif-orientation-9-u-pre-rotated.jpg">
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
div.image {
display: inline-block;
border: 1px solid black;
}
div.container {
display: inline-block;
width: 100px;
vertical-align: top;
}
img {
width: 100px;
height: 100px;
background-repeat: no-repeat;
}
body {
overflow: hidden;
}
</style>
</head>
<body >
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.
</p>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul-pre-rotated.jpg)"></div>
<br>Normal
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-2-ur-pre-rotated.jpg)"></div>
<br>Flipped horizontally
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-3-lr-pre-rotated.jpg)"></div>
<br>Rotated 180&deg;
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-4-lol-pre-rotated.jpg)"></div>
<br>Flipped vertically
</div>
<br>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></div>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></div>
<br>Rotated 90&deg; CW
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></div>
<br>Rotated 90&deg; CCW
</div>
<br>
<div class="container">
<img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></img>
<br>Rotated 90&deg; CW
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></img>
<br>Rotated 90&deg; CCW
</div>
<br>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-9-u-pre-rotated.jpg)"></div>
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image in image documents</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
iframe {
display: inline-block;
width: 120px;
height: 110px;
vertical-align: top;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because image
documents always respect the orientation, regardless of the image-orientation
property.</p>
<iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
<br>
<iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
<br>
<iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
</body>
</html>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: from-image</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
body {
overflow: hidden;
}
img {
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because
image-orientation: from-image is specified.</p>
<div>
<img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
<br>Normal
</div>
<div>
<img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
<br>Flipped horizontally
</div>
<div>
<img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
<br>Rotated 180&deg;
</div>
<div>
<img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
<br>Flipped vertically
</div>
<div>
<img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div>
<img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
<br>Rotated 90&deg; CW
</div>
<div>
<img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div>
<img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
<br>Rotated 90&deg; CCW
</div>
<div>
<img src="../support/exif-orientation-9-u-pre-rotated.jpg">
<br>Undefined (invalid value)
</div>
</body>
</html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none for content images</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
div.image {
display: inline-block;
border: 1px solid black;
}
div.container {
display: inline-block;
width: 100px;
vertical-align: top;
}
img {
width: 100px;
height: 100px;
background-repeat: no-repeat;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<br>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
<br>
<div class="container">
<img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
</div>
<div class="container">
<img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
</div>
<br>
<div class="container">
<div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
iframe {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
width: 120px;
height: 110px;
vertical-align: top;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The images should rotate respecting their EXIF orientation because image
documents always respect the orientation, regardless of the image-orientation
property.</p>
<iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
<br>
<iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe>
<iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
<br>
<iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images Module Level 3: image-orientation: none</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
<style>
body {
overflow: hidden;
}
img {
border: 1px solid black;
}
div {
display: inline-block;
width: 100px;
vertical-align: top;
}
</style>
</head>
<body>
<p>The images should not rotate respecting their EXIF orientation because
image-orientation: none is specified.</p>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
<div><img src="../support/exif-orientation-1-ul.jpg"></div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#pseudo-algorithm">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1037790">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; background:red;">
<div id="container" style="columns:3; column-gap:0; column-fill:auto; width:fit-content; height:100px; background:green;">
<div style="width:25px; height:10px;"></div>
</div>
</div>
<script>
document.body.offsetTop;
container.style.columns = "4";
</script>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<style>
img {
display: list-item;
list-style-type: "[marker]";
}
img.inside {
list-style-position: inside;
}
</style>
<ol>
<img src="about:invalid" alt="alt" class="inside" />
<img src="about:invalid" alt="alt" />
<li value="3">item</li>
</ol>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="marker-content-017-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-lists/#declaring-a-list-item">
<meta name="assert" content="Checks that ::marker can be created inside a non-replaced <img>.">
<style>
img {
display: list-item;
}
img.inside {
list-style-position: inside;
}
img::marker {
content: '[marker]';
}
</style>
<ol>
<img src="about:invalid" alt="alt" class="inside" />
<img src="about:invalid" alt="alt" />
<li>item</li>
</ol>

View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<style>
ol {
float: left;
width: 100px;
}
.inside {
list-style-position: inside;
}
li:nth-child(1) { list-style-type: "1" }
li:nth-child(2) { list-style-type: "1 " }
li:nth-child(3) { list-style-type: "1 " }
li:nth-child(4) { list-style-type: " 1" }
li:nth-child(5) { list-style-type: " 1" }
li:nth-child(6) { list-style-type: " 1 " }
li:nth-child(7) { list-style-type: "1\9 2" }
li:nth-child(8) { list-style-type: "1\a 2" }
</style>
<ol class="inside">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol class="inside">
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
</ol>
<ol class="outside">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol class="outside">
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
</ol>

View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="marker-content-018-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
<meta name="assert" content="Checks that the 'content' property of a ::marker doesn't affect white space.">
<style>
ol {
float: left;
width: 100px;
}
.inside {
list-style-position: inside;
}
li:nth-child(1)::marker { content: "1" }
li:nth-child(2)::marker { content: "1 " }
li:nth-child(3)::marker { content: "1 " }
li:nth-child(4)::marker { content: " 1" }
li:nth-child(5)::marker { content: " 1" }
li:nth-child(6)::marker { content: " 1 " }
li:nth-child(7)::marker { content: "1\9 2" }
li:nth-child(8)::marker { content: "1\a 2" }
</style>
<ol class="inside">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol class="inside">
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
</ol>
<ol class="outside">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol class="outside">
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
<li> item</li>
</ol>

View file

@ -3,6 +3,7 @@
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="mismatch" href="marker-font-variant-numeric-normal-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@font-face {
/* This font looks different with 'font-variant-numeric: tabular-nums' */
@ -17,19 +18,13 @@ ol {
list-style-position: inside;
font-family: "Exo 2";
}
span {
display: inline-block;
vertical-align: top;
}
li:first-child::before {
content: '\200B'; /* zero-width space */
}
li:first-child::after {
content: '';
position: absolute;
height: 225px;
content: 'X X X X X X X X X';
display: inline-block;
font: 25px/1 Ahem;
vertical-align: top;
height: 0;
width: 25px;
background: black;
}
</style>
<ol>

View file

@ -3,6 +3,7 @@
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="mismatch" href="marker-font-variant-numeric-default-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
@font-face {
/* This font looks different with 'font-variant-numeric: tabular-nums' */
@ -19,10 +20,10 @@ ol {
}
span {
display: inline-block;
font: 25px/1 Ahem;
vertical-align: top;
width: 25px;
height: 25px;
background: black;
}
</style>
<ol>

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Bidirectional text inside ruby content box</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<body dir="rtl" style="font-size: 64px">
<ruby><div>אב12ג</div><rt><div>אabבג</div></ruby>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Bidirectional text inside ruby content box</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#bidi">
<link rel="match" href="ruby-bidi-003-ref.html">
<body dir="rtl" style="font-size: 64px">
<ruby>אב12ג<rt>אabבג</ruby>

View file

@ -0,0 +1,23 @@
<!doctype html>
<title>CSS Shadow Parts test: Parts don't incorrectly share style with other elements</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org/" title="Mozilla">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>::part(part1) { color: green; }</style>
<div id="host"></div>
<script>
"use strict";
test(function() {
host.attachShadow({ mode: "open" }).innerHTML = `
<div></div>
<div part="part1"></div>
`;
assert_equals(
getComputedStyle(host.shadowRoot.querySelector("[part]")).color,
"rgb(0, 128, 0)",
"Part should be green",
);
}, "Part in selected host does not incorrectly share style with non-part");
</script>

View file

@ -0,0 +1,4 @@
<!doctype html>
<title>DOM Test Reference</title>
<p>You should see the word PASS below.</p>
<div>PASS</div>

View file

@ -0,0 +1,29 @@
<!doctype html>
<html class="reftest-wait">
<head>
<title>Adopting a shadow host child into an iframe</title>
<link rel="help" href="https://dom.spec.whatwg.org/#concept-node-adopt">
<link rel="match" href="remove-from-shadow-host-and-adopt-into-iframe-ref.html">
<style>
iframe { border: 0; }
</style>
<script src="/common/reftest-wait.js"></script>
<script>
onload = () => {
const root = host.attachShadow({mode:"open"});
root.innerHTML = "<slot>";
// force a layout
host.offsetTop;
iframe.contentWindow.document.body.style.margin = 0;
iframe.contentWindow.document.body.appendChild(adopted);
host.remove();
takeScreenshot();
}
</script>
</head>
<body>
<p>You should see the word PASS below.</p>
<iframe id="iframe"></iframe>
<div id="host"><span id="adopted">PASS</span></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
async_test(t => {
const script = document.createElement("script");
t.add_cleanup(() => script.remove());
script.src = "resources/script-with-0x00-in-header.py";
script.onerror = t.step_func_done();
script.onload = t.unreached_func();
document.body.append(script);
}, "Expect network error for script with 0x00 in a header");
async_test(t => {
const frame = document.createElement("iframe");
t.add_cleanup(() => frame.remove());
frame.src = "resources/document-with-0x00-in-header.py";
// If network errors result in load events for frames per
// https://github.com/whatwg/html/issues/125 and https://github.com/whatwg/html/issues/1230 this
// should be changed to use the load event instead.
t.step_timeout(() => {
assert_equals(frame.contentDocument, null);
t.done();
}, 1000);
document.body.append(frame);
}, "Expect network error for frame navigation to resource with 0x00 in a header");
async_test(t => {
const img = document.createElement("img");
t.add_cleanup(() => img.remove());
img.src = "resources/blue-with-0x00-in-a-header.asis";
img.onerror = t.step_func_done();
img.onload = t.unreached_func();
document.body.append(img);
}, "Expect network error for image with 0x00 in a header");

View file

@ -0,0 +1,6 @@
`blue-with-0x00-in-a-header.asis` is a copy from `../../images/blue.png` with the following prepended using Control Pictures to signify actual newlines and 0x00:
```
HTTP/1.1 200 AN IMAGE␍␊
Content-Type: image/png␍␊
Custom: ␀␍␊␍␊
```

View file

@ -0,0 +1,4 @@
def main(request, response):
response.headers.set("Content-Type", "text/html")
response.headers.set("Custom", "\0")
return "<!doctype html><b>This is a document.</b>"

View file

@ -0,0 +1,4 @@
def main(request, response):
response.headers.set("Content-Type", "text/javascript")
response.headers.set("Custom", "\0")
return "var thisIsJavaScript = 0"

View file

@ -0,0 +1,33 @@
<!doctype html>
<title>Cross-origin due to document.domain</title>
<meta charset=utf-8>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id=log></div>
<iframe src=resources/cross-origin-due-to-document-domain-only-helper.html></iframe>
<script>
async_test(t => {
onload = t.step_func_done(() => {
const frame = document.querySelector("iframe");
const innerSelf = self[0];
const innerLocation = innerSelf.location;
const innerDocument = innerSelf.document;
assert_equals(innerLocation.host, location.host);
assert_true(innerSelf.expandosForever);
assert_true(innerLocation.expandosForever);
assert_equals(frame.contentWindow, innerSelf);
assert_equals(frame.contentDocument, innerDocument);
innerSelf.setDocumentDomain();
assert_throws("SecurityError", () => innerSelf.expandosForever);
assert_throws("SecurityError", () => innerLocation.expandosForever);
assert_throws("SecurityError", () => innerLocation.host);
assert_equals(innerSelf.parent, self);
assert_throws("SecurityError", () => innerSelf.frameElement);
assert_throws("SecurityError", () => innerLocation.reload());
assert_equals(frame.contentWindow, innerSelf);
assert_equals(frame.contentDocument, null);
// Cross-origin Document object obtained before it became cross-origin has no protections
assert_equals(innerDocument.URL, frame.src);
});
});
</script>

View file

@ -0,0 +1,9 @@
<!doctype html>
<meta charset=utf-8>
<script>
self.expandosForever = true
self.location.expandosForever = true
function setDocumentDomain() {
document.domain = document.domain
}
</script>

View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<p>You should see a green rectangle below</p>
<div style="width:100px;height:100px;background-color:green"></div>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel=match href=link-type-attribute-ref.html>
<link rel="stylesheet" type="application/javascript" href="data:text/css,div { background-color: red !important; }">
<link rel="stylesheet" type="ABCtext/css" href="data:text/css,div { background-color: red !important; }">
<link rel="stylesheet" type="text/cssDEF" href="data:text/css,div { background-color: red !important; }">
<link rel="stylesheet" type="text/invalid" href="data:text/css,div { background-color: red !important; }">
<link rel="stylesheet" type="invalid" href="data:text/css,div { background-color: red !important; }">
<p>You should see a green rectangle below</p>
<div style="width:100px;height:100px;background-color:green"></div>

View file

@ -4,11 +4,8 @@ var validator = {
var self = this;
test(function() {
self.pre_check(ctl, 'tooLong');
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.dirty)
self.set_dirty(ctl);
if (data.expected)
assert_true(
ctl.validity.tooLong,
@ -25,11 +22,8 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "tooShort");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.dirty)
self.set_dirty(ctl);
if (data.expected)
assert_true(
ctl.validity.tooShort,
@ -46,7 +40,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "patternMismatch");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -65,7 +58,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "valueMissing");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -84,7 +76,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "typeMismatch");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -103,7 +94,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "rangeOverflow");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -122,7 +112,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "rangeUnderflow");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -141,7 +130,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "stepMismatch");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -160,7 +148,6 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "badInput");
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected)
@ -179,17 +166,24 @@ var validator = {
var self = this;
test(function () {
self.pre_check(ctl, "customError");
ctl.setCustomValidity(data.conditions.message);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.expected) {
assert_true(
ctl.validity.customError,
'The validity.customError attribute should be true' + condStr);
assert_equals(
ctl.validationMessage, data.conditions.message,
'The validationMessage attribute should be \'' +
data.conditions.message + '\'' + condStr);
// validationMessage returns the empty string if ctl is barred from
// constraint validation, which happens if ctl is disabled.
if (ctl.disabled) {
assert_equals(
ctl.validationMessage, '',
'The validationMessage attribute must be empty' + condStr);
} else {
assert_equals(
ctl.validationMessage, data.conditions.message,
'The validationMessage attribute should be \'' +
data.conditions.message + '\'' + condStr);
}
} else {
assert_false(
ctl.validity.customError,
@ -205,11 +199,8 @@ var validator = {
test_isValid: function(ctl, data) {
var self = this;
test(function () {
self.set_conditions(ctl, data.conditions);
self.iterate_over(ctl, data).forEach(function(val) {
const {ctl, data, condStr} = val;
if (data.dirty)
self.set_dirty(ctl);
if (data.expected)
assert_true(
ctl.validity.valid,
@ -352,7 +343,9 @@ var validator = {
ctl.removeAttribute(item);
});
for (var attr in obj) {
if (attr === "checked" || obj[attr] || obj[attr] === "")
if (attr === "message")
ctl.setCustomValidity(obj[attr]);
else if (attr === "checked" || obj[attr] || obj[attr] === "")
ctl[attr] = obj[attr];
}
},
@ -398,12 +391,27 @@ var validator = {
iterate_over: function(ctl, data) {
// Iterate over normal, disabled, readonly, and both.
var ctlDisabled = ctl.cloneNode(true);
this.set_conditions(ctlDisabled, data.conditions);
if (data.dirty)
this.set_dirty(ctlDisabled);
ctlDisabled.disabled = true;
var ctlReadonly = ctl.cloneNode(true);
this.set_conditions(ctlReadonly, data.conditions);
if (data.dirty)
this.set_dirty(ctlReadonly);
ctlReadonly.readonly = true;
var ctlBoth = ctl.cloneNode(true);
this.set_conditions(ctlBoth, data.conditions);
if (data.dirty)
this.set_dirty(ctlBoth);
ctlBoth.disabled = true;
ctlBoth.readonly = true;
ctl = ctl.cloneNode(true);
this.set_conditions(ctl, data.conditions);
return [
{ctl: ctl, data: data, condStr: '.'},
{ctl: ctlDisabled, data: data, condStr: ', when control is disabled.'},

View file

@ -1,5 +1,3 @@
[multiTouchPoints.html]
disabled:
if product == "chrome" and os != "mac": https://github.com/web-platform-tests/wpt/issues/20838
expected:
if product == "firefox" or product == "safari" or product == "epiphany" or product == "webkit": ERROR

View file

@ -1,5 +1,3 @@
[multiTouchPointsReleaseFirstPoint.html]
disabled:
if product == "chrome": https://github.com/web-platform-tests/wpt/issues/20838
expected:
if product == "firefox" or product == "safari": ERROR

View file

@ -1,5 +1,3 @@
[multiTouchPointsReleaseSecondPoint.html]
disabled:
if product == "chrome": https://github.com/web-platform-tests/wpt/issues/20838
expected:
if product == "firefox" or product == "safari": ERROR

View file

@ -1,5 +1,3 @@
[multiTouchPointsTwoTouchStarts.html]
disabled:
if product == "chrome" and os != "mac": https://github.com/web-platform-tests/wpt/issues/20838
expected:
if product == "firefox" or product == "safari": ERROR
expected:
if product == "firefox" or product == "safari": ERROR

View file

@ -1,5 +1,3 @@
[multiTouchPointsWithPause.html]
disabled:
if product == "chrome": https://github.com/web-platform-tests/wpt/issues/20838
expected:
if product == "firefox" or product == "safari": ERROR

View file

@ -4,7 +4,7 @@
<style>
body { margin: 0; }
#j { position: relative; width: 600px; height: 200px; top: 600px; }
#j { position: absolute; width: 600px; height: 200px; top: 100%; }
</style>
<div id='j'></div>
@ -19,7 +19,9 @@ promise_test(async () => {
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
document.querySelector("#j").style.top = "400px";
// Move div partially into viewport.
document.querySelector("#j").style.top =
document.documentElement.clientHeight - 200 + "px";
// The element moves from outside the viewport to within the viewport, which
// should generate a shift.

Some files were not shown because too many files have changed in this diff Show more