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
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-default.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-composited-dynamic1.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-composited-dynamic2.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-composited.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,4 @@
|
|||
[image-orientation-from-image-computed-style.html]
|
||||
[image-orientation:from-image computed style reports correct values]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-content-images.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-dynamic1.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-dynamic2.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image-image-document.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-from-image.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,4 @@
|
|||
[image-orientation-none-computed-style.html]
|
||||
[image-orientation:none computed style reports correct values]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-none-content-images.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-none-image-document.html]
|
||||
expected: FAIL
|
|
@ -0,0 +1,2 @@
|
|||
[image-orientation-none.html]
|
||||
expected: FAIL
|
|
@ -9,6 +9,3 @@
|
|||
[throws if handleEvent is thruthy and not callable]
|
||||
expected: NOTRUN
|
||||
|
||||
[looks up handleEvent method on every event dispatch]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[elementFromPoint-001.html]
|
||||
[CSSOM View - 5 - extensions to the Document interface]
|
||||
expected: FAIL
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[remove-from-shadow-host-and-adopt-into-iframe.html]
|
||||
expected: TIMEOUT
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_1.html]
|
||||
[Multiple history traversals from the same task]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_3.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[cross-origin-due-to-document-domain-only.html]
|
||||
[Cross-origin due to document.domain]
|
||||
expected: FAIL
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[creating_browsing_context_test_01.html]
|
||||
[first argument: absolute url]
|
||||
expected: FAIL
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
[link-type-attribute.html]
|
||||
expected: FAIL
|
|
@ -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
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
[crossorigin-sandwich-TAO.sub.html]
|
||||
expected: ERROR
|
||||
[There should be one entry.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
[018.html]
|
||||
expected: TIMEOUT
|
||||
[origin of the script that invoked the method, javascript:]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[017.html]
|
||||
expected: TIMEOUT
|
||||
[origin of the script that invoked the method, about:blank]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -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
|
||||
|
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-6-ru.jpg"/>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-7-rl.jpg"/>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-8-llo.jpg"/>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-9-u.jpg"/>
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-6-ru.jpg"/>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-7-rl.jpg"/>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-8-llo.jpg"/>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-9-u.jpg"/>
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<br>
|
||||
<div class="container">
|
||||
<img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
|
||||
<br>Rotated 90° CCW and flipped vertically
|
||||
</div>
|
||||
<div class="container">
|
||||
<img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div class="container">
|
||||
<img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div class="container">
|
||||
<img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
|
||||
<br>Rotated 90° 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>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img id="img6" src="support/exif-orientation-6-ru.jpg"/>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img id="img7" src="support/exif-orientation-7-rl.jpg"/>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img id="img8" src="support/exif-orientation-8-llo.jpg"/>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img id="img9" src="support/exif-orientation-9-u.jpg"/>
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-6-ru.jpg"/>
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-7-rl.jpg"/>
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-8-llo.jpg"/>
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img src="support/exif-orientation-9-u.jpg"/>
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
@ -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>
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-9-u-pre-rotated.jpg">
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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°
|
||||
</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° 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° CW
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div>
|
||||
<br>Rotated 90° 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° CCW
|
||||
</div>
|
||||
<br>
|
||||
<div class="container">
|
||||
<img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img>
|
||||
<br>Rotated 90° 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° CW
|
||||
</div>
|
||||
<div class="container">
|
||||
<img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img>
|
||||
<br>Rotated 90° 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° 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>
|
|
@ -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>
|
||||
|
|
@ -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°
|
||||
</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° CCW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
|
||||
<br>Rotated 90° CW
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
|
||||
<br>Rotated 90° CW and flipped vertically
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
|
||||
<br>Rotated 90° CCW
|
||||
</div>
|
||||
<div>
|
||||
<img src="../support/exif-orientation-9-u-pre-rotated.jpg">
|
||||
<br>Undefined (invalid value)
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
@ -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>
|
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.3 KiB |
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,4 @@
|
|||
<!doctype html>
|
||||
<title>DOM Test Reference</title>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<div>PASS</div>
|
|
@ -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>
|
|
@ -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");
|
|
@ -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: ␀␍␊␍␊
|
||||
```
|
|
@ -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>"
|
|
@ -0,0 +1,4 @@
|
|||
def main(request, response):
|
||||
response.headers.set("Content-Type", "text/javascript")
|
||||
response.headers.set("Custom", "\0")
|
||||
return "var thisIsJavaScript = 0"
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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.'},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|