171111 2017-04-21 05:26:42 -0700 Web Inspector: source maps in <style> tags are not taken into account 2017-04-24 16:45:52 -0700 1 1 1 Unclassified WebKit Web Inspector WebKit Nightly Build All All NEW InRadar P2 Normal --- 1 m.goleb+bugzilla webkit-unassigned inspector-bugzilla-changes manian webkit-bug-importer oldest_to_newest 1299601 0 307722 m.goleb+bugzilla 2017-04-21 05:26:42 -0700 Created attachment 307722 Test using <link rel="stylesheet"> Safari (both stable, TP & WebKit Nightly) doesn't apply source maps when styles are loaded using inline <style> tags with a source map comment rather than via a <link rel=stylesheet> tag. I'm attaching 3 files - one using the link-based approach (via blob URLs), the other two using <style>s; one with a static HTML and the other one where the <style> tag is loaded dynamically. This simulates what Webpack's popular style-loader does. The link-based approach has drawbacks (e.g. it makes CSS get applied asynchronously which may influence page behavior) so the style-loader may turn into using <style> tags exclusively. The <style>-based approach works in Chrome & Firefox (with one caveat in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=714101). To reproduce: 1. Open the attached HTML files (maybe via a local static HTTP server) 2. Inspect "Test div" 3. Try to find information about the source map mapping. You'll find it only in the <link>-based file. 1299602 1 307723 m.goleb+bugzilla 2017-04-21 05:27:08 -0700 Created attachment 307723 Test using a static <style> tag 1299603 2 307724 m.goleb+bugzilla 2017-04-21 05:27:24 -0700 Created attachment 307724 Test using a <style> tag inserted dynamically 1300720 3 webkit-bug-importer 2017-04-24 16:45:52 -0700 <rdar://problem/31800458> 307722 2017-04-21 05:26:42 -0700 2017-04-21 05:26:42 -0700 Test using <link rel="stylesheet"> test-sourcemaps-link.html text/html 1627 m.goleb+bugzilla PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCTx0 aXRsZT5Tb3VyY2UgbWFwIHRlc3Q8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5PgoJPGRpdiBjbGFzcz0i dGVzdCI+VGVzdCBkaXY8L2Rpdj4KCTxzY3JpcHQ+CgkJZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5l cignRE9NQ29udGVudExvYWRlZCcsIGZ1bmN0aW9uICgpIHsKCQkJdmFyIGNzc1RleHQgPSAnYm9k eSAudGVzdCB7XG5cCiAgZm9udC1zaXplOiAxNHB4O1xuXAogIGxpbmUtaGVpZ2h0OiAyOHB4OyB9 XG5cClxuXApib2R5IC50ZXN0IHtcblwKICBjb2xvcjogZ3JlZW47IH1cblwKICBib2R5IC50ZXN0 OjphZnRlciB7XG5cCiAgICBjb250ZW50OiAiIjtcblwKICAgIGJhY2tncm91bmQtY29sb3I6IHdo aXRlOyB9XG5cClxuXApib2R5IC50ZXN0IHtcblwKICBwYWRkaW5nOiA1cHg7IH1cblwKXG5cCi8q IyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnph Vzl1SWpvekxDSnpiM1Z5WTJWeklqcGJJbUZ3Y0M1elkzTnpJbDBzSW01aGJXVnpJanBiWFN3aWJX RndjR2x1WjNNaU9pSkJRVXRCTzBWQlJWRXNaMEpCVEZFN1JVRk5VaXhyUWtGQk1rSXNSVUZET1VJ N08wRkJTa3c3UlVGTlVTeGhRVmhMTEVWQmFVSlNPMFZCV2t3N1NVRlRXU3haUVVGWE8wbEJRMWdz ZDBKQlpFTXNSVUZsU2pzN1FVRkpWRHRGUVVOSkxHRkJiRUpUTEVWQmJVSmFJaXdpWm1sc1pTSTZJ bUZ3Y0M1elkzTnpJaXdpYzI5MWNtTmxjME52Ym5SbGJuUWlPbHNpSkdOdmJHOXlPaUJuY21WbGJq dGNiaVJpWjJOdmJEb2dkMmhwZEdVN1hHNGtabTl1ZEMxemFYcGxPaUF4TkhCNE8xeHVKSEJoWkdS cGJtYzZJRFZ3ZUR0Y2JseHVZbTlrZVNCN1hHNGdJQ0FnTG5SbGMzUWdlMXh1SUNBZ0lDQWdJQ0Jt YjI1MExYTnBlbVU2SUNSbWIyNTBMWE5wZW1VN1hHNGdJQ0FnSUNBZ0lHeHBibVV0YUdWcFoyaDBP aUF5SUNvZ0pHWnZiblF0YzJsNlpUdGNiaUFnSUNCOVhHNGdJQ0FnTG5SbGMzUWdlMXh1SUNBZ0lD QWdJQ0JqYjJ4dmNqb2dKR052Ykc5eU8xeHVYRzRnSUNBZ0lDQWdJQ1k2T21GbWRHVnlJSHRjYmlB Z0lDQWdJQ0FnSUNBZ0lHTnZiblJsYm5RNklGd2lYQ0k3WEc0Z0lDQWdJQ0FnSUNBZ0lDQmlZV05y WjNKdmRXNWtMV052Ykc5eU9pQWtZbWRqYjJ3N1hHNGdJQ0FnSUNBZ0lIMWNiaUFnSUNCOVhHNTlY RzVjYm1KdlpIa2dMblJsYzNRZ2UxeHVJQ0FnSUhCaFpHUnBibWM2SUNSd1lXUmthVzVuTzF4dWZW eHVJbDBzSW5OdmRYSmpaVkp2YjNRaU9pSWlmUT09ICovJzsKCQkJdmFyIGxpbmtFbGVtZW50ID0g ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgibGluayIpOwoJCQlsaW5rRWxlbWVudC5zZXRBdHRyaWJ1 dGUoJ3R5cGUnLCAndGV4dC9jc3MnKTsKCQkJbGlua0VsZW1lbnQuc2V0QXR0cmlidXRlKCdyZWwn LCAnc3R5bGVzaGVldCcpOwoJCQl2YXIgYmxvYlVybCA9IFVSTC5jcmVhdGVPYmplY3RVUkwobmV3 IEJsb2IoW2Nzc1RleHRdLCB7dHlwZTogJ3RleHQvY3NzJ30pKQoJCQlkb2N1bWVudC5oZWFkLmFw cGVuZENoaWxkKGxpbmtFbGVtZW50KTsKCQkJbGlua0VsZW1lbnQuaHJlZiA9IGJsb2JVcmw7CgkJ fSk7Cgk8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg== 307723 2017-04-21 05:27:08 -0700 2017-04-21 05:27:08 -0700 Test using a static <style> tag test-sourcemaps-style-static.html text/html 1207 m.goleb+bugzilla PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCTx0 aXRsZT5Tb3VyY2UgbWFwIHRlc3Q8L3RpdGxlPgoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj5ib2R5 IC50ZXN0IHsKICBmb250LXNpemU6IDE0cHg7CiAgbGluZS1oZWlnaHQ6IDI4cHg7IH0KCmJvZHkg LnRlc3QgewogIGNvbG9yOiBncmVlbjsgfQogIGJvZHkgLnRlc3Q6OmFmdGVyIHsKICAgIGNvbnRl bnQ6ICIiOwogICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7IH0KCmJvZHkgLnRlc3QgewogIHBh ZGRpbmc6IDVweDsgfQoKLyojIHNvdXJjZU1hcHBpbmdVUkw9ZGF0YTphcHBsaWNhdGlvbi9qc29u O2Jhc2U2NCxleUoyWlhKemFXOXVJam96TENKemIzVnlZMlZ6SWpwYkltRndjQzV6WTNOeklsMHNJ bTVoYldWeklqcGJYU3dpYldGd2NHbHVaM01pT2lKQlFVdEJPMFZCUlZFc1owSkJURkU3UlVGTlVp eHJRa0ZCTWtJc1JVRkRPVUk3TzBGQlNrdzdSVUZOVVN4aFFWaExMRVZCYVVKU08wVkJXa3c3U1VG VFdTeFpRVUZYTzBsQlExZ3NkMEpCWkVNc1JVRmxTanM3UVVGSlZEdEZRVU5KTEdGQmJFSlRMRVZC YlVKYUlpd2labWxzWlNJNkltRndjQzV6WTNOeklpd2ljMjkxY21ObGMwTnZiblJsYm5RaU9sc2lK R052Ykc5eU9pQm5jbVZsYmp0Y2JpUmlaMk52YkRvZ2QyaHBkR1U3WEc0a1ptOXVkQzF6YVhwbE9p QXhOSEI0TzF4dUpIQmhaR1JwYm1jNklEVndlRHRjYmx4dVltOWtlU0I3WEc0Z0lDQWdMblJsYzNR Z2UxeHVJQ0FnSUNBZ0lDQm1iMjUwTFhOcGVtVTZJQ1JtYjI1MExYTnBlbVU3WEc0Z0lDQWdJQ0Fn SUd4cGJtVXRhR1ZwWjJoME9pQXlJQ29nSkdadmJuUXRjMmw2WlR0Y2JpQWdJQ0I5WEc0Z0lDQWdM blJsYzNRZ2UxeHVJQ0FnSUNBZ0lDQmpiMnh2Y2pvZ0pHTnZiRzl5TzF4dVhHNGdJQ0FnSUNBZ0lD WTZPbUZtZEdWeUlIdGNiaUFnSUNBZ0lDQWdJQ0FnSUdOdmJuUmxiblE2SUZ3aVhDSTdYRzRnSUNB Z0lDQWdJQ0FnSUNCaVlXTnJaM0p2ZFc1a0xXTnZiRzl5T2lBa1ltZGpiMnc3WEc0Z0lDQWdJQ0Fn SUgxY2JpQWdJQ0I5WEc1OVhHNWNibUp2WkhrZ0xuUmxjM1FnZTF4dUlDQWdJSEJoWkdScGJtYzZJ Q1J3WVdSa2FXNW5PMXh1ZlZ4dUlsMHNJbk52ZFhKalpWSnZiM1FpT2lJaWZRPT0gKi88L3N0eWxl Pgo8L2hlYWQ+Cjxib2R5PgoJPGRpdiBjbGFzcz0idGVzdCI+VGVzdCBkaXY8L2Rpdj4KPC9ib2R5 Pgo8L2h0bWw+Cg== 307724 2017-04-21 05:27:24 -0700 2017-04-21 05:27:24 -0700 Test using a <style> tag inserted dynamically test-sourcemaps-style.html text/html 1535 m.goleb+bugzilla PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCTx0 aXRsZT5Tb3VyY2UgbWFwIHRlc3Q8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5PgoJPGRpdiBjbGFzcz0i dGVzdCI+VGVzdCBkaXY8L2Rpdj4KCTxzY3JpcHQ+CgkJZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5l cignRE9NQ29udGVudExvYWRlZCcsIGZ1bmN0aW9uICgpIHsKCQkJdmFyIGNzc1RleHQgPSAnYm9k eSAudGVzdCB7XG5cCiAgZm9udC1zaXplOiAxNHB4O1xuXAogIGxpbmUtaGVpZ2h0OiAyOHB4OyB9 XG5cClxuXApib2R5IC50ZXN0IHtcblwKICBjb2xvcjogZ3JlZW47IH1cblwKICBib2R5IC50ZXN0 OjphZnRlciB7XG5cCiAgICBjb250ZW50OiAiIjtcblwKICAgIGJhY2tncm91bmQtY29sb3I6IHdo aXRlOyB9XG5cClxuXApib2R5IC50ZXN0IHtcblwKICBwYWRkaW5nOiA1cHg7IH1cblwKXG5cCi8q IyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnph Vzl1SWpvekxDSnpiM1Z5WTJWeklqcGJJbUZ3Y0M1elkzTnpJbDBzSW01aGJXVnpJanBiWFN3aWJX RndjR2x1WjNNaU9pSkJRVXRCTzBWQlJWRXNaMEpCVEZFN1JVRk5VaXhyUWtGQk1rSXNSVUZET1VJ N08wRkJTa3c3UlVGTlVTeGhRVmhMTEVWQmFVSlNPMFZCV2t3N1NVRlRXU3haUVVGWE8wbEJRMWdz ZDBKQlpFTXNSVUZsU2pzN1FVRkpWRHRGUVVOSkxHRkJiRUpUTEVWQmJVSmFJaXdpWm1sc1pTSTZJ bUZ3Y0M1elkzTnpJaXdpYzI5MWNtTmxjME52Ym5SbGJuUWlPbHNpSkdOdmJHOXlPaUJuY21WbGJq dGNiaVJpWjJOdmJEb2dkMmhwZEdVN1hHNGtabTl1ZEMxemFYcGxPaUF4TkhCNE8xeHVKSEJoWkdS cGJtYzZJRFZ3ZUR0Y2JseHVZbTlrZVNCN1hHNGdJQ0FnTG5SbGMzUWdlMXh1SUNBZ0lDQWdJQ0Jt YjI1MExYTnBlbVU2SUNSbWIyNTBMWE5wZW1VN1hHNGdJQ0FnSUNBZ0lHeHBibVV0YUdWcFoyaDBP aUF5SUNvZ0pHWnZiblF0YzJsNlpUdGNiaUFnSUNCOVhHNGdJQ0FnTG5SbGMzUWdlMXh1SUNBZ0lD QWdJQ0JqYjJ4dmNqb2dKR052Ykc5eU8xeHVYRzRnSUNBZ0lDQWdJQ1k2T21GbWRHVnlJSHRjYmlB Z0lDQWdJQ0FnSUNBZ0lHTnZiblJsYm5RNklGd2lYQ0k3WEc0Z0lDQWdJQ0FnSUNBZ0lDQmlZV05y WjNKdmRXNWtMV052Ykc5eU9pQWtZbWRqYjJ3N1hHNGdJQ0FnSUNBZ0lIMWNiaUFnSUNCOVhHNTlY RzVjYm1KdlpIa2dMblJsYzNRZ2UxeHVJQ0FnSUhCaFpHUnBibWM2SUNSd1lXUmthVzVuTzF4dWZW eHVJbDBzSW5OdmRYSmpaVkp2YjNRaU9pSWlmUT09ICovJzsKCQkJdmFyIHN0eWxlRWxlbWVudCA9 IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJyk7CgkJCXN0eWxlRWxlbWVudC5zZXRBdHRy aWJ1dGUoJ3R5cGUnLCAndGV4dC9jc3MnKTsKCQkJZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChz dHlsZUVsZW1lbnQpOwoJCQlzdHlsZUVsZW1lbnQuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRl VGV4dE5vZGUoY3NzVGV4dCkpOwoJCX0pOwoJPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo=