mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +01:00
Update web-platform-tests to revision a3a4442b04c37155f81c4ad4ae9c06339f76ce14
This commit is contained in:
WPT Sync Bot
parent
7b653cad7b
commit
ba0f5f096a
204 changed files with 4645 additions and 1001 deletions
|
|
@ -1,5 +1,8 @@
|
|||
[canvas-colorManaged-convertToBlob-roundtrip.html]
|
||||
expected: ERROR
|
||||
expected: TIMEOUT
|
||||
[Test canvas convertToBlob(): mimeType: image/png, blobPixelFormat: uint8, source color space: srgb, pixel format: uint8, alpha: 0.5]
|
||||
expected: NOTRUN
|
||||
|
||||
[Overall test]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
[canvas-colorManaged-toBlob-toDataURL.html]
|
||||
expected: ERROR
|
||||
expected: TIMEOUT
|
||||
[Test if toBlob() respects legacy behavior in color managed canvas: ImageFormat: image/jpeg, source color space: srgb, pixel format: uint8, alpha: 0.5]
|
||||
expected: NOTRUN
|
||||
|
||||
[Overall test]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,122 +1,121 @@
|
|||
[canvas-draw-high-bit-depth-images.html]
|
||||
expected: ERROR
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_Rec2020_opaque.png vs 2x2_16bit_Rec2020_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_ProPhoto_opaque.png vs 2x2_16bit_interlaced_ProPhoto_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_sRGB_opaque.png vs 2x2_16bit_sRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_DisplayP3_opaque.png vs 2x2_16bit_DisplayP3_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_sRGB_transparent.png vs 2x2_16bit_sRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_DisplayP3_transparent.png vs 2x2_16bit_interlaced_DisplayP3_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_ProPhoto_opaque.png vs 2x2_16bit_ProPhoto_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_ProPhoto_transparent.png vs 2x2_16bit_interlaced_ProPhoto_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_AdobeRGB_transparent.png vs 2x2_16bit_interlaced_AdobeRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_DisplayP3_transparent.png vs 2x2_16bit_DisplayP3_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_DisplayP3_opaque.png vs 2x2_16bit_interlaced_DisplayP3_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_ProPhoto_opaque.png vs 2x2_16bit_ProPhoto_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_Rec2020_transparent.png vs 2x2_16bit_Rec2020_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_AdobeRGB_opaque.png vs 2x2_16bit_AdobeRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_AdobeRGB_opaque.png vs 2x2_16bit_interlaced_AdobeRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_ProPhoto_transparent.png vs 2x2_16bit_interlaced_ProPhoto_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_Rec2020_transparent.png vs 2x2_16bit_interlaced_Rec2020_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_ProPhoto_transparent.png vs 2x2_16bit_ProPhoto_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_AdobeRGB_transparent.png vs 2x2_16bit_AdobeRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_AdobeRGB_transparent.png vs 2x2_16bit_interlaced_AdobeRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_sRGB_opaque.png vs 2x2_16bit_interlaced_sRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_DisplayP3_transparent.png vs 2x2_16bit_interlaced_DisplayP3_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_sRGB_opaque.png vs 2x2_16bit_sRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_AdobeRGB_opaque.png vs 2x2_16bit_interlaced_AdobeRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_AdobeRGB_transparent.png vs 2x2_16bit_AdobeRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_Rec2020_opaque.png vs 2x2_16bit_interlaced_Rec2020_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_Rec2020_opaque.png vs 2x2_16bit_interlaced_Rec2020_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_DisplayP3_opaque.png vs 2x2_16bit_interlaced_DisplayP3_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_Rec2020_transparent.png vs 2x2_16bit_interlaced_Rec2020_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_ProPhoto_transparent.png vs 2x2_16bit_ProPhoto_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_DisplayP3_opaque.png vs 2x2_16bit_DisplayP3_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_Rec2020_transparent.png vs 2x2_16bit_Rec2020_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_DisplayP3_transparent.png vs 2x2_16bit_DisplayP3_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_sRGB_transparent.png vs 2x2_16bit_sRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_sRGB_transparent.png vs 2x2_16bit_interlaced_sRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_AdobeRGB_opaque.png vs 2x2_16bit_AdobeRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_Rec2020_opaque.png vs 2x2_16bit_Rec2020_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_ProPhoto_opaque.png vs 2x2_16bit_interlaced_ProPhoto_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, uint8. Testing 2x2_8bit_sRGB_transparent.png vs 2x2_16bit_interlaced_sRGB_transparent.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
[Canvas color params: srgb, float16. Testing 2x2_8bit_sRGB_opaque.png vs 2x2_16bit_interlaced_sRGB_opaque.png]
|
||||
expected: TIMEOUT
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,3 @@
|
|||
[Revoke blob URL after creating Request, will fetch]
|
||||
expected: FAIL
|
||||
|
||||
[Revoke blob URL after calling fetch, fetch should succeed]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,4 @@
|
|||
[relpos-percentage-left-in-scrollable-2.html]
|
||||
[relpos-percentage-left-in-scrollable-2]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[mix-blend-mode-animation.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[variable-opsz.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[perspective-interpolation.html]
|
||||
expected: CRASH
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[perspective-origin-interpolation.html]
|
||||
[perspective-origin interpolation]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[elementsFromPoint-iframes.html]
|
||||
expected: TIMEOUT
|
||||
expected: CRASH
|
||||
[elementsFromPoint on the root document for points in iframe elements]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[contenttype_txt.html]
|
||||
expected: CRASH
|
||||
|
|
@ -312,12 +312,21 @@
|
|||
[<iframe>: separate response Content-Type: */* text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: */* text/html]
|
||||
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||
[<iframe>: separate response Content-Type: text/html */*]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -59,3 +59,6 @@
|
|||
[separate text/javascript x/x]
|
||||
expected: FAIL
|
||||
|
||||
[separate text/javascript;charset=windows-1252 text/javascript]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,6 @@
|
|||
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||
expected: FAIL
|
||||
|
||||
[X-Content-Type-Options%3A%20%2Cnosniff]
|
||||
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_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
[creating_browsing_context_test_01.html]
|
||||
expected: TIMEOUT
|
||||
[first argument: absolute url]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -287,3 +287,48 @@
|
|||
[No newline on table-row itself ("<table><tr id=target><td>abc</td><td>def</td></tr><tr id=target><td>ghi</td><td>jkl</td></tr>")]
|
||||
expected: FAIL
|
||||
|
||||
[Soft breaks ignored in presence of word-break:break-word ("<div style='width:1px; word-break:break-word'>Hello Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Element boundaries ignored for soft break handling (2) ("<div style='width:1px; word-break:break-word'><x>Hello</x><x> Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Whitespace collapses across element boundaries at soft break (1) ("<div style='width:1px; word-break:break-word'><x>Hello</x> <x> Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[<br> returned as newline, adjacent spaces collapsed across element boundaries ("<div style='width:1px; word-break:break-word'><x>Hello </x> <br> <x> Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Whitespace collapses across element boundaries at soft break (2) ("<div style='width:1px; word-break:break-word'><x>Hello </x> <x>Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Whitespace collapses across element boundaries at soft break (4) ("<div style='width:1px; word-break:break-word'><x>Hello </x> <x> Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Element boundaries ignored for soft break handling (1) ("<div style='width:1px; word-break:break-word'><x>Hello</x> <x>Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Soft breaks ignored, text-transform applied ("<div style='width:1px; word-break:break-word; text-transform:uppercase'>Hello Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Element boundaries ignored for soft break handling (4) ("<div style='width:1px; word-break:break-word'><x>Hello</x> Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[<br> returned as newline, following space collapsed ("<div style='width:1px; word-break:break-word'>Hello<br> Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[<br> returned as newline, preceding space collapsed ("<div style='width:1px; word-break:break-word'>Hello <br>Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Element boundaries ignored for soft break handling (3) ("<div style='width:1px; word-break:break-word'><x>Hello </x><x>Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Element boundaries ignored for soft break handling (5) ("<div style='width:1px; word-break:break-word'><x>Hello </x>Kitty</div>")]
|
||||
expected: FAIL
|
||||
|
||||
[Soft line break at hyphen ignored ("<div style='width:0'>abc-def")]
|
||||
expected: FAIL
|
||||
|
||||
[Whitespace collapses across element boundaries at soft break (3) ("<div style='width:1px; word-break:break-word'><x>Hello </x><x> Kitty</x></div>")]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
[skip-not-fully-active.html]
|
||||
expected: TIMEOUT
|
||||
[Autofocus element in not-fully-active document should be skipped while flusing.]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
[toggleEvent.html]
|
||||
[Calling open twice on 'details' fires only one toggle event]
|
||||
expected: FAIL
|
||||
|
||||
[Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[DOMContentLoaded-defer.html]
|
||||
[The end: DOMContentLoaded and defer scripts]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[ignore-opens-during-unload.window.html]
|
||||
expected: TIMEOUT
|
||||
expected: CRASH
|
||||
[ignore-opens-during-unload]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
[realtimeanalyser-fft-scaling.html]
|
||||
expected: TIMEOUT
|
||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -77,3 +77,9 @@
|
|||
[X SNR (19.51637874776216 dB) is not greater than or equal to 65.737. Got 19.51637874776216.]
|
||||
expected: FAIL
|
||||
|
||||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[30\]\t1.9724091887474060e-1\t9.5236867666244507e-1\t7.5512775778770447e-1\t7.9289436569253091e-1\t3.8985999999999999e-3\n\t[60\]\t-2.2450675070285797e-1\t-5.8084785938262939e-1\t3.5634110867977142e-1\t6.1348441407448528e-1\t3.8985999999999999e-3\n\t[90\]\t-3.7808802723884583e-1\t-5.9811043739318848e-1\t2.2002241015434265e-1\t3.6786251568070089e-1\t3.8985999999999999e-3\n\t[120\]\t7.6881676912307739e-1\t9.4563448429107666e-1\t1.7681771516799927e-1\t1.8698315057805445e-1\t3.8985999999999999e-3\n\t[151\]\t5.4644601186737418e-4\t-4.1306272149085999e-2\t4.1852718160953373e-2\t1.0132291292202573e+0\t3.8985999999999999e-3\n\t...and 1419 more errors.\n\tMax AbsError of 9.8091912823780147e+17 at index of 39268.\n\t[39268\]\t-9.8091912823780147e+17\t-9.6925276517868042e-1\t9.8091912823780147e+17\t1.0120364506331538e+18\t3.8985999999999999e-3\n\tMax RelError of 1.0120364506331538e+18 at index of 39268.\n\t[39268\]\t-9.8091912823780147e+17\t-9.6925276517868042e-1\t9.8091912823780147e+17\t1.0120364506331538e+18\t3.8985999999999999e-3\n]
|
||||
expected: FAIL
|
||||
|
||||
[X SNR (-316.5326738819981 dB) is not greater than or equal to 65.737. Got -316.5326738819981.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[xrBoundedReferenceSpace_updates.https.html]
|
||||
expected: ERROR
|
||||
expected: TIMEOUT
|
||||
['XRBoundedReferenceSpace updates properly when the changes are applied]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[Worker-constructor.html]
|
||||
expected: ERROR
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[transition_calc_implicit.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -144,6 +144,8 @@ function runAllTests() {
|
|||
runConvertToBlobTest(testScenarioSet[i]);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
runAllTests();
|
||||
}, "Overall test");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -140,6 +140,8 @@ function runAllTests() {
|
|||
runToDataURLTest(testScenarioSet[i]);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
runAllTests();
|
||||
}, "Overall test");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function runTest(testScenario) {
|
|||
var _16bitImage = new Image();
|
||||
var t_image = async_test(testScenarioToString(testScenario));
|
||||
_8bitImage.onload = t_image.step_func(function() {
|
||||
_16bitImage.onload = function() {
|
||||
_16bitImage.onload = t_image.step_func(function() {
|
||||
var refCanvas = document.createElement("canvas");
|
||||
refCanvas.width = refCanvas.height = 2;
|
||||
var refCtx = refCanvas.getContext(
|
||||
|
|
@ -41,7 +41,7 @@ function runTest(testScenario) {
|
|||
assert_array_approx_equals(refPixels, testPixels, tolerance);
|
||||
|
||||
t_image.done();
|
||||
};
|
||||
});
|
||||
_16bitImage.src = _16bitImageSrc;
|
||||
});
|
||||
_8bitImage.src = _8bitImageSrc;
|
||||
|
|
@ -104,6 +104,8 @@ function testScenarioToString(testScenario) {
|
|||
return str;
|
||||
}
|
||||
|
||||
test(function() {
|
||||
runAllTests();
|
||||
}, "Overall test");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/accelerometer/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<script src="/generic-sensor/resources/generic-sensor-helpers.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-iframe-tests.sub.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-feature-policy-test.sub.js"></script>
|
||||
<div id="log"></div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,40 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/accelerometer/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/resources/generic-sensor-helpers.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
runGenericSensorTests('Accelerometer');
|
||||
runGenericSensorTests('GravitySensor');
|
||||
runGenericSensorTests('LinearAccelerationSensor');
|
||||
'use strict';
|
||||
|
||||
const kReadings = {
|
||||
readings: [
|
||||
[1.12345, 2.12345, 3.12345]
|
||||
],
|
||||
expectedReadings: [
|
||||
[1.12345, 2.12345, 3.12345]
|
||||
],
|
||||
expectedRemappedReadings: [
|
||||
[-2.12345, 1.12345, 3.12345]
|
||||
]
|
||||
};
|
||||
|
||||
runGenericSensorTests(
|
||||
'Accelerometer',
|
||||
kReadings,
|
||||
verifyXyzSensorReading,
|
||||
['accelerometer']);
|
||||
|
||||
runGenericSensorTests(
|
||||
'GravitySensor',
|
||||
kReadings,
|
||||
verifyXyzSensorReading,
|
||||
['accelerometer']);
|
||||
|
||||
runGenericSensorTests(
|
||||
'LinearAccelerationSensor',
|
||||
kReadings,
|
||||
verifyXyzSensorReading,
|
||||
['accelerometer']);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Accelerometer Test: onerror</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/accelerometer/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<div id="log"></div>
|
||||
<h2>Precondition</h2>
|
||||
<ol>
|
||||
<li>
|
||||
Disable the Accelerometer Sensor or run test on a device without Accelerometer Sensor.
|
||||
</li>
|
||||
</ol>
|
||||
<script>
|
||||
|
||||
runGenericSensorOnerror('Accelerometer');
|
||||
runGenericSensorOnerror('GravitySensor');
|
||||
runGenericSensorOnerror('LinearAccelerationSensor');
|
||||
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="help" href="https://w3c.github.io/ambient-light/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<script src="/generic-sensor/resources/generic-sensor-helpers.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-iframe-tests.sub.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-feature-policy-test.sub.js"></script>
|
||||
<div id="log"></div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,25 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/ambient-light/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/resources/generic-sensor-helpers.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
runGenericSensorTests('AmbientLightSensor');
|
||||
'use strict';
|
||||
|
||||
const kReadings = {
|
||||
readings: [
|
||||
[3.1415]
|
||||
],
|
||||
expectedReadings: [
|
||||
[3.1415]
|
||||
]
|
||||
};
|
||||
|
||||
runGenericSensorTests(
|
||||
'AmbientLightSensor',
|
||||
kReadings,
|
||||
verifyAlsSensorReading,
|
||||
['ambient-light-sensor']);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>AmbientLightSensor Test: onerror</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/ambient-light/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/generic-sensor/generic-sensor-tests.js"></script>
|
||||
<div id="log"></div>
|
||||
<h2>Precondition</h2>
|
||||
<ol>
|
||||
<li>
|
||||
Disable the Ambient Light Sensor or run test on a device without Amibent Light Sensor.
|
||||
</li>
|
||||
</ol>
|
||||
<script>
|
||||
|
||||
runGenericSensorOnerror('AmbientLightSensor');
|
||||
|
||||
</script>
|
||||
|
|
@ -31,7 +31,7 @@ def main():
|
|||
if data != generated_test.data:
|
||||
logging.error('%s does not match template', generated_test.path)
|
||||
return -1
|
||||
except IOError, e:
|
||||
except IOError as e:
|
||||
if e.errno == 2:
|
||||
logging.error('Missing generated test:\n%s\nFor template:\n%s',
|
||||
generated_test.path,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ def main(request, response):
|
|||
|
||||
second_level_iframe_code = ""
|
||||
if "include_second_level_iframe" in request.GET:
|
||||
if "second_level_iframe_csp" in request.GET and request.GET["second_level_iframe_csp"] <> "":
|
||||
if "second_level_iframe_csp" in request.GET and request.GET["second_level_iframe_csp"] != "":
|
||||
second_level_iframe_code = '''<script>
|
||||
var i2 = document.createElement('iframe');
|
||||
i2.src = 'echo-required-csp.py';
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ window.SameSiteStatus = {
|
|||
const wait_for_message = (type, origin) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.addEventListener('message', e => {
|
||||
if (e.origin != origin) {
|
||||
if (origin && e.origin != origin) {
|
||||
reject("Message from unexpected origin in wait_for_message:" + e.origin);
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,14 @@ def main(request, response):
|
|||
<!DOCTYPE html>
|
||||
<script>
|
||||
var data = %s;
|
||||
data.type = "COOKIES";
|
||||
|
||||
if (window.parent != window)
|
||||
if (window.parent != window) {
|
||||
window.parent.postMessage(data, "*");
|
||||
if (window.top != window.parent)
|
||||
window.top.postMessage(data, "*");
|
||||
}
|
||||
|
||||
|
||||
if (window.opener)
|
||||
window.opener.postMessage(data, "*");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
</head>
|
||||
<body onload="doTests()">
|
||||
<iframe src="about:blank" id="if">
|
||||
</iframe>
|
||||
<script>
|
||||
function doTests() {
|
||||
promise_test(async function(t) {
|
||||
var child = document.getElementById("if");
|
||||
var grandKid = child.contentDocument.createElement("iframe");
|
||||
child.contentDocument.body.appendChild(grandKid);
|
||||
var value = "" + Math.random();
|
||||
await resetSameSiteCookies(SECURE_ORIGIN, value);
|
||||
|
||||
// Using postToParent.py here to see cookies used when navigating the page.
|
||||
grandKid.src = SECURE_ORIGIN + "/cookies/resources/postToParent.py"
|
||||
var e = await wait_for_message("COOKIES", SECURE_ORIGIN);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_unspecified", value, true);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_lax", value, true);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_strict", value, true);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_none", value, true);
|
||||
}, "SameSite cookies with intervening about:blank iframes and navigation");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<iframe src="/cookies/resources/postToParent.py">
|
||||
</iframe>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
<script>
|
||||
function reportSubresourceCookies() {
|
||||
credFetch(SECURE_ORIGIN + "/cookies/resources/list.py")
|
||||
.then(r => r.json())
|
||||
.then(cookies => { cookies.type = "COOKIES";
|
||||
window.parent.postMessage(cookies, "*");});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="reportSubresourceCookies()">
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
</head>
|
||||
<body onload="doTests()">
|
||||
<iframe id="if" sandbox="allow-scripts">
|
||||
</iframe>
|
||||
<script>
|
||||
function doTests() {
|
||||
promise_test(async function(t) {
|
||||
var value = "" + Math.random();
|
||||
await resetSameSiteCookies(SECURE_ORIGIN, value);
|
||||
var child = document.getElementById("if");
|
||||
child.src = SECURE_ORIGIN + "/cookies/samesite/resources/iframe-navigate-report.html";
|
||||
|
||||
// the iframe nested inside if should post COOKIES to here.
|
||||
var e = await wait_for_message("COOKIES");
|
||||
// Not testing unspecified here as to not depend on the presence or
|
||||
// absence of upcoming change of behavior.
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_lax", value, false);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_strict", value, false);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_none", value, true);
|
||||
}, "SameSite cookies with intervening sandboxed iframe and navigation");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/cookies/resources/cookie-helper.sub.js"></script>
|
||||
</head>
|
||||
<body onload="doTests()">
|
||||
<iframe id="if" sandbox="allow-scripts">
|
||||
</iframe>
|
||||
<script>
|
||||
function doTests() {
|
||||
promise_test(async function(t) {
|
||||
var value = "" + Math.random();
|
||||
await resetSameSiteCookies(SECURE_ORIGIN, value);
|
||||
var child = document.getElementById("if");
|
||||
child.src = SECURE_ORIGIN + "/cookies/samesite/resources/iframe-subresource-report.html";
|
||||
|
||||
// the iframe nested inside if should post COOKIES to here.
|
||||
var e = await wait_for_message("COOKIES");
|
||||
// Not testing unspecified here as to not depend on the presence or
|
||||
// absence of upcoming change of behavior.
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_lax", value, false);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_strict", value, false);
|
||||
assert_cookie(SECURE_ORIGIN, e.data, "samesite_none", value, true);
|
||||
}, "SameSite cookies with intervening sandboxed iframe and subresources");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-left">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1002485">
|
||||
<p>There should be no red, and no scrollbar.</p>
|
||||
<div id="container" style="overflow:auto; width:500px; background:red;">
|
||||
<div style="padding-right:90%; background:yellow;">
|
||||
<div style="position:relative; left:900%; background:cyan;">
|
||||
<div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
container.scrollLeft = 123456;
|
||||
test(()=> {
|
||||
assert_equals(container.scrollLeft, 0);
|
||||
}, "Left percentage resolved correctly for overflow contribution");
|
||||
</script>
|
||||
|
|
@ -125,7 +125,7 @@ def makeLookup1():
|
|||
if table.format == 4:
|
||||
table.cmap[cp] = glyphName
|
||||
else:
|
||||
raise NotImplementedError, "Unsupported cmap table format: %d" % table.format
|
||||
raise NotImplementedError("Unsupported cmap table format: %d" % table.format)
|
||||
cp += 1
|
||||
|
||||
# tag.fail
|
||||
|
|
@ -146,7 +146,7 @@ def makeLookup1():
|
|||
if table.format == 4:
|
||||
table.cmap[cp] = glyphName
|
||||
else:
|
||||
raise NotImplementedError, "Unsupported cmap table format: %d" % table.format
|
||||
raise NotImplementedError("Unsupported cmap table format: %d" % table.format)
|
||||
|
||||
# bump this up so that the sequence is the same as the lookup 3 font
|
||||
cp += 3
|
||||
|
|
@ -327,7 +327,7 @@ def makeLookup3():
|
|||
if table.format == 4:
|
||||
table.cmap[cp] = glyphName
|
||||
else:
|
||||
raise NotImplementedError, "Unsupported cmap table format: %d" % table.format
|
||||
raise NotImplementedError("Unsupported cmap table format: %d" % table.format)
|
||||
cp += 1
|
||||
|
||||
# tag.alt1,2,3
|
||||
|
|
@ -348,7 +348,7 @@ def makeLookup3():
|
|||
if table.format == 4:
|
||||
table.cmap[cp] = glyphName
|
||||
else:
|
||||
raise NotImplementedError, "Unsupported cmap table format: %d" % table.format
|
||||
raise NotImplementedError("Unsupported cmap table format: %d" % table.format)
|
||||
cp += 1
|
||||
|
||||
# set the glyph order
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: variabletest_box;
|
||||
src: url(resources/variabletest_box.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: variabletest_box, sans-serif;
|
||||
font-optical-sizing: none;
|
||||
}
|
||||
</style>
|
||||
<div style="font-size: 6px; font-variation-settings: 'opsz' 6;">B</div>
|
||||
<div style="font-size: 12px; font-variation-settings: 'opsz' 12;">B</div>
|
||||
<div style="font-size: 24px; font-variation-settings: 'opsz' 24;">B</div>
|
||||
<div style="font-size: 48px; font-variation-settings: 'opsz' 48;">B</div>
|
||||
<div style="font-size: 64px; font-variation-settings: 'opsz' 64;">B</div>
|
||||
<div style="font-size: 128px; font-variation-settings: 'opsz' 128;">B</div>
|
||||
<div style="font-size: 24px; font-variation-settings: 'opsz' 128;">B</div>
|
||||
<div style="font-size: 48px; font-variation-settings: 'opsz' 12;">B</div>
|
||||
<script>
|
||||
document.fonts.ready.then(
|
||||
() => { document.documentElement.classList.remove("reftest-wait"); });
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="author" title="Dominik Röttsches" href="drott@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-optical-sizing-def"/>
|
||||
<meta name="assert" content="Ensures that optical size is automatically applied."/>
|
||||
<link rel="match" href="variable-opsz-ref.html">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: variabletest_box;
|
||||
src: url(resources/variabletest_box.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: variabletest_box, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<!-- The variabletest_box font file contains a glyph for letter B which moves a
|
||||
horizontal bar up from the middle for opsz > 12 and moves it down for opsz >
|
||||
12 where the opsz axis ranges from 12 to 128. -->
|
||||
<div style="font-size: 6px;">B</div>
|
||||
<div style="font-size: 12px;">B</div>
|
||||
<div style="font-size: 24px;">B</div>
|
||||
<div style="font-size: 48px;">B</div>
|
||||
<div style="font-size: 64px;">B</div>
|
||||
<div style="font-size: 128px;">B</div>
|
||||
<!-- Explicit value overrides auto. -->
|
||||
<div style="font-size: 24px; font-variation-settings: 'opsz' 128;">B</div>
|
||||
<div style="font-size: 48px; font-optical-sizing: none;">B</div>
|
||||
<script>
|
||||
document.fonts.ready.then(
|
||||
() => { document.documentElement.classList.remove("reftest-wait"); });
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -65,4 +65,16 @@ test_interpolation({
|
|||
{at: 1, expect: '1'},
|
||||
{at: 1.5, expect: '1'}
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'column-count',
|
||||
from: 'initial',
|
||||
to: '5',
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'column-count',
|
||||
from: 'unset',
|
||||
to: '5',
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -74,4 +74,32 @@ test_interpolation({
|
|||
{at: 1, expect: 'rgb(170, 70, 70)'},
|
||||
{at: 1.5, expect: 'rgb(220, 20, 70)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'column-rule-color',
|
||||
from: 'unset',
|
||||
to: 'rgb(0, 255, 0)',
|
||||
}, [
|
||||
{at: -5, expect: 'rgb(255, 0, 255)'},
|
||||
{at: -0.4, expect: 'rgb(98, 136, 98)'},
|
||||
{at: 0, expect: 'rgb(70, 170, 70)'},
|
||||
{at: 0.2, expect: 'rgb(56, 187, 56)'},
|
||||
{at: 0.6, expect: 'rgb(28, 221, 28)'},
|
||||
{at: 1, expect: 'rgb(0, 255, 0)'},
|
||||
{at: 1.5, expect: 'rgb(0, 255, 0)'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'column-rule-color',
|
||||
from: 'orange',
|
||||
to: 'blue'
|
||||
}, [
|
||||
{at: -5, expect: '#ffff00'},
|
||||
{at: -0.4, expect: '#ffe700'},
|
||||
{at: 0, expect: 'orange'},
|
||||
{at: 0.2, expect: '#cc8433'},
|
||||
{at: 0.6, expect: '#664299'},
|
||||
{at: 1, expect: 'blue'},
|
||||
{at: 1.5, expect: 'blue'}
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: table-row-group border/padding/margin has no effect in border-collapse:separate tables</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.ltr { direction:ltr; }
|
||||
.rtl { direction:rtl; }
|
||||
table, td {
|
||||
border: 3px solid;
|
||||
}
|
||||
.bc table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.inherited td {
|
||||
border: 3px dashed;
|
||||
padding: 5px;
|
||||
margin: 7px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<div class="bc">
|
||||
<table class="rtl"><tbody><tr style="border: 20px solid"><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="ltr"><tbody><tr style="border: 20px solid"><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Table test: table-row-group border/padding/margin has no effect in border-collapse:separate tables</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#separated-borders">
|
||||
<link rel="match" href="row-group-margin-border-padding-ref.html">
|
||||
<style>
|
||||
.ltr { direction:ltr; }
|
||||
.rtl { direction:rtl; }
|
||||
table, td {
|
||||
border: 3px solid;
|
||||
}
|
||||
.bc table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tbody.inherited {
|
||||
border: 3px dashed;
|
||||
padding: 5px;
|
||||
margin: 7px;
|
||||
}
|
||||
.inherited * {
|
||||
border:inherit;
|
||||
padding:inherit;
|
||||
margin:inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="ltr"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="rtl"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<!-- ditto with border-collapse:collapse -->
|
||||
<div class="bc">
|
||||
<table class="ltr"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="ltr"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="rtl"><tbody style="border: 20px solid"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody style="padding: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody style="margin: 20px"><tr><td></td><td></td></tr></tbody></table>
|
||||
|
||||
<table class="ltr"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
<table class="rtl"><tbody class="inherited"><tr><td></td><td></td></tr></tbody></table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference: table-row border/padding/margin has no effect in border-collapse:separate tables</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.ltr { direction:ltr; }
|
||||
.rtl { direction:rtl; }
|
||||
table, td {
|
||||
border: 3px solid;
|
||||
}
|
||||
.bc table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.inherited > td {
|
||||
border: 3px dashed;
|
||||
padding: 5px;
|
||||
margin: 7px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="ltr"><tr><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr><td></td><td></td></tr></table>
|
||||
|
||||
<table class="rtl"><tr><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr><td></td><td></td></tr></table>
|
||||
|
||||
<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
|
||||
<div class="bc">
|
||||
<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr><td></td><td></td></tr></table>
|
||||
|
||||
<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr><td></td><td></td></tr></table>
|
||||
|
||||
<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Table test: table-row border/padding/margin has no effect in border-collapse:separate tables</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#separated-borders">
|
||||
<link rel="match" href="row-margin-border-padding-ref.html">
|
||||
<style>
|
||||
.ltr { direction:ltr; }
|
||||
.rtl { direction:rtl; }
|
||||
table, td {
|
||||
border: 3px solid;
|
||||
}
|
||||
.bc table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr.inherited {
|
||||
border: 3px dashed;
|
||||
padding: 5px;
|
||||
margin: 7px;
|
||||
}
|
||||
.inherited > td {
|
||||
border:inherit;
|
||||
padding:inherit;
|
||||
margin:inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr style="padding: 20px"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr style="margin: 20px"><td></td><td></td></tr></table>
|
||||
|
||||
<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr style="padding: 20px"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr style="margin: 20px"><td></td><td></td></tr></table>
|
||||
|
||||
<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
|
||||
<!-- ditto with border-collapse:collapse -->
|
||||
<div class="bc">
|
||||
<table class="ltr"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr style="padding: 20px"><td></td><td></td></tr></table>
|
||||
<table class="ltr"><tr style="margin: 20px"><td></td><td></td></tr></table>
|
||||
|
||||
<table class="rtl"><tr style="border: 20px solid"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr style="padding: 20px"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr style="margin: 20px"><td></td><td></td></tr></table>
|
||||
|
||||
<table class="ltr"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
<table class="rtl"><tr class="inherited"><td></td><td></td></tr></table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-auto</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#italic-mappings">
|
||||
<link rel="match" href="text-transform-math-auto-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-auto' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-bold</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#bold-mappings">
|
||||
<link rel="match" href="text-transform-math-bold-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-bold' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-bold-fraktur</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#bold-fraktur-mappings">
|
||||
<link rel="match" href="text-transform-math-bold-fraktur-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-bold-fraktur' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-bold-italic</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#bold-italic-mappings">
|
||||
<link rel="match" href="text-transform-math-bold-italic-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-bold-italic' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-bold-sans-serif</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#bold-sans-serif-mappings">
|
||||
<link rel="match" href="text-transform-math-bold-sans-serif-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-bold-sans-serif' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-bold-script</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#bold-script-mappings">
|
||||
<link rel="match" href="text-transform-math-bold-script-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-bold-script' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-double-struck</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#double-struck-mappings">
|
||||
<link rel="match" href="text-transform-math-double-struck-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-double-struck' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-fraktur</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fraktur-mappings">
|
||||
<link rel="match" href="text-transform-math-fraktur-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-fraktur' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-initial</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#initial-mappings">
|
||||
<link rel="match" href="text-transform-math-initial-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-initial' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-italic</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#italic-mappings">
|
||||
<link rel="match" href="text-transform-math-italic-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-italic' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-looped</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#looped-mappings">
|
||||
<link rel="match" href="text-transform-math-looped-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-looped' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-monospace</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#monospace-mappings">
|
||||
<link rel="match" href="text-transform-math-monospace-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-monospace' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-sans-serif</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#sans-serif-mappings">
|
||||
<link rel="match" href="text-transform-math-sans-serif-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-sans-serif' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-sans-serif-bold-italic</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#sans-serif-bold-italic-mappings">
|
||||
<link rel="match" href="text-transform-math-sans-serif-bold-italic-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-sans-serif-bold-italic' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-sans-serif-italic</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#sans-serif-italic-mappings">
|
||||
<link rel="match" href="text-transform-math-sans-serif-italic-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-sans-serif-italic' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-script</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#script-mappings">
|
||||
<link rel="match" href="text-transform-math-script-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-script' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-stretched</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#stretched-mappings">
|
||||
<link rel="match" href="text-transform-math-stretched-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-stretched' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<title>text-transform math-tailed</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#tailed-mappings">
|
||||
<link rel="match" href="text-transform-math-tailed-001.tentative-ref.html"/>
|
||||
<meta name="assert" content="Verify that a character with 'text-transform: math-tailed' renders the same as the transformed unicode character.">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title> perspective interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
|
||||
<meta name="assert" content="perspective supports animation">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
perspective: 30px;
|
||||
}
|
||||
.target {
|
||||
perspective: 10px;
|
||||
}
|
||||
.transformed {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
transform: rotateY(45deg);
|
||||
}
|
||||
.expected .transformed {
|
||||
background: green;
|
||||
}
|
||||
.expected {
|
||||
position: relative;
|
||||
left: -50px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<template id="target-template">
|
||||
<div><div class="transformed"></div></div>
|
||||
</template>
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'perspective',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -20, expect: 'none'},
|
||||
{at: -1, expect: 'none'},
|
||||
{at: -0.3, expect: '7px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '13px'},
|
||||
{at: 0.6, expect: '16px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '25px'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'perspective',
|
||||
from: 'initial',
|
||||
to: '20px',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective',
|
||||
from: 'inherit',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -20, expect: '230px'},
|
||||
{at: -1, expect: '40px'},
|
||||
{at: -0.3, expect: '33px'},
|
||||
{at: 0, expect: '30px'},
|
||||
{at: 0.3, expect: '27px'},
|
||||
{at: 0.6, expect: '24px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '15px'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'perspective',
|
||||
from: 'unset',
|
||||
to: '20px',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective',
|
||||
from: '50px',
|
||||
to: '100px',
|
||||
}, [
|
||||
{at: -20, expect: 'none'}, // perspective does not accept 0 or negative values
|
||||
{at: -1, expect: 'none'}, // perspective does not accept 0 or negative values
|
||||
{at: -0.3, expect: '35px'},
|
||||
{at: 0, expect: '50px'},
|
||||
{at: 0.3, expect: '65px'},
|
||||
{at: 0.6, expect: '80px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.5, expect: '125px'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'perspective',
|
||||
from: '50px',
|
||||
to: 'none',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>perspective-origin interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
|
||||
<meta name="assert" content="perspective-origin supports animation">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
perspective-origin: 30px 10px;
|
||||
}
|
||||
.target {
|
||||
display: inline-block;
|
||||
perspective: 50;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 25px;
|
||||
perspective-origin: 10px 30px;
|
||||
}
|
||||
.transformed {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
transform: rotateY(45deg);
|
||||
}
|
||||
.expected .transformed {
|
||||
background: green;
|
||||
}
|
||||
.expected {
|
||||
position: relative;
|
||||
left: -50px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<template id="target-template">
|
||||
<div><div class="transformed"></div></div>
|
||||
</template>
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'perspective-origin',
|
||||
from: neutralKeyframe,
|
||||
to: '20px 20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '7px 33px'},
|
||||
{at: 0, expect: '10px 30px'},
|
||||
{at: 0.3, expect: '13px 27px'},
|
||||
{at: 0.6, expect: '16px 24px'},
|
||||
{at: 1, expect: '20px 20px'},
|
||||
{at: 1.5, expect: '25px 15px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective-origin',
|
||||
from: 'initial',
|
||||
to: '20px 20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '26.5px 26.5px'},
|
||||
{at: 0, expect: '25px 25px'},
|
||||
{at: 0.3, expect: '23.5px 23.5px'},
|
||||
{at: 0.6, expect: '22px 22px'},
|
||||
{at: 1, expect: '20px 20px'},
|
||||
{at: 1.5, expect: '17.5px 17.5px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective-origin',
|
||||
from: 'inherit',
|
||||
to: '20px 20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '33px 7px'},
|
||||
{at: 0, expect: '30px 10px'},
|
||||
{at: 0.3, expect: '27px 13px'},
|
||||
{at: 0.6, expect: '24px 16px'},
|
||||
{at: 1, expect: '20px 20px'},
|
||||
{at: 1.5, expect: '15px 25px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective-origin',
|
||||
from: 'unset',
|
||||
to: '20px 20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '26.5px 26.5px'},
|
||||
{at: 0, expect: '25px 25px'},
|
||||
{at: 0.3, expect: '23.5px 23.5px'},
|
||||
{at: 0.6, expect: '22px 22px'},
|
||||
{at: 1, expect: '20px 20px'},
|
||||
{at: 1.5, expect: '17.5px 17.5px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'perspective-origin',
|
||||
from: '0% 50%',
|
||||
to: '100% 150%'
|
||||
}, [
|
||||
{at: -0.3, expect: '-30% 20%'},
|
||||
{at: 0, expect: '0% 50%'},
|
||||
{at: 0.3, expect: '30% 80%'},
|
||||
{at: 0.6, expect: '60% 110%'},
|
||||
{at: 1, expect: '100% 150%'},
|
||||
{at: 1.5, expect: '150% 200%'}
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
transform: rotate(60deg) translate(20px);
|
||||
transform: rotate(45deg) translate(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-ref.html">
|
||||
<link rel="match" href="offset-path-ray-001-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#target {
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(150deg closest-side);
|
||||
offset-path: ray(135deg closest-side);
|
||||
offset-distance: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-001-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(135deg closest-side);
|
||||
offset-distance: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
transform: rotate(45deg) translate(100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-003-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(135deg closest-side);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-003-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(135deg farthest-side);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 120px;
|
||||
top: 160px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
transform: rotate(45deg) translate(200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-005-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 120px;
|
||||
top: 160px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(135deg closest-corner);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-005-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 120px;
|
||||
top: 160px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(135deg farthest-corner);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
transform: rotate(90deg) translate(200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-007-ref.html">
|
||||
<meta name="assert" content="This tests that ray() generates a rotation and translation.">
|
||||
<style>
|
||||
#container {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: ray(180deg sides);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 130%;
|
||||
top: 60%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-008-ref.html">
|
||||
<meta name="assert" content="The initial position is outside the containing block.">
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 140%;
|
||||
top: 70%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: lime;
|
||||
offset-path: ray(-90deg sides);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 130%;
|
||||
top: 60%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: lime;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-009-ref.html">
|
||||
<meta name="assert" content="The initial position is outside the containing block.">
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 140%;
|
||||
top: 70%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: lime;
|
||||
offset-path: ray(180deg closest-side);
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
transform: rotate(0deg) translate(50px, -150px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-contain-001-ref.html">
|
||||
<meta name="assert" content="This tests that the element should be contained in ray() path circle.">
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
offset-path: ray(45deg closest-corner contain);
|
||||
offset-rotate: 0deg;
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
/* The vertical movement is about sqrt(150^2 - 50^2) - 50 */
|
||||
transform: translateY(91.42px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-contain-002-ref.html">
|
||||
<meta name="assert" content="This tests that the element should be contained in ray() path circle.">
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
offset-path: ray(180deg closest-side contain);
|
||||
offset-rotate: 0deg;
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
/* The movement is about 150 - 50 * sqrt(2) */
|
||||
transform: rotate(-45deg) translate(79.29px) rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-ray-contain-003-ref.html">
|
||||
<meta name="assert" content="This tests that the element should be contained in ray() path circle.">
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
offset-path: ray(45deg closest-side contain);
|
||||
offset-rotate: 0deg;
|
||||
offset-distance: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Motion Path: ray paths with contain</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
/* The movement is about sqrt(150^2 - 50^2) - 50 */
|
||||
transform: rotate(-45deg) translate(91.42px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue